diff --git a/docker/frontend/public/sw.js b/docker/frontend/public/sw.js index 0075c57..be4eb50 100644 --- a/docker/frontend/public/sw.js +++ b/docker/frontend/public/sw.js @@ -37,9 +37,15 @@ const cachedFetch = (request) => return response; }); -// Offline, the studio the app is for; the landing page for a build without /app. -const offlineShell = async () => - (await caches.match('/app')) ?? (await caches.match('/')) ?? Response.error(); +// Offline, the route that was asked for if this browser has ever been on it, then +// the studio the app is for, then the landing page for a build without /app. The +// route first because that is the copy a visit keeps up to date: the other two may +// be shells of a build the deploy has replaced. +const offlineShell = async (request) => + (await caches.match(new Request(new URL(request.url).pathname))) ?? + (await caches.match('/app')) ?? + (await caches.match('/')) ?? + Response.error(); self.addEventListener('install', (event) => { // Best effort, one route at a time: a deploy caught mid-flight must not leave the @@ -73,12 +79,28 @@ self.addEventListener('fetch', (event) => { // `no-store` because a plain fetch is not the network: it may be answered by the // browser's own cache, which is the other place a stale shell hides. if (request.mode === 'navigate') { - event.respondWith(fetch(request, { cache: 'no-store' }).catch(offlineShell)); + event.respondWith( + fetch(request, { cache: 'no-store' }) + .then((response) => { + // The shell kept for offline is the one the server handed over last, not + // the one this worker installed with: a navigation that fails — a deploy + // recreating the container is the ordinary way one does — otherwise + // answers with the build of the first visit, `activate` never runs to + // replace it while this worker's bytes stay the same, and the browser + // runs an old build until a reload happens to land after the server is + // back. Stored under the route the navigation asked for, which is one of + // the three SHELL keys — a navigation request is not a key a cache takes. + if (response.ok) { + const copy = response.clone(); + const key = new Request(new URL(request.url).pathname); + caches.open(VERSION).then((cache) => cache.put(key, copy)).catch(() => {}); + } + return response; + }) + .catch(() => offlineShell(request)) + ); return; } - - // ponytail: a navigation is never written back, the precached entry is what - // answers offline. Add a put() here once a route must survive on its own. if (STATIC.test(url.pathname)) { event.respondWith(caches.match(request).then((hit) => hit ?? cachedFetch(request))); return; diff --git a/docker/frontend/src/Library.tsx b/docker/frontend/src/Library.tsx index 774be3d..875252c 100644 --- a/docker/frontend/src/Library.tsx +++ b/docker/frontend/src/Library.tsx @@ -20,6 +20,7 @@ import { listEditedIds, listFolders, normPath, + onLibraryBlocked, pickFolder, readPhotoFile, readPhotos, @@ -376,6 +377,15 @@ function Catalogue() { // the folders and cannot tell whether the remembered subfolder still exists. const [loaded, setLoaded] = useState(false); + // Whether another tab still holds the library database at the version it was + // opened with — a tab left open across a build. Nothing can be read until it + // goes, and the screen would otherwise sit blank with no reason on it. + const [libraryBlocked, setLibraryBlocked] = useState(false); + useEffect(() => { + onLibraryBlocked(setLibraryBlocked); + return () => onLibraryBlocked(null); + }, []); + // The folder the catalogue is copied into, and whether the browser is still // letting this page write to it — which it stops doing when the tab closes, so // the row below says so rather than letting a write fail quietly. The ref is @@ -1614,6 +1624,12 @@ function Catalogue() { ) : null} + {libraryBlocked ? ( +
+ {t('lib.blocked')} +
+ ) : null} + {/* The folders are on their way in for as long as the catalogue behind them is being read back, and a screen that says there is no folder before it has looked is a screen that says it every visit. */} diff --git a/docker/frontend/src/engine/library.ts b/docker/frontend/src/engine/library.ts index a3a2213..b25ec18 100644 --- a/docker/frontend/src/engine/library.ts +++ b/docker/frontend/src/engine/library.ts @@ -213,9 +213,21 @@ async function migrateLegacyDatabase(db: IDBDatabase): Promise