ラーメン画像をプッシュ通知で送りつけあって飯テロするクソWebアプリを作った #JavaScript

作ったもの

https://ramen-sender.vercel.app

どんなアプリ？

プッシュ通知を購読し、プッシュ通知送信ボタンを押すとプッシュ通知を購読している自分も含めたユーザ全員にラーメン画像のプッシュ通知を送りつけることが出来ます。
また、飯テロといえば深夜なので毎日24時にラーメン画像がプッシュ通知で送られてきます。
送られてくるラーメン画像はすべて私が撮ったものです。

なんで作ったの？

iOSのsafariのPWAでもPush通知ができるようになる！
iOS16で実装される！
みたいな情報があったから、iOS16出たしなんか作ってみよう！って思ってたんだけど
実際に使えるようになるのは2023年中(予定)らしい。

はい解散！

ではなく、その代わり？というか前段なのかな、MacOS 13 Venturaのsafari16でプッシュ通知が対応した¹らしい！っていうのを見つけたので試してみた。
ただサンプル作るだけじゃあんまり面白くないので、Webアプリを作った。

この記事の対象読者

Webアプリでのプッシュ通知をどう作るのか知りたい人
プッシュ通知の動くサンプルがほしい人
safariでのプッシュ通知が本当に動くのか気になる人・動かしてみたい人
飯テロされたい・したい人

やらないこと・書かないこと

Firebase使いません
- ネイティブアプリと統合しないなら使う必要なさそうだったので
VAPIDやWeb Push Protocolなどの細かい説明はしません
- とりあえず雰囲気を理解できることを目指して
UIとかの細かい実装については書きません
- 蛇足なので

全体構成

こんな感じ
↓で説明

処理の流れ

まず、プッシュ通知の購読を開始します。購読を開始すると、PushServiceはエンドポイントとトークンを含むPushSubscriptionを返却します。(このエンドポイントにリクエストを送るとブラウザにプッシュ通知が届きます)
PushSubscriptionをサーバに送ります。サーバは送られてきたPushSubscriptionをDBに保存します。
ブラウザからプッシュ送信ボタンを押しプッシュ送信APIを実行すると、プッシュ送信APIはDBに保存されているPushSubscriptionのエンドポイント全てに対して、CMSに保存されたラーメンの画像を添付しプッシュ通知を送信します。
cron-jobで毎日24時にプッシュ送信APIを実行します。これ使ってます

PushServiceとはなんぞや？

構成の中で出てきたPushServiceというものがあるのですが、これは各ブラウザベンダーが提供しているpush用のサーバのことです。自分たちでなにか考えることはありません。
PushSubscriptionに含まれるエンドポイントはこのPushServiceのサーバのエンドポイントです。例えばchromeなら　https://fcm.googleapis.com/fcm/send/xxx 、FireFoxなら https://updates.push.services.mozilla.com/wpush/v1/xxx みたいになってます。
ブラウザごとにプッシュ通知を出してくれるサーバがあると思ってくれればOKです。

フロントの実装（主要な部分）

VAPIDKeyの作成

VAPIDKeyを作ります。公開鍵と秘密鍵ができます。公開鍵はフロントとサーバ両方で使います。秘密鍵はサーバで使います。
web-pushというライブラリを使うと楽です。

import webpush from 'web-push';
console.log(JSON.stringify(webpush.generateVAPIDKeys()));

Service Workerの登録

onloadの処理とかで呼び出します。

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

svc_worker.jsにはpush通知が実行されたときの処理を書きます。
ServiceWorkerのjsはrootにないと失敗するっぽいので注意です。

// 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(
      // push通知を実際に表示するところ
      self.registration.showNotification("Push Notification", {
        body: data.body,
        image: data.image,
        // imageに対応してる環境あんまりないのでiconにも同じの出す(後述)
        icon: data.image,
      })
    );
  }
});

プッシュ通知購読の実装

プッシュ通知を購読する処理を書きます。サーバにPushSubscriptionを送ることでサーバからプッシュ通知を送れるようにします。

  // プッシュ通知の権限をリクエストする
  Notification.requestPermission(async (permission) => {
    if (permission === "granted") {
      if ("serviceWorker" in navigator) {

        const options = {
          userVisibleOnly: true,
          // VAPIDの公開鍵を設定
          applicationServerKey: urlB64ToUint8Array(publicKey),
        };

        // Push通知を購読し、PushServiceからPushSubscriptionを取得する
        const registration = await navigator.serviceWorker.ready;
        const pushSubscription = await registration.pushManager.subscribe(options);

        // PushSubscriptionをサーバに送る
        fetch("/api/pushSubscription", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify(pushSubscription),
        });
      }
    }
  });

プッシュ通知送信ボタンの実装とかは蛇足なので割愛

サーバ側の実装(主要な部分)

プッシュ通知の送信

DBから取得とかCMSから取得とかは蛇足なのでプッシュ通知に関わる部分を抜粋。

  // web-pushというライブラリを使う
  import webPush from "web-push";

  // さっき作った公開鍵と秘密鍵を設定しておく
  webPush.setVapidDetails(
    "mailto:hoge@example.com",
    process.env.VAPID_PUBLIC,
    process.env.VAPID_PRIVATE
  );

  ...

  // ブラウザからもらったpushSubscriptionを設定してsendNotificationすれば通知が送れる
  webPush
    .sendNotification(
      pushSubscription,
      JSON.stringify({
        body: message,
        image: url,
      })
    )
};