Chrome42のBrowser Push Notificationを試してみた

概要

Chrome Beta 42でAndroid端末でもWebサイトからプッシュ通知を送信できるようになったので試してみました。
内容としては概ねPush Notification on the Open Webと同じです。

参考になれば幸いです

事前準備

  • 現在Beta版のChromeでしかプッシュ通知が動作しないのでPlay Storeで「Chrome Beta」を検索してインストール
  • 下記からサンプルをダウンロード
    push-messaging-and-notifications
  • サンプルはSSLでしか動作しないのでSSLサーバー
    httpでアクセスすると下記のようなエラーがでます

導入手順

Google Developers Consoleでプロジェクトの作成

Google Developers Consoleにアクセスして「プロジェクトの作成」を選択して下記項目を設定し、「作成」をクリック
プロジェクト名: 適当
プロジェクトID: デフォルト
create_project

Google Developers Console でプロジェクトの設定

作成したプロジェクトを選択しプロジェクトの設定を行います。

「概要」画面に「プロジェクト番号」というものがあるのでこれをメモしてください。
project_summary.

APIと認証 > API 画面を開き「Google Cloud Messaging for Android」で検索して有効にします。
enable_gcm_android

APIと認証 > 認証情報 画面を開き「公開APIへのアクセス」の「新しいキーを作成」をクリックします。
キーの種類を聞かれるので「サーバーキー」を選択してください。
許可対象のIPアドレスは未設定でもテストには問題ないので何も書かずに作成してしまって問題ないです。
create_new_key_001
create_new_key_002
サーバーキーの作成が完了したら「APIキー」をメモしてください。
server_key
以上で Google Developers Console での作業は終わりです。

サンプルの配置と編集

push-messaging-and-notificationsからダウンロードしたpush-messaging-and-notificationsサンプルを解凍してSSLの使用できるサーバーに配置します。
配置したらmain.jsのYOUR API KEY, manifest.jsonのYOUR PROJECT NUMBERを先ほどメモした「APIキー」、「プロジェクト番号」に変更します。

プッシュ通知のテスト

端末からindex.htmlにアクセスします。正常にサンプルが動作していれば、下記のように「Enable Push Messages」のボタンが有効になっているはずです。
show_index
「Enable Push Messages」のボタンが有効になっていない場合は下記を確認してみてください。

Google Developers Consoleで「Google Cloud Messaging for Android」が有効になっているか
「APIキー」、「プロジェクト番号」が正しいか
アクセスしているブラウザがChrome 42以上か
SSLでアクセスしているか
「Enable Push Messages」のボタンをクリックすると「cURL Command to Send Push」に下記のようなコマンドが表示されるのでPCにコピーします。

※ YOUR API KEYやREGISTRATION IDは伏せてます。

初回は下記のようにプッシュ通知を受け入れるか質問されるので許可してください。
ask_register
Terminal等からコピーしたコマンドを実行すると端末にPush通知が届きます。
receive_notification
サンプルで表示されるコマンドを見れば分かりますが、実際に使用する場合等は端末に対応するregistration idがあればよいのでサーバー側で取得したregistration idを保存する感じになるかと思います。

便利!

スポンサーリンク
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。