Fix service worker returning CSS for page navigation

This commit is contained in:
A R R R Associates
2026-07-10 12:34:50 +05:30
parent 7f76f0c64c
commit 933a1e4a36
+44 -7
View File
@@ -1,4 +1,4 @@
const CACHE_VERSION = 'arrr-erp-pwa-v1'; const CACHE_VERSION = 'arrr-erp-pwa-v2-navigation-fix';
const CORE_ASSETS = [ const CORE_ASSETS = [
'/manifest.webmanifest', '/manifest.webmanifest',
'/static/css/theme_tokens.css', '/static/css/theme_tokens.css',
@@ -8,14 +8,20 @@ const CORE_ASSETS = [
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
event.waitUntil( event.waitUntil(
caches.open(CACHE_VERSION).then((cache) => cache.addAll(CORE_ASSETS)).catch(() => undefined) caches.open(CACHE_VERSION)
.then((cache) => cache.addAll(CORE_ASSETS))
.catch(() => undefined)
); );
self.skipWaiting(); self.skipWaiting();
}); });
self.addEventListener('activate', (event) => { self.addEventListener('activate', (event) => {
event.waitUntil( event.waitUntil(
caches.keys().then((keys) => Promise.all(keys.filter((key) => key !== CACHE_VERSION).map((key) => caches.delete(key)))) caches.keys().then((keys) => Promise.all(
keys
.filter((key) => key !== CACHE_VERSION)
.map((key) => caches.delete(key))
))
); );
self.clients.claim(); self.clients.claim();
}); });
@@ -27,16 +33,47 @@ self.addEventListener('fetch', (event) => {
const url = new URL(request.url); const url = new URL(request.url);
if (url.origin !== self.location.origin) return; if (url.origin !== self.location.origin) return;
// Cache static assets only. Never substitute a CSS response for an HTML page.
if (url.pathname.startsWith('/static/')) { if (url.pathname.startsWith('/static/')) {
event.respondWith( event.respondWith(
caches.match(request).then((cached) => cached || fetch(request).then((response) => { caches.match(request).then((cached) => {
if (cached) return cached;
return fetch(request).then((response) => {
if (response && response.ok) {
const copy = response.clone(); const copy = response.clone();
caches.open(CACHE_VERSION).then((cache) => cache.put(request, copy)).catch(() => undefined); caches.open(CACHE_VERSION)
.then((cache) => cache.put(request, copy))
.catch(() => undefined);
}
return response; return response;
})) });
})
); );
return; return;
} }
event.respondWith(fetch(request).catch(() => caches.match('/static/css/theme_tokens.css'))); // Application pages, login, API calls and downloads remain network-first.
// If the network is unavailable, return a valid HTML response instead of CSS.
event.respondWith(
fetch(request).catch(() => {
if (request.mode === 'navigate') {
return new Response(
'<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Offline | Audit Firm ERP</title></head><body style="font-family:system-ui,sans-serif;padding:2rem;background:#f8fafc;color:#0f172a"><main style="max-width:42rem;margin:auto;background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem"><h1 style="margin-top:0">You are offline</h1><p>The ERP could not reach the server. Check your internet connection and refresh this page.</p></main></body></html>',
{
status: 503,
headers: {
'Content-Type': 'text/html; charset=utf-8',
'Cache-Control': 'no-store'
}
}
);
}
return new Response('', {
status: 503,
headers: { 'Cache-Control': 'no-store' }
});
})
);
}); });