お疲れ様です。
本日はchromeブラウザでプッシュ通知を行う手順です。
世の中にはプッシュ通知を行うサービスがいくつかありまして、そのようなサービスを使えば誰でも簡単に実装できます。
プッシュサービスご参考
一方「自分で動かしてみたいんじゃい!」という方もいらっしゃるかと思いますので、一通り動くまでを解説してみたいと思います。文字ばかりなので蔵人向けです。
あ、あとSSLが使えるサーバが必要です。ご注意を。
Google Developers Consoleでの設定
まず下記にアクセスし、プロジェクトを作成します
ホーム画面にいきましてプロジェクト番号(152327923みたいなもの・・・A)をメモします(後で使います)
API Manager→Google Cloud Messaging→enableにします
認証情報→create credentials→ウィザードで選択を選択し、
必要な認証情報の種類→Google Cloud Messaging
APIを呼び出す場所→サーバー
を選択してサーバーキーを作成します。
キー(AIzaSyCm0BrpsdafLEFjfdlsiadaisdfasoehみたいなもの・・・B)をメモします(後で使います)
Gitからサンプルを取得
次に実験用のファイルを取得します。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だけでOKです。これも上記でやりました - 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のところに上記Bを入れよ - 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のところに上記Aを入れよ
です。そしてそのページをリロードします。もう一度書きますがhttpsでアクセスしてください。でないと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してください。
動的にメッセージ出せないと困るんだよ!という声が聞こえてきますが、それは
のような工夫が必要そうです。
とりあえず本日は以上です。