Angularでプッシュ通知対応ページを作成
以下では、プッシュ通知を受信する「Webページ」を、AngularのPWA機能を利用して作成します。また、プッシュ通知を送信する「サーバー」を、Node.jsとライブラリーで作成して、実際にプッシュ通知を送信してみます。
プロジェクトの作成
まず、Webページとサーバーのプロジェクトを作成します。WebページのAngularプロジェクトは、前回記事で説明した方法で作成して、PWA機能が利用できるようにします。
サーバーを実装するNode.jsプロジェクトは、リスト1のコマンドで作成します。(1)で空のプロジェクトフォルダーを作成して(2)でそのフォルダーに移動し、(3)の「npm init」コマンドでプロジェクトを作成します。いくつか質問されますが、すべて改行キーを押して、デフォルト値を受け入れます。プロジェクト作成後、(4)でプッシュ通知ライブラリー「web-push」をインストールします。
mkdir p002-push-server # プロジェクトフォルダー作成 ...(1) cd p002-push-server # プロジェクトフォルダーに移動 ...(2) npm init # プロジェクト作成 ...(3) npm install --save web-push # プッシュ通知ライブラリーをインストール ...(4)
プッシュ通知登録の実装
作成したプロジェクトに、プッシュ通知登録の処理を実装していきます。まず、サーバーのプロジェクトにJavaScriptファイルを追加して、リスト2の通り実装します。この処理は、プッシュ通知で使うサーバーの鍵ペア(公開鍵と秘密鍵)を生成するもので、(1)で参照したweb-pushライブラリーの変数webpushを利用して、(2)のgenerateVAPIDKeysメソッドで鍵ペアを生成します。
const webpush = require('web-push'); // web-pushを参照 ...(1) // サーバーの鍵ペアを生成(一度だけ実行) ...(2) const vapidKeys = webpush.generateVAPIDKeys(); console.log('publicKey:', vapidKeys.publicKey); console.log('privateKey:', vapidKeys.privateKey);
リスト2を「node generatekeys.js」コマンドで実行すると、図3のようにコンソールに鍵ペアが出力されるので、値を控えておきます。なお、鍵ペアは1回生成すれば、継続して利用できます。
![図3 生成されたサーバーの鍵ペア(p002-push-server/generatekeys.js)](http://cz-cdn.shoeisha.jp/static/images/article/11278/11278_003.png)
次に、WebページのAngularプロジェクトで、ルートコンポーネント(app.component.ts)のコンストラクターに、プッシュ通知登録の処理をリスト3の通り実装します。
// サーバー公開鍵 ...(1) vapidPublicKey = '<生成したサーバー公開鍵>'; // コンストラクター ...(2) constructor(private swpush: SwPush) { // プッシュ通知登録の処理 ...(3) this.swpush.subscription.subscribe(pushSubscription => { if (pushSubscription == null) { // 登録がない場合、新規に登録 ...(4) this.swpush.requestSubscription({ serverPublicKey: this.vapidPublicKey // サーバー公開鍵を指定 ...(5) }); } else { // すでに登録がある場合 ...(6) // エンドポイント(プッシュ通知送信時にアクセスするURL)...(7) console.log("endpoint:", pushSubscription.toJSON().endpoint); // クライアント公開鍵/Auth Secret(通知の暗号化に利用)...(8) console.log("publicKey:", pushSubscription.toJSON().keys.p256dh); console.log('authSecret:', pushSubscription.toJSON().keys.auth); } }); (略) }
(1)はリスト2で生成したサーバー公開鍵です。(2)のコンストラクターで、Angularのプッシュ通知関連機能を提供するSwPushのオブジェクトを、依存性注入でswpush変数に受け取ります。
(3)で、プッシュ通知登録の処理を行います。this.swpush.subscriptionは、プッシュ通知が登録されていないときはnull、登録されているときは登録内容のオブジェクトを、pushSubscription引数に設定してイベントを発生します。
(4)のようにpushSubscriptionがnullの場合は、プッシュ通知がまた登録されていないため、this.swpush.requestSubscriptionメソッドで新規登録します。このとき(5)のように、サーバー公開鍵をパラメーターに指定します。
プッシュ通知登録が完了したか、すでに登録済みの場合(6)は、(7)のエンドポイント(プッシュ通知送信APIのURL)と、(8)のクライアント公開鍵/Auth Secretを、登録内容を表すpushSubscriptionから取得します。いずれもサーバーがプッシュ通知を送信するときに必要な情報で、本来ならサーバーに送信しますが、このサンプルではコンソールに出力させています。
[補足]複数の意味がある「Subscribe」に注意
Webプッシュ通知の登録を行うことを「Subscribe」と呼びます。また、Angularで利用されるJavaScript版Reactive Extensions(RxJS)で、イベントを受け取るための登録処理も「Subscribe」と呼びます。リスト3ではこれら両方のSubscribeが混在しています。
例えば、リスト3(3)の「this.swpush.subscription.Subscribe」メソッドは、プッシュ通知登録時にイベントを発生する、RxJSのObservable「this.swpush.subscrition」に対して、RxJSのSubscribeメソッドを実行して、プッシュ通知登録のイベントを受け取るようにしています。
一方で、リスト3(3)のイベント変数「pushSubscription」や、(4)の「this.swpush.requestSubscription」メソッドの「Subscription」は、Webプッシュ通知の登録を意味しており、RxJSとは関係ありません。
[補足]Webプッシュ通知で利用する鍵
リスト2で生成したサーバー鍵ペアは、プッシュサービスが送信元サーバーの正当性を判定するために利用します。プッシュ通知送信時、サーバーは自身の秘密鍵で作成した署名をプッシュサービスに渡して、プッシュサービスではサーバー公開鍵で署名を検証します。この仕組みをVAPID(Voluntary Application Server Identification)と呼びます。
一方で、リスト3(8)のクライアント公開鍵とAuth Secretは、プッシュ通知の内容(ペイロード)を暗号化するために利用します。
今回のサンプルでは、これらの検証や暗号化に関連した処理は、web-pushライブラリーが内部的に実行しています。より詳しい処理内容については、Googleが公開している技術文書を参照してください。
リスト3の実装後、「npm run pwa」コマンドを実行してビルドとWebサーバー起動を行って、Webブラウザーで「http://localhost:8080」にアクセスします。初回のページ表示時に、通知の許可を求めるブラウザーのダイアログが表示されます。
![図4 通知の許可を求めるダイアログ(p001-push-client)](http://cz-cdn.shoeisha.jp/static/images/article/11278/11278_004.png)
図4のダイアログで「許可」をクリックすると、エンドポイントと、クライアント公開鍵/Auth Secretがコンソールに出力されます。プッシュ通知の送信時に利用するので、これらの値を控えておきます。
![図5 コンソールへの出力内容(p001-push-client)](http://cz-cdn.shoeisha.jp/static/images/article/11278/11278_005.png)
[補足]通知をブロックしてしまったら
図4のダイアログで「ブロック」をクリックしてしまった場合は、Chromeの設定画面を表示して、「コンテンツの設定」-「通知」で設定を削除してください。削除後にページを再表示すると、図4のダイアログがもう一度表示されます。
![図6 Chrome設定画面で通知設定を削除](http://cz-cdn.shoeisha.jp/static/images/article/11278/11278_006.png)
プッシュ通知送信の実装
ここでは、サーバーからプッシュ通知を送信する処理を実装します。サーバーのプロジェクトにJavaScriptファイルを追加して、リスト4の通り実装します。
const webpush = require('web-push'); // web-pushを参照 // サーバー鍵ペア ...(1) const vapidPublicKey = '<サーバー公開鍵>'; const vapidPrivateKey = '<サーバー秘密鍵>'; // 通知に必要なパラメーター ...(2) const endpoint = '<エンドポイント>'; const p256dh = '<クライアント公開鍵>'; const auth = '<Auth Secret>'; // web-pushライブラリーに検証のための情報を設定 ...(3) webpush.setVapidDetails( 'mailto:<連絡先メールアドレス>', vapidPublicKey, vapidPrivateKey ); // pushSubscription(プッシュ通知送信先情報)を作成 ...(4) const pushSubscription = { endpoint: endpoint, keys: { p256dh: p256dh, auth: auth } }; // プッシュ通知送信 ...(5) webpush.sendNotification( pushSubscription, JSON.stringify({ notification: { title: 'あなただけにお得なお知らせ', body: '年に一度の限定セールがスタート! 今すぐWebページでチェック!', icon: 'assets/icons/icon-192x192.png' } }) );
(1)はサーバー鍵ペア、(2)はプッシュ通知登録時にWebページが取得したエンドポイント、クライアント公開鍵、Auth Secretです。(3)では、web-pushライブラリーの変数webpushに、サーバーの連絡先情報とサーバー鍵ペアを設定します。連絡先情報は「mailto:」+メールアドレス、またはWebページのURLを設定します。
(5)のwebpush.sendNotificationが、プッシュ通知送信の処理です。第1引数は送信に必要な(2)の情報を(4)の通りまとめたオブジェクト、第2引数は通知内容(ペイロード)で、JSON文字列形式で指定します。ここでは通知内容を表すnotificationオブジェクトに、title(タイトル)、body(本文)、icon(アイコン)を指定しています。
リスト4を「node sendnotification.js」コマンドで実行するとプッシュ通知が送信され、Webページが受信したプッシュ通知の内容が図7のように画面右下に表示されます。ここではプッシュ通知送信の処理をコマンドで実行していますが、実際にWebプッシュ通知を本番環境で利用する場合、お知らせのプッシュ通知を送信したいタイミングでリスト4の処理を行うよう、プッシュ通知を送信するサーバーを実装することになります。
![図7 プッシュ通知の表示(p001-push-client)](http://cz-cdn.shoeisha.jp/static/images/article/11278/11278_007.png)
なお、一般にWebプッシュ通知を表示する処理は、開発者がService Workerに実装する必要がありますが、AngularのPWA対応機能では、Webプッシュ通知対応のService Workerが自動的に生成されます。