Fix service worker returning CSS for page navigation
This commit is contained in:
+46
-9
@@ -1,4 +1,4 @@
|
||||
const CACHE_VERSION = 'arrr-erp-pwa-v1';
|
||||
const CACHE_VERSION = 'arrr-erp-pwa-v2-navigation-fix';
|
||||
const CORE_ASSETS = [
|
||||
'/manifest.webmanifest',
|
||||
'/static/css/theme_tokens.css',
|
||||
@@ -8,14 +8,20 @@ const CORE_ASSETS = [
|
||||
|
||||
self.addEventListener('install', (event) => {
|
||||
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.addEventListener('activate', (event) => {
|
||||
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();
|
||||
});
|
||||
@@ -27,16 +33,47 @@ self.addEventListener('fetch', (event) => {
|
||||
const url = new URL(request.url);
|
||||
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/')) {
|
||||
event.respondWith(
|
||||
caches.match(request).then((cached) => cached || fetch(request).then((response) => {
|
||||
const copy = response.clone();
|
||||
caches.open(CACHE_VERSION).then((cache) => cache.put(request, copy)).catch(() => undefined);
|
||||
return response;
|
||||
}))
|
||||
caches.match(request).then((cached) => {
|
||||
if (cached) return cached;
|
||||
|
||||
return fetch(request).then((response) => {
|
||||
if (response && response.ok) {
|
||||
const copy = response.clone();
|
||||
caches.open(CACHE_VERSION)
|
||||
.then((cache) => cache.put(request, copy))
|
||||
.catch(() => undefined);
|
||||
}
|
||||
return response;
|
||||
});
|
||||
})
|
||||
);
|
||||
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' }
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user