hifive開発者ブログ

Webブラウザにプッシュ通知を送れるPush APIは魅力的な機能ですが、各ブラウザによって実装が異なっていたり、Firebaseでプロジェクトを登録したりするのが手間でした。それを共通化し、さらにプロジェクト登録不要で使えるようにする仕組みがVAPIDになります。

今回はこのVAPIDを使ったPush APIの使い方です。

必要なもの

今回はVAPIDに対応したライブラリ、web-pushを使います。今回はNode.jsのライブラリです。zaru/webpushというRuby向けのライブラリもあります。

初期設定

まずサーバ側で秘密鍵と公開鍵を用意します。これは以下のコードで可能です。

この内容を application-server-keys.json などとしてサーバに保存しておきます。

JavaScriptの準備

Service Worker

VAPIDを使った場合の魅力として、ペイロードが送れるという点が挙げられます。メッセージ付きで送れるので、クライアントサイドで処理判別ができます。そのための処理をService Worker用のJavaScriptに入れておきます。

クライアントサイド

次にクライアントサイドですが、まずService Workerを読み込みます。そして、その後プッシュ通知の登録状態を確認しています。

購読を開始する際のイベントは次の通りです。大事なポイントとして、 applicationServerKey を追加しています。ここには公開鍵をunit8にしたものを適用します（後述）。

公開鍵の設定です。 vapidPublicKey には web-push で生成した公開鍵を指定します。

Web Pushの購読データ（subscription）をJSON出力すると、次のような内容になっています。このデータをすべて保存しておきます（サーバなど）。

Web Pushを送る

ではサーバからプッシュ通知を送ってみましょう。コードは以下のようになります。まず鍵の設定と受信者を指定します。

そしてプッシュ通知を送ります。 icon で表示するアイコンを指定しています。

そしてGoogle ChromeやFirefoxに対して通知が送れます。

Firefoxの場合です。

---

VAPIDを使った場合の利点としては、Firebaseでプロジェクトを作る手間がなく、Webブラウザの共通仕様の基で開発できるということです。なお、Safariはこの仕様に則っていない（そもそも独自仕様）ので、対応できません。

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と結びつけておくことで、プッシュ通知で表示する内容をカスタマイズできるでしょう。