Check your internet connection and try again.
+
You're Offline
+
This page requires an internet connection.
Capture and Queue are available offline.
+
`;
// Assets to cache on install
@@ -73,6 +100,16 @@ self.addEventListener('activate', (event) => {
})
);
})
+ .then(() => {
+ // Purge cached online-only pages so they show offline fallback
+ return caches.open(RUNTIME_CACHE).then((cache) => {
+ return Promise.all(
+ ['/browser', '/admin', '/reviewer'].map(path =>
+ cache.delete(new Request(path)).catch(() => {})
+ )
+ );
+ });
+ })
.then(() => {
console.log('[SW] Service worker activated');
return self.clients.claim(); // Take control immediately
@@ -115,12 +152,17 @@ self.addEventListener('fetch', (event) => {
return;
}
+ // Pages that require connectivity - never cache, always show offline page
+ const ONLINE_ONLY = ['/browser', '/admin', '/reviewer'];
+ const isOnlineOnly = ONLINE_ONLY.includes(url.pathname);
+
// Everything else (pages, API) - network-first with cache fallback
event.respondWith(
fetch(request)
.then((response) => {
// Cache successful GET responses for offline fallback
- if (response.status === 200) {
+ // Skip online-only pages - they need live data
+ if (response.status === 200 && !isOnlineOnly) {
const responseClone = response.clone();
caches.open(RUNTIME_CACHE).then((cache) => {
// Don't cache file uploads or large binary responses
@@ -133,6 +175,13 @@ self.addEventListener('fetch', (event) => {
return response;
})
.catch(() => {
+ // Online-only pages go straight to offline fallback
+ if (isOnlineOnly) {
+ return new Response(OFFLINE_PAGE, {
+ status: 200,
+ headers: { 'Content-Type': 'text/html' }
+ });
+ }
// Network failed - try cache
return caches.match(request)
.then((cachedResponse) => {
diff --git a/app/templates/base.html b/app/templates/base.html
index 0cd955d..0224c28 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -25,6 +25,7 @@