kamaji/nextsnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add offline fallback page to service worker

Browse Source 
Safari intercepts bare 503 responses and shows its native "not connected"
error. Return a styled HTML offline page with status 200 so the SW handles
it instead of Safari.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kamaji
2026-02-07 22:03:31 -06:00
parent 06e90bbe4e
commit 793238b562
1 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/static/sw.js
View File

@@ -1,9 +1,28 @@
// NextSnap Service Worker
// Provides offline-first caching for the app shell
const CACHE_VERSION = 'nextsnap-v19';
const APP_SHELL_CACHE = 'nextsnap-shell-v15';
const RUNTIME_CACHE = 'nextsnap-runtime-v15';
const CACHE_VERSION = 'nextsnap-v20';
const APP_SHELL_CACHE = 'nextsnap-shell-v16';
const RUNTIME_CACHE = 'nextsnap-runtime-v16';
// 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 = [
@@ -128,7 +147,10 @@ self.addEventListener('fetch', (event) => {
{ status: 503, headers: { 'Content-Type': 'application/json' } }
);
}
return new Response('Offline', { status: 503 });
return new Response(OFFLINE_PAGE, {
status: 200,
headers: { 'Content-Type': 'text/html' }
});
});
})
);