kamaji
37f417eb5b
The SW was served from /static/sw.js with default scope /static/, so it only intercepted static asset requests. Page navigations to /capture, /queue, /browser were not handled by the SW at all — Safari showed its native offline error. Fix: serve SW from /sw.js route with Service-Worker-Allowed: / header and register with scope: /. Now the SW intercepts all navigations and serves the offline fallback page when the network is unavailable. Also remove auth-protected page routes from precache (they would cache the login redirect). Pages are cached via network-first on visit instead. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
174 lines
6.4 KiB
JavaScript
174 lines
6.4 KiB
JavaScript
// NextSnap Service Worker
|
|
// Provides offline-first caching for the app shell
|
|
|
|
const CACHE_VERSION = 'nextsnap-v22';
|
|
const APP_SHELL_CACHE = 'nextsnap-shell-v18';
|
|
const RUNTIME_CACHE = 'nextsnap-runtime-v18';
|
|
|
|
// Offline fallback page (served when network fails and no cached version exists)
|
|
const OFFLINE_PAGE = `<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Offline - NextSnap</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:-apple-system,system-ui,sans-serif;background:#1a1a2e;color:#e0e0e0;
|
|
display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center}
|
|
h1{font-size:1.5rem;margin-bottom:1rem;color:#fff}
|
|
p{color:#aaa;margin-bottom:1.5rem;line-height:1.5}
|
|
button{background:#4dabf7;color:#fff;border:none;padding:0.75rem 2rem;border-radius:8px;
|
|
font-size:1rem;cursor:pointer;min-height:44px}
|
|
button:active{opacity:0.8}
|
|
</style></head><body>
|
|
<div><h1>You're Offline</h1><p>Check your internet connection and try again.</p>
|
|
<button onclick="location.reload()">Retry</button></div>
|
|
</body></html>`;
|
|
|
|
// Assets to cache on install
|
|
const APP_SHELL_ASSETS = [
|
|
'/static/css/style.css',
|
|
'/static/js/app.js',
|
|
'/static/js/auth.js',
|
|
'/static/js/camera.js',
|
|
'/static/js/storage.js',
|
|
'/static/js/sync.js',
|
|
'/static/js/filebrowser.js',
|
|
'/static/lib/dexie.min.js',
|
|
'/static/manifest.json',
|
|
'/static/icons/icon-192.png',
|
|
'/static/icons/icon-512.png'
|
|
];
|
|
|
|
// Install event - precache app shell
|
|
self.addEventListener('install', (event) => {
|
|
console.log('[SW] Installing service worker...');
|
|
event.waitUntil(
|
|
caches.open(APP_SHELL_CACHE)
|
|
.then((cache) => {
|
|
console.log('[SW] Caching app shell');
|
|
return cache.addAll(APP_SHELL_ASSETS);
|
|
})
|
|
.then(() => {
|
|
console.log('[SW] App shell cached successfully');
|
|
return self.skipWaiting(); // Activate immediately
|
|
})
|
|
.catch((error) => {
|
|
console.error('[SW] Failed to cache app shell:', error);
|
|
})
|
|
);
|
|
});
|
|
|
|
// Activate event - clean up old caches
|
|
self.addEventListener('activate', (event) => {
|
|
console.log('[SW] Activating service worker...');
|
|
event.waitUntil(
|
|
caches.keys()
|
|
.then((cacheNames) => {
|
|
return Promise.all(
|
|
cacheNames.map((cacheName) => {
|
|
if (cacheName !== APP_SHELL_CACHE && cacheName !== RUNTIME_CACHE) {
|
|
console.log('[SW] Deleting old cache:', cacheName);
|
|
return caches.delete(cacheName);
|
|
}
|
|
})
|
|
);
|
|
})
|
|
.then(() => {
|
|
console.log('[SW] Service worker activated');
|
|
return self.clients.claim(); // Take control immediately
|
|
})
|
|
);
|
|
});
|
|
|
|
// Fetch event - route requests to appropriate caching strategy
|
|
self.addEventListener('fetch', (event) => {
|
|
const { request } = event;
|
|
const url = new URL(request.url);
|
|
|
|
// Skip non-GET requests (uploads, form posts, etc.)
|
|
if (request.method !== 'GET') {
|
|
return;
|
|
}
|
|
|
|
// Static assets (/static/) - cache-first (versioned via SW cache bump)
|
|
if (url.pathname.startsWith('/static/')) {
|
|
event.respondWith(
|
|
caches.match(request)
|
|
.then((cachedResponse) => {
|
|
if (cachedResponse) {
|
|
return cachedResponse;
|
|
}
|
|
return fetch(request)
|
|
.then((response) => {
|
|
if (!response || response.status !== 200) {
|
|
return response;
|
|
}
|
|
const responseClone = response.clone();
|
|
caches.open(APP_SHELL_CACHE).then((cache) => {
|
|
cache.put(request, responseClone);
|
|
});
|
|
return response;
|
|
})
|
|
.catch(() => new Response('Offline', { status: 503 }));
|
|
})
|
|
);
|
|
return;
|
|
}
|
|
|
|
// 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) {
|
|
const responseClone = response.clone();
|
|
caches.open(RUNTIME_CACHE).then((cache) => {
|
|
// Don't cache file uploads or large binary responses
|
|
if (!url.pathname.includes('/upload') &&
|
|
!url.pathname.includes('/thumbnail')) {
|
|
cache.put(request, responseClone);
|
|
}
|
|
});
|
|
}
|
|
return response;
|
|
})
|
|
.catch(() => {
|
|
// Network failed - try cache
|
|
return caches.match(request)
|
|
.then((cachedResponse) => {
|
|
if (cachedResponse) {
|
|
return cachedResponse;
|
|
}
|
|
// No cache - return offline response
|
|
if (url.pathname.startsWith('/api/')) {
|
|
return new Response(
|
|
JSON.stringify({ error: 'offline', message: 'You are offline.' }),
|
|
{ status: 503, headers: { 'Content-Type': 'application/json' } }
|
|
);
|
|
}
|
|
return new Response(OFFLINE_PAGE, {
|
|
status: 200,
|
|
headers: { 'Content-Type': 'text/html' }
|
|
});
|
|
});
|
|
})
|
|
);
|
|
});
|
|
|
|
// Listen for messages from clients
|
|
self.addEventListener('message', (event) => {
|
|
if (event.data && event.data.type === 'SKIP_WAITING') {
|
|
self.skipWaiting();
|
|
}
|
|
|
|
if (event.data && event.data.type === 'CLEAR_CACHE') {
|
|
event.waitUntil(
|
|
caches.keys().then((cacheNames) => {
|
|
return Promise.all(
|
|
cacheNames.map((cacheName) => caches.delete(cacheName))
|
|
);
|
|
})
|
|
);
|
|
}
|
|
});
|