Alex Gleason
119307d13b
Regression-of: 5b8d2d5c
The previous SW eviction commit wiped caches and called clients.claim()
on activate, but that only changes which SW handles future fetches — it
does not re-render a tab that already finished loading the stale bundle.
In practice, returning users had to manually close and reopen the tab
before seeing the new build.
Fix: after clients.claim(), iterate self.clients.matchAll({ type: 'window' })
and call client.navigate(client.url) on each one. Since this SW has no
fetch handler, the navigation falls through to the network and the tab
re-renders against the fresh index.html + hashed bundle.
Caveats:
- Users mid-interaction (typing a post, scrolling) lose their unsaved
state. Acceptable trade — the alternative is they stay on a broken
cached bundle indefinitely.
- Fires exactly once per user (only on the install -> activate transition
for a byte-different /sw.js). No reload loop.
Also corrected the misleading comment on the main.tsx registration: that
registration is forward-looking insurance for future cache busts, not the
mechanism that evicts the old SW. The browser's own SW update check is
what re-fetches /sw.js out-of-band; our in-page JS never runs on a tab
the old precache SW is controlling.
98 lines
3.2 KiB
JavaScript
98 lines
3.2 KiB
JavaScript
/**
|
|
* Agora Service Worker
|
|
*
|
|
* Handles incoming Web Push notifications from the nostr-push server and
|
|
* opens/focuses the app when the user taps a notification.
|
|
*/
|
|
|
|
// --- Push received ---
|
|
|
|
self.addEventListener('push', (event) => {
|
|
if (!event.data) return;
|
|
|
|
let payload;
|
|
try {
|
|
payload = event.data.json();
|
|
} catch {
|
|
payload = { title: 'Agora', body: event.data.text() };
|
|
}
|
|
|
|
const title = payload.title ?? 'Agora';
|
|
const options = {
|
|
body: payload.body ?? '',
|
|
icon: payload.icon ?? '/icon-192.png',
|
|
badge: payload.badge ?? '/icon-192.png',
|
|
data: payload.data ?? {},
|
|
requireInteraction: false,
|
|
tag: payload.data?.subscription_id ?? 'agora-notification',
|
|
renotify: true,
|
|
};
|
|
|
|
event.waitUntil(
|
|
self.registration.showNotification(title, options),
|
|
);
|
|
});
|
|
|
|
// --- Notification click ---
|
|
|
|
self.addEventListener('notificationclick', (event) => {
|
|
event.notification.close();
|
|
|
|
event.waitUntil(
|
|
self.clients
|
|
.matchAll({ type: 'window', includeUncontrolled: true })
|
|
.then((clientList) => {
|
|
// Focus an existing Agora tab if one is open
|
|
for (const client of clientList) {
|
|
if (new URL(client.url).origin === self.location.origin) {
|
|
client.navigate('/notifications');
|
|
return client.focus();
|
|
}
|
|
}
|
|
// Otherwise open a new tab
|
|
return self.clients.openWindow('/notifications');
|
|
}),
|
|
);
|
|
});
|
|
|
|
// --- Activate immediately ---
|
|
//
|
|
// On activate:
|
|
// 1. Wipe every Cache Storage entry. A previous version of Agora deployed
|
|
// a precaching service worker (Workbox-style) that's still serving stale
|
|
// HTML/JS to returning users on this origin. Clearing caches means future
|
|
// requests bypass anything the old SW left behind.
|
|
// 2. Take control of all open clients via clients.claim().
|
|
// 3. Force each controlled tab to navigate to its own URL. clients.claim()
|
|
// only changes which SW handles future fetches — it does not re-render
|
|
// pages that already finished loading. Without the explicit navigate,
|
|
// the user is stuck on the old rendered bundle until they manually
|
|
// close and reopen the tab. Since this SW has no fetch handler, the
|
|
// navigation falls through to the network and gets the new build.
|
|
//
|
|
// This SW has no 'fetch' handler, so it never repopulates a cache — push
|
|
// notifications are the only thing it intercepts.
|
|
|
|
self.addEventListener('install', () => self.skipWaiting());
|
|
self.addEventListener('activate', (event) => {
|
|
event.waitUntil(
|
|
(async () => {
|
|
const keys = await caches.keys();
|
|
await Promise.all(keys.map((key) => caches.delete(key)));
|
|
await self.clients.claim();
|
|
|
|
// Soft-reload every open same-origin tab so it picks up the fresh
|
|
// index.html + hashed bundle from the network. WindowClient.navigate()
|
|
// is same-origin-only by spec, which is exactly what we want.
|
|
const windowClients = await self.clients.matchAll({ type: 'window' });
|
|
await Promise.all(
|
|
windowClients.map((client) =>
|
|
'navigate' in client
|
|
? client.navigate(client.url).catch(() => {})
|
|
: Promise.resolve(),
|
|
),
|
|
);
|
|
})(),
|
|
);
|
|
});
|