しろかい!

アプリ開発や機械学習などの開発Tips.

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

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

f:id:shun9167:20150427145103p:plain

動作サンプル

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

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の取得方法は以下を参照して下さい.

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

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

参考ページ

以下のページを参考にさせて頂きました!
かなりわかりやすく記述されているので是非一度ご覧ください!

英語ですが,こちらも参考になります.

余談

GitHub Pagesって便利ですね!プッシュ通知のサンプルを公開するのに使用してみました.
方法は以下が参考になります.