AngularのPWA（Progressive Web Apps）機能でWebプッシュ通知を実装

次世代Webアプリケーションフレームワーク「Angular」の活用 第17回

Webプッシュ通知機能のカスタマイズ

　以下では、Webプッシュ通知機能に関する追加の機能をいくつか紹介します。

追加データの送信

　リスト4（5）のプッシュ通知送信処理では、通知内容（ペイロード）にnotificationオブジェクトのみを含めていましたが、それ以外のデータを追加することもできます。リスト5では、WebページのURLをurl要素に含むdataオブジェクトを、（1）でペイロードに追加しています。

［リスト5］ペイロードにデータを追加する例（p002-push-server/sendnotification2.js）

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ページでプッシュ通知の受信イベントを受け取れます。

［リスト6］プッシュ通知受信時の処理（p001-push-client/src/app/app.component.ts）

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）

まとめ

　本記事では、AngularのProgressive Web Apps（PWA）対応機能として提供されるWebプッシュ通知について、仕組みと実装方法を説明しました。AngularのSwPushライブラリーと、Node.jsのweb-pushライブラリーを利用して、Webページにプッシュ通知を送信するサンプルを実装しました。

参考資料

• Angular
• Angular CLI