【PWA】可愛いワンコの画像をプッシュ通知で送るWebアプリを作る｜webPush

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

2024.03.28

こんにちは、ワンコ好きの皆さん！ようこそ「ワンコライフ」へ！私たちのミッションは、あなたの日常にちょっとした笑顔とワクワクをお届けすること。どんなに忙しい日でも、ふとした瞬間に「可愛いワンコ」の画像がスマホにポップアップして、あなたの心をほっこりさせます。

…というプッシュアプリを作ってみます。

フロントエンドの実装
Service Workerの登録
Service Workerの実装 (svc_worker.js)
プッシュ通知購読の実装
サーバ側の実装 (Node.js)
まとめ

フロントエンドの実装

VAPIDキーの生成

import webpush from 'web-push';

// VAPIDキーを生成
const vapidKeys = webpush.generateVAPIDKeys();
console.log(JSON.stringify(vapidKeys));

Service Workerの登録

const registerServiceWorker = async () => {
  if ("serviceWorker" in navigator) {
    try {
      await navigator.serviceWorker.register("./svc_worker.js");
    } catch (err) {
      console.log(`Service Worker registration failed: ${err}`);
    }
  }
};

// ページロード時に実行
window.onload = () => {
  registerServiceWorker();
};

Service Workerの実装 (svc_worker.js)

// PushServiceからpush通知が来ると実行される
self.addEventListener("push", event => {
  if (!self.Notification || self.Notification.permission !== "granted") {
    return;
  }

  if (event.data) {
    const data = JSON.parse(event.data.text());
    event.waitUntil(
      self.registration.showNotification("新しいワンコの画像！", {
        body: "クリックして可愛いワンコを見てね！",
        icon: data.icon, // プッシュ通知に表示するアイコン
        image: data.image // プッシュ通知に表示する画像
      })
    );
  }
});

プッシュ通知購読の実装

const subscribeToPushNotifications = async (publicKey) => {
  if (Notification.permission === "granted" && "serviceWorker" in navigator) {
    const registration = await navigator.serviceWorker.ready;
    const options = {
      userVisibleOnly: true,
      applicationServerKey: urlB64ToUint8Array(publicKey)
    };
    const pushSubscription = await registration.pushManager.subscribe(options);

    fetch("/api/pushSubscription", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(pushSubscription)
    });
  }
};

サーバ側の実装 (Node.js)

プッシュ通知の送信

import webPush from 'web-push';

// VAPID詳細の設定
webPush.setVapidDetails(
  'mailto:example@example.com',
  process.env.VAPID_PUBLIC,
  process.env.VAPID_PRIVATE
);

// プッシュ通知を送信する関数
const sendPushNotification = (pushSubscription, data) => {
  webPush.sendNotification(
    pushSubscription,
    JSON.stringify(data)
  ).catch(error => {
    console.error("プッシュ通知の送信に失敗しました:", error);
  });
};

// pushSubscriptionのデータ例: { endpoint: "...", keys: { p256dh: "...", auth: "..." } }
// dataの例: { title: "新しいワンコの画像！", body: "クリックして可愛いワンコを見てね！", image: "https://example.com/dog.jpg", icon: "https://example.com/icon.png" }

これらのコードスニペットは、プッシュ通知を購読し、「可愛いワンコ」の画像を送るWebアプリの基本的なフロントエンドとサーバ側の実装を示しています。

実際のアプリでは、これらのコードに加えて、ユーザーインターフェース、データベースの操作、エラーハンドリングなどの追加の機能が必要になる場合があります。