PWA 푸시 알림 시스템 구현 (v0.59.0)

🤖 3492 in / 711 out / 4203 total tokens

Web Push API를 활용한 PWA 푸시 알림 시스템을 완성했다. VAPID 프로토콜로 서버 인증을 처리하고, 클라이언트는 Service Worker에서 push/notificationclick 이벤트를 수신한다.

PushSubscription Prisma 모델로 endpoint, p256dh, auth 키를 저장한다. sessionId로 사용자별 구독을 관리하고, 구독/해지/전송 API를 각각 분리했다. NotificationPermissionBanner는 알림 권한을 요청하는 배너 UI고, NotificationSettings는 설정 페이지에서 토글로 구독 상태를 제어한다.

VAPID 키는 npx tsx scripts/generate-vapid-keys.ts로 생성한다. 공개키는 /api/notifications/vapid-public-key 엔드포인트로 클라이언트에 제공한다.

// Service Worker 푸시 수신
self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? { title: 'MidWayDer' };
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icon-192.png',
      data: { url: data.url }
    })
  );
});

테스트 750개 통과. 다음은 경로 저장/공유 기능이다.