2017年のトレンド予測で「ネイティブアプリが減少、WEBアプリケーションに移行が本格化」というものがありました。
確かにAndroidとiOSで言語も異なるし、開発コストはいつもよりかかるし、ARなどの複雑な内容でなければわざわざネイティブアプリを作る必要はありません。
ネイティブアプリは少し前までプッシュ通知が送信可能という大きな利点を持っていたのですが、ついにWEBブラウザでもプッシュ通知が可能になりつつあります。
調べたところ、なんと便利なjsライブラリが存在するそう。
※先に大事な点ですが、WEBブラウザからのプッシュ通知はまだiPhoneなどのiOS端末はブラウザ側のサポートがなされていないため、非対応です。そのほか、Android端末でもOSの仕様上HTTPS環境でなあいと上手く表示されないとか。IEは実装予定との告知が出ています。(2017/04/19時点)
導入して叩くだけ、「Push.js」
その名も「Push.js」。
本来はAPIを設計し…となりますが、これがあればAPIをイチから組み立てる必要もありません。
Window10では画面の右下からこんな感じでニョキっと生えてきました。楽しい。
対応ブラウザは下記。
・Firefox 22+
・Chrome 5+
・Safari 6+
・Opera 25+
・Android Browser 4.4+
・Blackberry Browser 10+
・Opera Mobile 37+
・Firefox Android 47+
・Samsung Internet
・Chrome 5+
・Safari 6+
・Opera 25+
・Android Browser 4.4+
・Blackberry Browser 10+
・Opera Mobile 37+
・Firefox Android 47+
・Samsung Internet
IEは実装予定との告知が出ています。
また、Edgeは私の環境で動かしてみたところ、動作しました。
その他の制約としては、初回の通知を受け取る時にブラウザ側から許可のアラートが出ます。一度許可すればOKです。
導入方法
・STEP1:jsを読み込む
・STEP2:通知の内容を作る
・STEP2:通知の内容を作る
◆STEP1:jsを読み込む
「Push.js」をダウンロードして、読み込みます。（GitHub）
CDN経由で読み込む場合は下記をソースに記述してください。
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script> |
対応ブラウザが増える可能性があるので、CDN経由の方が良いかもしれませんね。
◆STEP2:通知の内容を作る
|
1 2 3 4 5 6 7 8 9 |
Push.create("Hello world!", { body: "How's it hangin'?", icon: 'icon.png', timeout: 4000, onClick: function () { window.focus(); this.close(); } }); |
それぞれ通知のどこに対応しているかなんとなく分かるかと思います。
| “Hello world!“ | こんにちは！とかメッセージでも良いですが、 サイトやアプリケーションの名前が無難かなと思います |
| body: “How’s it hangin’?“ | プッシュ通知の内容 |
| icon: ‘icon.png‘ | アイコン画像のリンク *以下のように分けて記述も可能です。 icon: { x16: ‘images/icon-x16.png’, x32: ‘images/icon-x32.png’ } |
| timeout: 4000 | 通知が消える秒数（ミリ秒） |
| onClick: function () {～} | 通知をクリックした時の処理を追加できます。 *「window.focus();」windowにフォーカス *「this.close()」通知を閉じる |
その他の設定
| vibrate:[200, 100] | モバイル端末での、バイブレーションの振動パターン配列。 数値は振動の長さ。 |
| link:”../sample.html“ | モバイル端末で通知をクリックしたときのリンク先。相対URLパス。 （サーバー上にserviceWorker.jsファイルが必要） |
| requireInteraction:false | trueにすると、手動でクリックするか閉じるかしない限り通知が消えないそうです。 |
