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

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”（拒否）アクションをクリックした場合、それぞれ対応するログをコンソールに出力します。
- その他のクリック（通知自体や別のアクション）では、「通知自体がクリックされました」とログします。

フェッチイベント (fetch)

ログの出力:
- ネットワークリクエストが発生するたびに、「リソースフェッチイベント発生」とコンソールにログ出力します。この部分は主にデバッグや開発のために使用され、実際のキャッシュ戦略やリクエストの処理は含まれていません。

インストールイベント (install)

インストールのログ:

サービスワーカーがインストールされる際、「サービスワーカーのインストールが開始されました」とコンソールにログします。

実際のインストールプロセスでは、ここでアセットのキャッシュなどを行うことが一般的です。

アクティベートイベント (activate)

アクティベートのログ:

サービスワーカーがアクティブ化されたとき、「サービスワーカーがアクティブ化しました」とコンソールにログします。

このイベントは、古いキャッシュのクリーンアップなど、アクティベーション時に必要なタスクを行うのに適しています。

まとめ

このコードスニペットは、プッシュ通知の基本的な処理方法と、サービスワーカーが提供するさまざまなイベントに応答する方法を示しています。

プッシュ通知の表示、ユーザーのインタラクションのハンドリング、サービスワーカーのライフサイクル管理など、Webアプリケーションにリッチな機能を追加するための重要な基礎を提供します。