Webプッシュ通知機能のカスタマイズ
以下では、Webプッシュ通知機能に関する追加の機能をいくつか紹介します。
追加データの送信
リスト4(5)のプッシュ通知送信処理では、通知内容(ペイロード)にnotificationオブジェクトのみを含めていましたが、それ以外のデータを追加することもできます。リスト5では、WebページのURLをurl要素に含むdataオブジェクトを、(1)でペイロードに追加しています。
webpush.sendNotification( pushSubscription, JSON.stringify({ notification: { title: 'あなただけにお得なお知らせ', body: '年に一度の限定セールがスタート! 今すぐWebページでチェック!', icon: 'assets/icons/icon-192x192.png' }, data: { // ペイロードにデータを追加 ...(1) url:'https://www.codezine.jp' } }) );
notification以外のデータは、図7の通知には反映されませんが、Webページの通知受信イベントで取得できます(詳細は後述)。
通知の受信イベントをWebページで受け取る
AngularのSwPushライブラリーを利用して、ルートコンポーネントのコンストラクターでリスト6の通り実装すると、Webページでプッシュ通知の受信イベントを受け取れます。
this.swpush.messages.subscribe(message => { // notificationの表示 ...(1) if (message['notification']) { alert(message['notification']['title'] + ":" + message['notification']['body']); } // dataの表示 ...(2) if (message['data']) { alert(message['data']['url']); } });
this.swpush.messagesは、プッシュ通知を受信したときにイベントを発生するRxJSのObservableで、受信した通知内容のオブジェクト(message)を取得できます。ここでは(1)で、messageに含まれるnotificationからtitle(タイトル)とbody(本文)を、(2)では、リスト5で設定した追加データdataからurl(URL)を取得して、alertメソッドで順番に表示します。
![図8 Webページで取得したプッシュ通知内容の表示(p001-push-client)](http://cz-cdn.shoeisha.jp/static/images/article/11278/11278_008.png)
まとめ
本記事では、AngularのProgressive Web Apps(PWA)対応機能として提供されるWebプッシュ通知について、仕組みと実装方法を説明しました。AngularのSwPushライブラリーと、Node.jsのweb-pushライブラリーを利用して、Webページにプッシュ通知を送信するサンプルを実装しました。