環境は以下に記載ですが、localhostで試験的にやってみたい人向けに書いています。
OneSignalというサービスを利用して対応してみましたが以下の理由で対応しました。他に良いものもあるかもしれないですが自分の中ではこれが一番しっくりきました。
無料で利用できる早速検証環境を羅列
非SSLで利用可能
Mac & Windows系の主要ブラウザ対応(iOSは非対応)
| 環境 | 概要 |
|---|---|
| 2017/08/19日検証 | |
| プッシュサービス | OneSignal |
| Webサーバ | macOS Sierra上にapache(Apache/2.4.25) |
| ホスト | http://localhost/~{ユーザ名}/ |
http://localhost/index.htmlに実現するイメージです。
1.サイトに登録
https://onesignal.com/に登録、登録にはメアド＆パスワードでOK
GitHubとかその他でも可
登録作業は本質ではないので省略
2.新しいプロジェクトの設定(Safari編)
2-1.プロジェクト名の入力
Add a new appを押し新規作成 ここは自分で適当に決める今回は`Test’で作成
2-2.WebSite Pushを指定
WebSiet Pushを選択2-3.Apple Safariを指定
Apple Safariを指定2-4.テストサイト情報を指定
必須入力が、２つで
Site Nameこれは適当で良い今回はTest1を指定 Site URLここにhttp://localhostを指定 残り２つは製品をリリースするのなら触った方が良いがとり得ず今は放置
2-5.SDKの指定
何も考えず
Websiet Pushを選択2-6.Test実行
この画面に来ると２つのことをする必要がある
1. 承認用HTMLの作成
2. ブラウザから承認
まずは、
承認用HTMLの作成から # sudo vi /Library/WebServer/Documents/index.html.en以下のソースを記載
<html>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "{Your App IDを置き換え}",
httpPermissionRequest: {enable: true},
allowLocalhostAsSecureOrigin: true,
autoRegister: true,
notifyButton: {enable: false}
}]);
</script>
<body>
<h1>It works!</h1>
</body>
</html>Your App IDを置き換え部分を書き換えてください。ブラウザから承認の実行 http://localhost/
にアクセスしてアクセスを許可をしてサイトに戻り確認作業
とここまでがSafariの設定次にその他ブラウザ対応
個人的にですが実はSafariの方が簡単でした。
3.その他ブラウザ対応
次はその他ブラウザ今回のテストはChromeで実施この方法でFireFoxも対応可能です。
3-1.設定情報の登録
App Setting => Google Chrome and Mozilla Firefox => CONFIGUREの順番で移動
入力情報がこの場合は、
https://localhostにしてMy site is not fully HTTPS設定をチェックをつけないようにして登録します。 色々試したのですがこうしないと正しく登録できない。
3-2.追加ファイルの設置
ここで認証の前に一つ対応が入ります。index.htmlの変更は不要なのですが追加でJSファイルが１つ必要です。# cd /Library/WebServer/Documents/ # sudo wget https://cdn.onesignal.com/sdks/OneSignalSDKWorker.jsどうやらChromeやFireFoxだとローカル内のOneSignalSDKWorker.jsが必要みたいでこれを取って来る必要があります。
この内容の注意したいところがあります。
例えばサイトのアクセスが
http://localhost/~{ユーザ名}/index.htmlこの場合でもOneSignalSDKWorker.jsのアクセス先はhttp://localhost/OneSignalSDKWorker.jsにする必要があるところです。少しみてみるとCrhome用のデバッグコンソールに出て来るので失敗する場合は、エラーログをチェックしてみると良いです。
