Skip to content

PWAの基礎知識(その8)「Push API/Chrome編」

by : 2018/07/20

PWAを構成する技術要素の一つにプッシュ通知があります。Push APIがそうで、該当URLを開いていなくても通知を受けられる仕組みです。

Push APIには幾つかの実装方法がありますが、今回はFCM/GCMを使ったGoogle Chrome向けの実装を紹介します。

Firebaseでプロジェクトを作成する

FCMを使うので、まず最初にFirebaseでプロジェクトを作成します。

作成した後、ウェブアプリにFirebaseを追加を選択します。

そして表示されるモーダルの中に messagingSenderId という項目があります。これを覚えておきます。

さらにプロジェクトの設定を選び、クラウドメッセージングを選びます。

その中に表示される、サーバーキーも覚えておきます。

必要な技術

Push APIを使う際に必要なのはService Workerになります。

manifest.jsonの作成

manifest.jsonを作成します。内容は例えば以下のようになります。 YOUR_SENDER_ID となっているところは先ほどの messagingSenderId の値になります。

serviceworker.js の作成

Service Worker用のJavaScriptファイルを作成します。 serviceworker.js とします。今回は簡単な内容にしています。最低限必要なのは install と push イベントになります。

HTMLの記述

HTMLではmanifest.jsonを読み込みます。

JavaScriptの記述

初期化

まずPush通知が使えるかどうか、さらに購読中かどうかを判別します。以下のようなコードで順番に確認できます。

購読処理

次に購読処理を書きます。これは何かのボタンを押したタイミングなどで実行すれば良いでしょう。

プッシュ通知の送り方

上記のコードで取得できる subscription には以下のような内容が入っています。

  • endpoint
  • expirationTime
  • options
  • options.applicationServerKey
  • options.userVisibleOnly

今回のようなFCMから送信する場合に必要なのは endpoint になります。例えば以下のような値です。

そして、この対象に対してプッシュ通知を送るには以下のようなコマンドを実行します。 YOUR_API_KEY となっているのは Firebase で取得したサーバキーになります。

registration_idsのところに配列でendpointとして取得したトークンを指定すればOKです。

受信する

プッシュ通知を受信すると通知バナーが表示されます。このメッセージは Service Worker側で固定していますが、サーバにfetchで問い合わせてデータ取得することも可能です。登録IDが必要な場合は、以下のコードをService Worker内で実行します。

注意点

Push APIはタブを閉じていても(そのURLがアクティブでなくとも)表示されます。ただしGoogle Chromeを終了していたら届きませんので注意してください。Webブラウザを再開すると通知が表示されます。この方式の場合、表示させるメッセージをプッシュ通知側から送ることはできません。データが送れるのは VAPID という方式を使った場合になります。

この方法はGoogle Chrome独自の方式になります。手軽に実装できますが、FirefoxやEdgeなどでは使えませんのでご注意ください。


今回の方式の場合、サーバ側の用意は殆どいりません。取得した登録IDをサーバ側に入れておくだけで大丈夫です。保存する際に任意のユーザIDと結びつけておくことで、プッシュ通知で表示する内容をカスタマイズできるでしょう。

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。