【PWA】Webアプリケーションでサービスワーカーを使用してプッシュ通知を扱う

PWA（プログレッシブウェブアプリ）

2024.04.01

Webアプリケーションでサービスワーカーを使用してプッシュ通知を扱います。サービスワーカーは、バックグラウンドでスクリプトを実行し、プッシュ通知、キャッシング、オフラインサポートなどの機能を提供するために使用されます。

このコードは、以下のイベントを処理します。

サービスワーカーのイベント（addEventListener）
プッシュイベント (push)
通知クリックイベント (notificationclick)
フェッチイベント (fetch)
インストールイベント (install)
アクティベートイベント (activate)
まとめ

サービスワーカーのイベント（addEventListener）

下記のようなイベントがあります。

push
notificationclick
fetch
install
activate

self.addEventListener("push", (event) => {
  let data = event.data.text();
  data = JSON.parse(data);
  const options = {
    body: data.message,
    icon: data.iconUrl,
    actions: [
      { action: "confirm", title: "承認" },
      { action: "decline", title: "拒否" },
    ],
    badge: "images/badge.png"
  };
  event.waitUntil(self.registration.showNotification(data.title, options));
});

// プッシュ通知クリックイベントの処理
self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  if (event.action === "confirm") {
    console.log('承認がクリックされました');
  } else if (event.action === "decline") {
    console.log('拒否がクリックされました');
  } else {
    console.log('通知自体がクリックされました');
  }
});

// フェッチイベントの処理
self.addEventListener("fetch", (event) => {
  console.log('リソースフェッチイベント発生');
});

// インストールイベントの処理
self.addEventListener("install", (event) => {
  console.log("サービスワーカーのインストールが開始されました");
});

// アクティベートイベントの処理
self.addEventListener('activate', (event) => {
  console.log("サービスワーカーがアクティブ化しました");
});

プッシュイベント (push)

データの取得と解析:
- サービスワーカーはプッシュイベントを受け取ると、event.data.text()を使用してイベントデータ（JSON形式の文字列）を取得し、JSON.parse(data)でオブジェクトに変換します。
通知オプションの定義:
- body: 通知の本文。data.bodyからdata.messageに変更しています。これにより、送信されるデータ構造におけるメッセージのキー名が変わります。
- icon: 通知に表示されるアイコン。data.iconからdata.iconUrlに変更して、アイコンのURLを指定するキー名を変更しています。
- actions: ユーザーが通知上で取れるアクション（ボタン）。”yes”と”no”から”confirm”（承認）と”decline”（拒否）に変更し、タイトルもそれぞれ”はい”から”承認”、”いいえ”から”拒否”に変更しています。
- badge: 通知のバッジアイコンを指定する新たなオプションを追加しています。これは特にモバイルデバイスで通知が来たときにアプリアイコンの上に小さく表示される画像です。
通知の表示:
- self.registration.showNotificationメソッドを使って、定義したタイトルとオプションで通知を表示します。

通知クリックイベント (notificationclick)

通知のクローズ:
- event.notification.close();で、ユーザーが通知をクリックした際に通知を閉じます。
アクションのハンドリング:
- ユーザーが”confirm”（承認）や”decline”（拒否）アクションをクリックした場合、それぞれ対応するログをコンソールに出力します。
- その他のクリック（通知自体や別のアクション）では、「通知自体がクリックされました」とログします。