VASILYでインターンをしている茨木です。

3月9日に発表されたGoogle Chromeの最新ベータ版v42.0.2311.22でPush APIがサポートされニュースになりました。ブラウザからスマホにプッシュ通知が送れるというものです。
スマホ向けウェブサービスをやっている方ならみんな気になるこの機能、早速試してみました。かなりシンプルなので皆さんもぜひ触ってみてください。  

 

以下のサンプルやサイトを参考にしました。

〇サイト
http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web

〇サンプルプログラム
https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications

〇実行環境
Windows8.1 (64bit)
Google Chrome 43.0.2327.5 dev-m (64-bit)

〇必要なもの
SSLサーバー(github.ioなど)
バージョン42以上のGoogle Chrome

(私はhttp://getgooglechromeoffline.net/tag/google-chrome-42-download/から入手しました)

〇導入手順

・Google Developer Consoleでのプロジェクトの作成 
今回のサンプルではPush通知にGoogleのAPIであるGCM(Google Cloud Messaging)を使うので、まずGoogle Developer Console (https://console.developers.google.com/project)でプロジェクトを作成します。画面にある「プロジェクト作成」をクリックするとモーダルウィンドウが出てくるので、「プロジェクト名」に好きなプロジェクト名を入力、「~利用規約を~同意」にチェックをしてください。プロジェクトIDはそのままで結構です。入力後、「作成」クリックするとプロジェクトが作成されます。

 

プロジェクトを作成すると画面上部にプロジェクトIDとプロジェクト番号が表示されます。今回使うのは「プロジェクト番号」ですので、これをメモしておきます。

 

・APIのkeyの作成
左のメニューで「APIと認証」→「API」と選択します。そうするとAPIの一覧が出てくるので、「Google Cloud Messaging for Android」と「Google Cloud Messaging for Chrome」をONにします。 

 

次に左のメニューで「APIと認証」→「認証情報」と選択し、「新しいキーを作成」をクリックしてください。モーダルウィンドウが出てきたら「サーバー キー」を選択します(間違えると動かないので注意してください)。

次に、許可対象IPアドレスを入力するテキストボックスが出てきますが、入力しなくても大丈夫です。モーダルウィンドウ下の「作成」をクリックすると、keyが生成されます。

 

Keyを生成すると表が出てくるので、その中の「APIキー」をメモしておきます。

 

・サンプルプログラムの設定・アップロード
サンプルプログラムは先ほど取得した「プロジェクト番号」と「APIキー」を設定するだけで動かすことができます。
main.jsの3行目の<YOUR API KEY>にメモしたAPIキーを入力します。

'use strict';

var API_KEY = '<YOUR API KEY>';

var curlCommandDiv = document.querySelector('.js-curl-command');
var isPushEnabled = false;

manifest.jsonの10行目の<YOUR PROJECT NUMBER>にメモしたプロジェクト番号を入力します。

{
  "name": "Push Demo",
  "short_name": "Push Demo",
  "icons": [{
        "src": "images/icon-192x192.png",
        "sizes": "192x192"
      }],
  "start_url": "./index.html?homescreen=1",
  "display": "standalone",
  "gcm_sender_id": "905242668767",
  "gcm_user_visible_only": true
}

設定が終了したら、用意したSSLサーバー(github.ioなど)にhttps://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications内のファイルをアップロードします。

 

・プッシュ通知を登録
index.htmlにアクセスすると、問題なければ「Enable Push Messages」ボタンが有効になっており、これをクリックすると「cURL Command to Send Push」の下にコマンドが出てきます。これがPush通知のPOST送信用のコマンドになるのでコピーしておきます。結構長いですが、これで一つのコマンドです。上手く行かない場合は、ブラウザのバージョンを確認してください。

 

コピーしたコマンドをコマンドラインに貼り付け、実行します。成功した場合には

{"multicast_id":<数字>,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"<数字>"}]}

と表示され右下にプッシュ通知が表示されます。

Androidの場合も、端末のChromeから同様の手順でコマンドを取得するところまで行ってください。それから取得したコマンドをPCに移して実行することでPush通知を実現できます。Androidの場合もやはりGoogle Chromeのバージョンは42以降が必要ですので、注意して下さい。

〇簡単な説明

main.jsはロード時、serviceWorker.registerでサーバー上のservice-worker.jsをService Workerとして登録します。そして、ボタンが押された場合に関数subscribe内のserviceWorkerRegistration.pushManager.subscribe()でsubscriptionの登録を行い、そのsubscriptionとAPI Keyを用いてcURLのコマンドを生成しています。

あとは、サーバー上でcURLを実行してpushサーバにPOST送信することで、登録を行った端末にPush通知が送られます。

〇問題点
・現状ではPOST送信する側からメッセージなどのデータを送れず、service-worker.js内に予め書いたstaticなメッセージしか通知できません。仕様にはデータの送信も含まれているので、今後の実装が期待されます。
・Google Cloud Messaging for Chromeは個人の場合10000リクエスト/日の制限があります。

〇備考
・このサンプルではindex.htmlでAPIkeyの設定が必要ですが、それはコマンドの生成の為であり、クライアントサイドへのAPIkeyの記述は本来不要です。
・subscriptionIdは署名が行われる毎（「Enable Push Messages」のクリック毎）に発行されます。当然クライアントごとに異なります。
・サーバーサイドでservice-worker.jsを書き換えても、クライアントサイドのservice-worker.jsにはすぐには反映されません。ですので、service-worker.js を書き換えてメッセージを更新、といった使い方は難しいです。

VASILYではインターン生を募集しています。
ちょっとでも気になった方は是非一度来てみてください！
https://fresh2016.vasily.jp/