marcandClaude Opus 5
8ca1ed6e06
A cover is a colour *and* a pattern now, chosen in turn. Offering every combination as its own entry meant fifteen colours times a dozen patterns in a grid nobody could take in — and in practice only the handful someone had thought to write out. Each pattern is previewed over the colour in hand, so what is on screen is the cover as it will be. `cover_pattern` is its own column: they are two decisions, and folding them into one number would mean renumbering every cover the day a pattern is added. For one day the patterns *were* twelve appended entries. Those indices are read back as the colour-and-pattern pair they were drawn as, so nothing chosen then looks different now. And three separate reasons the install button never appeared, none of them in anyone's configuration: - `beforeinstallprompt` fires once, early — usually before React has mounted — and is never fired again. A listener added from inside a component simply missed it. It is caught at the top of index.html now. - A `<link rel="manifest">` is fetched with credentials omitted unless it says otherwise. Behind a reverse proxy that authenticates in front of the app, that one request comes back as the proxy's login page and the browser reads it as an invalid manifest — while the app itself works perfectly, because its own requests carry the cookie. - The service worker cached whatever came back, so a lapsed session could be stored as the application itself. The app would then "work offline" by showing a login screen it could never get past, curable only by clearing the site's data. Only successful, unredirected responses are cached now, and the cache name is bumped to drop anything already stored under the old rules. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
82 lines
2.6 KiB
JavaScript
82 lines
2.6 KiB
JavaScript
/* Bumped to v8 to throw away anything cached under the old rules — including,
|
|
behind an authenticating reverse proxy, a login page that had been stored as
|
|
the application itself. */
|
|
const CACHE_NAME = 'inknote-v8';
|
|
|
|
/**
|
|
* Whether a response is the thing that was asked for, and worth keeping.
|
|
*
|
|
* Behind a proxy that authenticates in front of the app, a request whose session
|
|
* has lapsed comes back as that proxy's login page — sometimes as a redirect,
|
|
* sometimes as a plain 200. Storing either one poisons the cache: the app then
|
|
* "works offline" by showing a login screen it can never get past, and the only
|
|
* cure is clearing the site's data by hand.
|
|
*
|
|
* A redirected response cannot be cached at all — `Cache.put` rejects on one —
|
|
* so this also stops an unhandled rejection on every navigation.
|
|
*/
|
|
const worthCaching = (r) => r && r.ok && !r.redirected && r.type !== 'opaqueredirect';
|
|
|
|
// Install — don't precache, just activate immediately
|
|
self.addEventListener('install', () => {
|
|
self.skipWaiting();
|
|
});
|
|
|
|
// Activate — clean old caches, take control
|
|
self.addEventListener('activate', (e) => {
|
|
e.waitUntil(
|
|
caches.keys().then(keys =>
|
|
Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
|
|
).then(() => self.clients.claim())
|
|
);
|
|
});
|
|
|
|
// Fetch — runtime caching strategy
|
|
self.addEventListener('fetch', (e) => {
|
|
const url = new URL(e.request.url);
|
|
|
|
// Never intercept API or WebSocket
|
|
if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/ws')) return;
|
|
|
|
// Only handle GET requests
|
|
if (e.request.method !== 'GET') return;
|
|
|
|
// Navigation (HTML) — network-first with cache fallback
|
|
if (e.request.mode === 'navigate') {
|
|
e.respondWith(
|
|
fetch(e.request).then(r => {
|
|
if (worthCaching(r)) {
|
|
const clone = r.clone();
|
|
caches.open(CACHE_NAME).then(c => c.put(e.request, clone)).catch(() => {});
|
|
}
|
|
return r;
|
|
}).catch(() => caches.match(e.request).then(r => r || caches.match('/')))
|
|
);
|
|
return;
|
|
}
|
|
|
|
// Static assets — stale-while-revalidate
|
|
e.respondWith(
|
|
caches.open(CACHE_NAME).then(cache =>
|
|
cache.match(e.request).then(cached => {
|
|
const fetchP = fetch(e.request).then(r => {
|
|
if (worthCaching(r)) cache.put(e.request, r.clone()).catch(() => {});
|
|
return r;
|
|
}).catch(() => cached);
|
|
return cached || fetchP;
|
|
})
|
|
)
|
|
);
|
|
});
|
|
|
|
// Background sync trigger
|
|
self.addEventListener('sync', (e) => {
|
|
if (e.tag === 'sync-changes') {
|
|
e.waitUntil(
|
|
self.clients.matchAll().then(clients =>
|
|
clients.forEach(c => c.postMessage({ type: 'FLUSH_QUEUE' }))
|
|
)
|
|
);
|
|
}
|
|
});
|