Firefox の通知機能と戯れる (Push API)

車輪開発大好きおたいがです。こんにちは。( 挨拶 )

先日… 2016 年 1 月 26 日 ( 火 ) に Firefox 44 正式版がリリースされ、ウェブサイトからプッシュ通知を受け取れることが話題になりました。これを機に、今まで触れたことのなかった Push API について簡単にまとめてみました。

お手本サイト

「とりあえず動作が確認できるサイトを見たい / 知りたい」という方は、Service Worker Cookbook の Web Push 項目を Firefox または Google Chrome で見れば、数種類のサンプルの動作を確認することができます。

実装難易度 ( Beginner, Intermediate, Advanced ) ごとにサンプル項目が用意されています。( デモ、コード付き )

Service Worker Cookbook
https://serviceworke.rs/

ローカル動作環境の構築

手元のローカル端末でプッシュ通知環境を構築する手段を紹介します。ひと通りの手順は MDN の Using the Push API にまとめられていますが、この中から必要な項目を抜粋しています。

必要なもの

最低限、以下のものをインストールしておく必要があります。また Node.js は、使用する web-push モジュールが Promise を使用しているため、ES6 をサポートしたバージョンを用意する必要があります。私は LTS の 4 系を使用しました。

• Git
• Node.js ( ES6 対応版 )

push-api-demo リポジトリのクローン

$ git clone https://github.com/chrisdavidmills/push-api-demo.git

web-push モジュールのインストール

$ npm install web-push

以上で支度は完了です。

動作確認

プッシュサーバ起動

$ node server

セキュリティ例外の追加

プッシュサーバの屋台骨となっている Service Worker は HTTPS が必須なため、デモをローカル環境で動作させるためにセキュリティ例外を承認する必要があります。

Firefox で https://127.0.0.1:7000 を開き、セキュリティ例外を承認します。

同様に push-api-demo の Web ページも HTTPS で開く必要があるため、こちらもセキュリティ例外を追加します。

( 本記事では IntelliJ IDEA のビルドイン Web サーバを使用しています )

デモサイトを立ち上げて "Subscribe to Push Messaging" と書かれたボタンを押すと…通知来ました！

あとは自由にコードを弄って遊ぶのみ…です。お楽しみあれ。

参考

Push API - Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Push_API

Using the Push API - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Push_API/Using_the_Push_API

Push Notifications on the Open Web | Web Updates - Google Developers
https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web

Service Worker の紹介: Service Worker の使い方 - HTML5 Rocks
http://www.html5rocks.com/ja/tutorials/service-worker/introduction/

Windows でツールを使わず Node.js の複数バージョンを共存させる
http://qiita.com/rch850/items/f8d42ed3cb7d600520db

Service Worker Cookbook
https://serviceworke.rs/