静的ブログをPWAにして「毎朝の復習通知」を届ける — manifest / Service Worker / Web Push / Vercel Cron 実装記録

{
  "name": "saka2jp's blog — 今日の復習",
  "short_name": "復習",
  "start_url": "/review/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#0c0a12",
  "theme_color": "#0c0a12",
  "lang": "ja",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

<!-- BaseLayout.astro の head -->
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="復習" />
<script is:inline>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('/sw.js');
    });
  }
</script>

const CACHE_NAME = 'saka2blog-review-v1';
const CACHED_PATHS = ['/review/', '/data/review-bank.json', '/manifest.webmanifest'];

self.addEventListener('install', (event) => {
  self.skipWaiting();
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(CACHED_PATHS).catch(() => {})),
  );
});

self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    // 旧バージョンのキャッシュを掃除してから制御権を奪う
    const keys = await caches.keys();
    await Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)));
    await self.clients.claim();
  })());
});

// network-first + キャッシュフォールバック（復習関連パスのみ）
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (event.request.method !== 'GET' || url.origin !== self.location.origin) return;
  if (!CACHED_PATHS.includes(url.pathname)) return;   // ← 対象外は SW が一切触らない

  event.respondWith(
    fetch(event.request)
      .then((res) => {
        if (res.ok) {
          const copy = res.clone();
          caches.open(CACHE_NAME).then((cache) => cache.put(event.request, copy));
        }
        return res;
      })
      .catch(() => caches.match(event.request)),
  );
});

self.addEventListener('push', (event) => {
  let payload = {
    title: '🔁 今日の復習の時間です',
    body: 'クイズが出題を待っています。5分だけ解きましょう。',
    url: '/review/',
  };
  try {
    if (event.data) payload = { ...payload, ...event.data.json() };
  } catch {
    // JSONでないペイロードはデフォルト文言で表示
  }
  event.waitUntil(
    self.registration.showNotification(payload.title, {
      body: payload.body,
      icon: '/icons/icon-192.png',
      badge: '/icons/badge-96.png', // Androidの小アイコン。モノクロ透過PNGでないとChromeロゴになる
      tag: 'daily-review',          // 同じtagの通知は上書き（毎朝1件だけ残る）
      data: { url: payload.url },
    }),
  );
});

// 通知タップ → 復習ページを開く（既に開いていればフォーカス）
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const targetUrl = event.notification.data?.url || '/review/';
  event.waitUntil((async () => {
    const clientList = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
    for (const client of clientList) {
      if (new URL(client.url).pathname === targetUrl && 'focus' in client) return client.focus();
    }
    return self.clients.openWindow(targetUrl);
  })());
});

// src/components/review/push.ts（抜粋）
export async function enablePush(): Promise<PushStatus> {
  if (!isPushSupported()) return 'unsupported';

  const permission = await Notification.requestPermission();
  if (permission !== 'granted') return permission === 'denied' ? 'denied' : 'off';

  // サーバから VAPID 公開鍵を取得（鍵をバンドルに焼き込まない）
  const keyRes = await fetch('/api/push/subscribe');
  if (!keyRes.ok) throw new Error('サーバ側のVAPID鍵が未設定です');
  const { publicKey } = await keyRes.json();

  const reg = await navigator.serviceWorker.ready;
  const subscription =
    (await reg.pushManager.getSubscription()) ??
    (await reg.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(publicKey) as BufferSource,
    }));

  const saveRes = await fetch('/api/push/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ subscription: subscription.toJSON() }),
  });
  if (!saveRes.ok) throw new Error('購読情報の保存に失敗しました');
  return 'on';
}

// api/push/subscribe.ts（抜粋）
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { Redis } from '@upstash/redis';

const SUBS_KEY = 'push:subs'; // Redis hash: field = endpoint, value = subscription JSON

export default async function handler(req: VercelRequest, res: VercelResponse) {
  if (req.method === 'GET') {
    return res.status(200).json({ publicKey: process.env.VAPID_PUBLIC_KEY });
  }
  if (req.method === 'POST') {
    const subscription = req.body?.subscription;
    if (!subscription?.endpoint || !subscription?.keys) {
      return res.status(400).json({ error: 'invalid subscription' });
    }
    await redis.hset(SUBS_KEY, { [subscription.endpoint]: JSON.stringify(subscription) });
    return res.status(200).json({ ok: true });
  }
  if (req.method === 'DELETE') {
    await redis.hdel(SUBS_KEY, req.body?.endpoint);
    return res.status(200).json({ ok: true });
  }
  res.setHeader('Allow', 'GET, POST, DELETE');
  return res.status(405).json({ error: 'method not allowed' });
}

// vercel.json
{
  "crons": [
    { "path": "/api/push/send", "schedule": "0 1 * * *" }
  ]
}

// api/push/send.ts（抜粋）
import webpush from 'web-push';

export default async function handler(req: VercelRequest, res: VercelResponse) {
  // Vercel Cron は Authorization: Bearer <CRON_SECRET> を付けて呼ぶ。外部からの叩かれ防止
  const secret = process.env.CRON_SECRET;
  if (secret && req.headers.authorization !== 'Bearer ' + secret) {
    return res.status(401).json({ error: 'unauthorized' });
  }

  webpush.setVapidDetails(
    process.env.VAPID_SUBJECT ?? 'https://saka2jp.vercel.app',
    process.env.VAPID_PUBLIC_KEY!,
    process.env.VAPID_PRIVATE_KEY!,
  );

  const subs = await redis.hgetall<Record<string, unknown>>(SUBS_KEY);
  const payload = JSON.stringify({
    title: '🔁 今日の復習の時間です',
    body: 'クイズが出題を待っています。5分だけ解きましょう。',
    url: '/review/',
  });

  let sent = 0, pruned = 0;
  await Promise.all(
    Object.entries(subs ?? {}).map(async ([endpoint, value]) => {
      try {
        const subscription = typeof value === 'string' ? JSON.parse(value) : value;
        await webpush.sendNotification(subscription, payload);
        sent++;
      } catch (err: unknown) {
        const status = (err as { statusCode?: number }).statusCode;
        // 404 / 410 は「その購読はもう存在しない」。次回以降送らないよう削除する
        if (status === 404 || status === 410) {
          await redis.hdel(SUBS_KEY, endpoint);
          pruned++;
        }
      }
    }),
  );
  return res.status(200).json({ sent, pruned });
}

export function updateAppBadge(count: number): void {
  try {
    const nav = navigator as Navigator & {
      setAppBadge?: (n: number) => Promise<void>;
      clearAppBadge?: () => Promise<void>;
    };
    if (count > 0) nav.setAppBadge?.(count);
    else nav.clearAppBadge?.();
  } catch {
    // 非対応環境では無視
  }
}

// ReviewSession.tsx 側
useEffect(() => {
  if (stats) updateAppBadge(stats.dueToday);
}, [stats]);