Skip to content

PWAの基礎知識(その9)「Push API/VAPID編」

by : 2018/07/27

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はこの仕様に則っていない(そもそも独自仕様)ので、対応できません。

From → HTML5

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

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