Files
openchamber/packages/web/src/sw.ts
T
Brian KetelsenandClaude Opus 4.8 72a24c388f fix(pwa): focus existing window on notification click
The service worker's notificationclick handler called
self.clients.openWindow(url) unconditionally, spawning a new window/PWA
instance on every notification click even when one was already open.

Focus an existing window client and navigate it to the (relative)
deep-link, resolved against self.location.origin, falling back to
openWindow only when no window is available.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 23:26:51 -04:00

97 lines
2.6 KiB
TypeScript

/// <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) => {
event.waitUntil((async () => {
const payload = (event.data?.json() ?? null) as PushPayload | null;
if (!payload) {
return;
}
const clients = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
const hasVisibleClient = clients.some((client) => client.visibilityState === 'visible' || client.focused);
if (hasVisibleClient) {
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';
await 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((async () => {
// Prefer focusing an already-open window (e.g. the installed PWA) and
// navigating it to the target, instead of always spawning a new window.
const target = new URL(url, self.location.origin).href;
const windowClients = await self.clients.matchAll({
type: 'window',
includeUncontrolled: true,
});
for (const client of windowClients) {
try {
if ('navigate' in client) {
await client.navigate(target);
}
} catch {
// navigate() can reject for uncontrolled clients; fall back to focus.
}
if ('focus' in client) {
return client.focus();
}
}
if (self.clients.openWindow) {
return self.clients.openWindow(target);
}
})());
});