Chromeブラウザでプッシュ通知を出す

お疲れ様です。
本日はchromeブラウザでプッシュ通知を行う手順です。

世の中にはプッシュ通知を行うサービスがいくつかありまして、そのようなサービスを使えば誰でも簡単に実装できます。

プッシュサービスご参考

一方「自分で動かしてみたいんじゃい！」という方もいらっしゃるかと思いますので、一通り動くまでを解説してみたいと思います。文字ばかりなので蔵人向けです。

あ、あとSSLが使えるサーバが必要です。ご注意を。

まず下記にアクセスし、プロジェクトを作成します

ホーム画面にいきましてプロジェクト番号（152327923みたいなもの・・・Ａ）をメモします（後で使います）

API Manager→Google Cloud Messaging→enableにします

認証情報→create credentials→ウィザードで選択を選択し、
必要な認証情報の種類→Google Cloud Messaging
APIを呼び出す場所→サーバー
を選択してサーバーキーを作成します。

キー（AIzaSyCm0BrpsdafLEFjfdlsiadaisdfasoehみたいなもの・・・Ｂ）をメモします（後で使います）

次に実験用のファイルを取得します。gitにありますのでsvnで持ってきます

svn export https://github.com/GoogleChrome/samples/trunk/push-messaging-and-notifications/

その中に含まれるindex.htmlにchromeブラウザ（chrome42以降）からhttpsでアクセスします。その後の手順はその中に書いてあります。一応説明しますと、

Create a project in the Google Developer Console.
GDCからプロジェクトを作ります（上記でやりました）
Under APIs enable Google Cloud Messaging for Android and Google Cloud Messaging for Chrome.
Google Cloud Messaging for Android とGoogle Cloud Messaging for ChromeのAPIを有効にせよ、と書いてありますが、恐らく現在はその区別はありませんで、Google Cloud MessagingだけでＯＫです。これも上記でやりました
Under Credentials, create a new key and select Server key as the type.
証明書の下に行きサーバーキーを作成せよ。これもやりました。
Create a copy of [config.sample.js](config.sample.js) called config.js
パッケージに入っているconfig.sample.jsをコピーしconfig.jsを作れです。ここからやってください。
Create a copy of [manifest.sample.json](manifest.sample.json) called manifest.json
manifest.sample.jsonをコピーしmanifest.jsonを作れ
Replace “<Your Public API Key …>” in your new config.js file with your own API key from the Google Developer Console project.
config.jsを開きYour Public API Keyのところに上記Ｂを入れよ
Replace “<Your Project Number …>” in your new manifest.json with your own project number from the Google Developer Console project.
manifest.jsonを開き、Your Project Numberのところに上記Ａを入れよ

です。そしてそのページをリロードします。もう一度書きますがｈｔｔｐｓでアクセスしてください。でないとenable push messageのボタンが有効になりません。

ボタンが有効になればそれをクリックします。

メッセージを送るためのCURLコマンドが表示されます。それをコピペしてターミナルに貼り付け、実行します。

上手く動作すれば、プッシュ通知が送られてきます！

面白いですね。私は何度もプッシュしてしまいました。でも何度もやっているとメッセージ変えたくなるんですよね。メッセージの内容がservice-worker.js に書かれているようだったので、その内容を変更して再度プッシュしてみました。が・・・

何度やっても同じメッセージが届きます。

ちょっと悩みましたが当然でした。service-worker.jsはクライアントのブラウザ側に常駐して動作するのです。つまり最初の一回のものがクライアント側に送られており、それが何度も呼び出されているのです。サーバー側のファイルを変更したところでメッセージは変わりません。

自分のブラウザに送り込まれた（？）service workerを消すには
chrome://serviceworker-internals/
にアクセスし、該当のworkerをunregisterします。

これでサーバ側のファイルを変更し、CURLを叩けば、新しいメッセージが送られてきます！

ちなみにCURL内にあるregistration_idsは変わりますので、push-messaging-and-notifications/のindex.htmlにて一度disable push messageし、再度enable push messageしてください。

動的にメッセージ出せないと困るんだよ！という声が聞こえてきますが、それは

のような工夫が必要そうです。

とりあえず本日は以上です。