feat: add Web Push API support and PWA integration (#189)

* feat: add Web Push API support and PWA integration Add web Push API with subscribe/unsubscribe and visibility endpoints Introduce usePushVisibilityBeacon and useSessionDeepLink hooks Integrate PWA with service worker, registerSW, and VAPID key persistence * feat: add heartbeat visibility beacon for web runtime Add a 10s heartbeat to ping visibility while visible Subscribe to visibilitychange, focus, blur, pageshow, and pagehide events to report state Clear heartbeat interval on unmount to avoid leaks
2026-01-22 01:19:24 +02:00
parent 06c5e821a4
commit 1f23b63c0b
19 changed files with 3527 additions and 42 deletions
@@ -0,0 +1,65 @@
+/// <reference lib="webworker" />
+
+// NOTE: keep the Workbox injection point so vite-plugin-pwa can build.
+// We intentionally do not use Workbox runtime helpers here: iOS Safari can be
+// fragile with more complex SW bundles. For push notifications we only need a
+// minimal SW.
+
+declare const self: ServiceWorkerGlobalScope & {
+  __WB_MANIFEST: Array<string | { url: string; revision?: string }>;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const __precacheManifest = self.__WB_MANIFEST;
+
+type PushPayload = {
+  title?: string;
+  body?: string;
+  tag?: string;
+  data?: {
+    url?: string;
+    sessionId?: string;
+    type?: string;
+  };
+  icon?: string;
+  badge?: string;
+};
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('push', (event) => {
+  const payload = (event.data?.json() ?? null) as PushPayload | null;
+  if (!payload) {
+    return;
+  }
+
+  const title = payload.title || 'OpenChamber';
+  const body = payload.body ?? '';
+  const icon = payload.icon ?? '/apple-touch-icon-180x180.png';
+  const badge = payload.badge ?? '/favicon-32.png';
+
+  event.waitUntil(
+    self.registration.showNotification(title, {
+      body,
+      icon,
+      badge,
+      tag: payload.tag,
+      data: payload.data,
+    })
+  );
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+
+  const data = (event.notification.data ?? null) as { url?: string } | null;
+  const url = data?.url ?? '/';
+
+  event.waitUntil(self.clients.openWindow(url));
+});