WebアプリからもPush通知が！ChromeのPush通知について

ネイティブアプリでは当たり前となった「プッシュ通知」を，Chromeからも送れるようになりました．Webアプリからもプッシュ通知が送れるとなり，話題になっています．
早速僕も試してみたので，使い方をまとめておきます．

動作サンプル

とりあえず，サンプルを動かしてみてください．

Chrome プッシュ通知 サンプル

「プッシュ通知を受信する」ボタンを押すと，プッシュ通知を受信できるようになります．
同時に，ボタンの下にコマンドが表示されるので，それを端末（ターミナル）上から実行すると，プッシュ通知を送信できます．
送信に成功すると，次のようなメッセージが表示されます．

{"multicast_id":<æ•°å­—>,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"<æ•°å­—>"}]}%

同時に，プッシュ通知が表示されると思います．

自分でプッシュ通知を動かしてみる．

注意！

• 実行するサーバがSSL通信（https://~）に対応している必要があるので，注意して下さい．
• また，Chromeのバージョンは42以降である必要があります．（デスクトップ版，Android版いずれも）

ソースコードのDL

上記サンプルのソースコードをGitHubからDLします．

そして，以下の箇所を書き換えます．

main.js

3行目の

var API_KEY = '';

に，API keyを入力します．
API keyの取得方法は以下を参照して下さい．
http://tech.vasily.jp/android_chrome_push/

service-worker.js

以下のパスを，自身の環境にあわせて変更して下さい．

8行目付近

var icon = '/chrome-push-notification/images/icon.png';

38行目付近

return clients.openWindow('/chrome-push-notification/');

manifest.json

以下のパスを，同様に自身の環境にあわせて変更して下さい．

• icons内のsrc
• start_url

以上が全て完了したら，サーバにアップロードして，index.htmlにアクセスしてみてください．
上記サンプルと同じようにいけば，うまく動作しています．

補足

実際に導入する際の注意点

このプッシュ通知を実際に導入するとなると，幾つか解決しなければならない問題があります．

1. subscription.subscriptionIdをサーバ側で保持する必要がある．
2. 現状ではプッシュ通知の内容は固定のものしか送れない．

1に関して，このプッシュ通知の仕組みとして，ユーザがプッシュ通知を受信する許可をすると，subscription.subscriptionIdが発行されます．サーバ側では，そのIDに対してプッシュ通知を送信します．なので，このIDをサーバ側で保持しておかなければ，肝心のプッシュ通知を送信できません．
サーバ側で保持する方法としては，ファイルに保存する，DBに保存するなどが考えられます．上記サンプルでは，ファイルに保存するコードも書いてあるので，よかったら試してみてください．
また，サーバ側で保持したIDに対して一斉にプッシュ通知を送信するには，curlコマンド内のregistration_idsに対して，JSONの配列形式で複数のIDを指定してやるだけです．例えば，以下のような感じです．

curl --header "Authorization: key=<API key>" --header Content-Type:"application/json" https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"<subscriptionId1>\", \"<subscriptionId2>\"]}"

2に関しては，これはAPIが対応するのを待つしかありません．
一応，curlコマンドのJSON部にdataというオブジェクトを追加することで，任意のデータを送信することはできるようですが，現状では受信ができないようです．

curl --header "Authorization: key=<API key>" --header Content-Type:"application/json" https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"<subscriptionId1>\", \"<subscriptionId2>\"], \"data\":{\"title\":\"タイトル\",\"url\":\"URL\"}}"

デバッグについて

プッシュ通知が非常にデバッグしにくいのですが，一応こんなツールがChromeに用意されています．

chrome://serviceworker-internals

多少はデバッグしやすい…かな．

参考ページ

以下のページを参考にさせて頂きました！
かなりわかりやすく記述されているので是非一度ご覧ください！
http://tech.vasily.jp/android_chrome_push/

英語ですが，こちらも参考になります．

余談

GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.って便利ですね！プッシュ通知のサンプルを公開するのに使用してみました．
方法は以下が参考になります．