アプリを使わなくてもPush通知が来る！ - ZOZO TECH BLOG

アプリを使わなくてもPush通知が来る！

Web Push

f:id:vasilyjp:20180927090637j:plain

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)

必要なもの

導入手順

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

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

プロジェクト作成

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

プロジェクトID

  • APIのkeyの作成

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

API一覧

次に左のメニューで「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>にメモしたプロジェクト番号を入力します。

設定が終了したら、用意した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/

カテゴリー