Chrome Extension を使ったPush通知

スマートフォンを利用しているユーザにとってPush通知サービスは馴染み深いサービスと言えます。例えば、ニュースアプリを利用しているユーザであれば、わざわざネットで検索しなくとも最新ニュースを受動的に取得することができます(※1)。

特に、地震速報のようなリアルタイム性が求められる情報をPush通知機能で取得しているユーザは多いのではないでしょうか。このようにPush通知サービスはユーザが受動的に情報を取得するための機構を提供します。apps-gcpではGCP×Chromeを利用してPush通知機能を実現する方法について説明します。

第1部ではGoogleのPush通知機構であるGoogle Cloud Messagingの送信フローとサンプルプログラム(GoogleがGitHub上で公開しているサンプルコード)の動作手順について学び、第2部ではGAE(GoogleAppEngine)からChromeに対してPush通知を配信する手順を学びます。

今回の記事は第一部となります。それではPush通知機能について学んでいきましょう。

※1 全てのニュースアプリがPUSH通知をサポートしているとは限りませんが、大多数のニュースアプリはPUSH通知機能をサポートしているかと思います。

開発者にとってPush通知は何が嬉しい？

Push通知の一番のメリットは無駄な通信が発生しないことです。一昔前の技術(Polling)であれば、クライアントサイドからサーバに対して一定頻度で更新情報がないかチェックする必要がありましたが、Push通知を使えば必要なとときに必要な情報をユーザに送信することができます。

Push通知の送信フロー

本章ではGoogle Cloud Messaging(以下GCM)の送信フローについて説明します。下図のフローに沿って説明をおこないます。

図1. GCMのメッセージ送信フロー

1. senderIdの登録

Chrome extension(またはChromeアプリ)を通して、senserId(※2)をGCMサーバに登録します。これにより、GCMサーバーはPush通知対象のChromeブラウザにメッセージを送信できるようになります。

※2 senderIdに指定する値はGCPプロジェクトの「Project Number」となります(下図参照)。

画像1. GCPプロジェクトのProject Number

2. registrationIdの取得

senderIdの登録が完了するとresistrationIdがコールバックされます。

3. 取得したregistrationIdを利用サーバに送信

(2)で取得したregistrationIdを(ユーザ保有の)メッセージ送信元のサーバに送信します(※3)。(4)の準備として、送信元サーバにregistrationIdを保持させます。

※3 送信元サーバから(GCMサーバを経由して)特定のChromeブラウザにPush通知を送信するためにはregistrationIdが必要となるためです。

4. GCMサーバへ通知メッセージの送信

ユーザ側のサーバからGCMサーバにメッセージを送信します。このとき送信するパラメータは以下3つとなります。

• registrationId
• API Key(※4)
• 送信したいメッセージ

※4 Developers ConsoleのCredentials画面で生成するキーとなります。

5. ChromeブラウザへのPush通知

GCMサーバは、ユーザのサーバからのリクエストを受信後registrationIdに該当するChromeブラウザに(4)のメッセージを送信します。

以上がGCMサービスの概要となります。次は実際にGCMのサンプルプログラムを動作させてみましょう。

サンプルプログラムを動かしてみる

それでは実際にPush通知のサンプルプログラムを動作させてみましょう。利用するプログラムはGoogleがGitHub上で公開しているサンプルプログラムとなります（※5）。

※5 本稿の目的は、サンプルプログラムの動作からGCMサービスの仕組みを理解することです。ソースコードについての説明は第２部でおこないます。

GCPの設定

前提として、サンプルプログラムの動作にはGCPの設定が必須となります。以下ではGCPの設定手順について説明します。

1. GCPプロジェクトの作成

以下のリンクにGoogleアカウントでログインしGCPプロジェクトの作成(※6)をおこないます。既にプロジェクトがある場合は次に進んでください。

https://console.developers.google.com/project

※6 Billing設定の説明については省略します。

画像2. Projectの作成

2. プロジェクト管理画面への遷移

GCPプロジェクトの作成が完了したら、対象プロジェクトの管理画面へ遷移し、左メニューの[APIs & auth]-[APIs]をクリックしてください。

画像3. APIs画面

3.GCM APIの有効化

API一覧にある「Google Cloud Messaging for Chrome」を「ON」にしてください。

画像4. GCM APIのON

4.API Keyの生成

次にAPI Keyを生成します。左メニューの[APIs & auth]-[Credentials]を選択し、「Create New Key」ボタンを押下してください。キー生成のためのポップアップ画面が表示されるので４種類のキーから「Server key」を選択しAPI Keyを生成してください(※7)。

※7 API KeyはGCMサーバ経由でChromeブラウザにメッセージを送信するときに必要となります。

画像5. API Keyの生成

これでGCP側の設定は完了となります。次は実際にサンプルプログラムを動作させてみましょう。

プログラムの動作手順

GCMのサンプルプログラム(※8)を動作させるための手順について説明します。このサンプルプログラムはregisterIDの登録機能と(Push通知をおこなうための)Linuxコマンド(curl)の生成機能を提供します。生成されたcurlコマンドを実行し、GCMサーバからPush通知を受信できればプログラムの実行は成功となります。

1. ソースコードのDL

以下のgitコマンドでサンプルプログラムをcloneしてください。

※8 サンプルプログラムを公開しているGitHubのページは以下のURLとなります。
https://github.com/GoogleChrome/chrome-app-samples

2. サンプルプログラムのインポート

Chrome設定画面から左メニューの「拡張機能」を選択し「パッケージ化されていない拡張機能を読み込む…」ボタンを押下してください。フォルダ選択のポップアップが表示されるので(1)でダウンロードしたサンプルコードの中からgcm-notificationsを選択します。

画像6. Chrome設定画面

3. インポート完了の確認

プログラムのインポートが完了すると、拡張機能の一覧に「GCM Notification」が追加されます。これでインポートは完了です。

4. アプリケーションの起動

インポートが完了したら「起動」リンクをクリックしてアプリケーションを起動します。

画像7. GCMアプリのインポート

5. senderIdの登録

アプリが起動したら「Sender ID(※9)」にGCPプロジェクトの「Project Number」を入力し「Register」ボタンを押下してください。

※9 Sender IDを登録する理由については前章の「Push通知の送信フロー」をご確認ください。

画像8. GCMアプリの起動

6. コマンドの発行

Sender IDの登録が完了したら「API Key(※10)」「Key」「Value」を入力してください。入力するとcurlコマンドが自動生成されますので、このコマンドをコピペしてください。

※10 前章のGCP設定(4)で説明したKeyとなります。

画像9. コマンドの発行

7. メッセージの受信

Terminalを起動したら、コピペしたコマンドを実行してください(※10)。Push通知が成功すると通知メッセージが画面右上に表示されます(画像11参照)。

※11 401エラーが発生した場合はAPI Keyが間違っている可能性があります。

画像10. Push通知の受信

まとめ

以上でGCMの送信フローとサンプルコードの動作手順についての説明は終了となります。GCMサービスの仕組みは理解することができたでしょうか。次回は実践編としてGAEサーバからChromeブラウザに対してPush通知を送信する方法を解説します。

ぜひ第二部の記事もチェックしてください！！