PWAの基礎知識（その9）「Push API/VAPID編」

by moongift : 2018/07/27

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

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

必要なもの

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

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

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

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

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

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

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

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

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

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

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

Firefoxの場合です。

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

From → HTML5

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