feat(service-worker): add auth asset handling and caching logic

This commit is contained in:
2025-03-13 20:53:36 +01:00
parent 4f719353af
commit cc4ce23dcd

View File

@ -2,8 +2,11 @@ const CACHE_NAME = 'jleibl-portfolio-v1';
const PRECACHE_ASSETS = [ const PRECACHE_ASSETS = [
'/', '/',
'/index.html', '/index.html'
'/manifest.json', ];
const AUTH_ASSETS = [
'/manifest.json'
]; ];
const STYLE_ASSETS = [ const STYLE_ASSETS = [
@ -17,6 +20,7 @@ const IMAGE_ASSETS = [
const ALL_ASSETS = [ const ALL_ASSETS = [
...PRECACHE_ASSETS, ...PRECACHE_ASSETS,
...AUTH_ASSETS,
...STYLE_ASSETS, ...STYLE_ASSETS,
...IMAGE_ASSETS ...IMAGE_ASSETS
]; ];
@ -50,22 +54,28 @@ self.addEventListener('activate', event => {
}); });
function shouldCache(url) { function shouldCache(url) {
if (url.origin === self.location.origin) { const urlObj = new URL(url);
if (url.pathname.endsWith('.html') ||
url.pathname.endsWith('.css') || if (urlObj.hostname.includes('cloudflareaccess.com')) {
url.pathname.endsWith('.js') || return false;
url.pathname.endsWith('.jpg') || }
url.pathname.endsWith('.jpeg') ||
url.pathname.endsWith('.png') || if (urlObj.origin === self.location.origin) {
url.pathname.endsWith('.svg') || if (urlObj.pathname.endsWith('.html') ||
url.pathname.endsWith('.webp') || urlObj.pathname.endsWith('.css') ||
url.pathname.endsWith('.woff') || urlObj.pathname.endsWith('.js') ||
url.pathname.endsWith('.woff2') || urlObj.pathname.endsWith('.jpg') ||
url.pathname.endsWith('.json')) { urlObj.pathname.endsWith('.jpeg') ||
urlObj.pathname.endsWith('.png') ||
urlObj.pathname.endsWith('.svg') ||
urlObj.pathname.endsWith('.webp') ||
urlObj.pathname.endsWith('.woff') ||
urlObj.pathname.endsWith('.woff2') ||
urlObj.pathname.endsWith('.json')) {
return true; return true;
} }
if (url.pathname === '/') { if (urlObj.pathname === '/') {
return true; return true;
} }
} }
@ -73,8 +83,34 @@ function shouldCache(url) {
return false; return false;
} }
function isAuthProtectedAsset(url) {
const urlPath = new URL(url).pathname;
return AUTH_ASSETS.some(asset => asset === urlPath);
}
self.addEventListener('fetch', event => { self.addEventListener('fetch', event => {
if (event.request.mode === 'navigate' || shouldCache(new URL(event.request.url))) { if (isAuthProtectedAsset(event.request.url)) {
event.respondWith(
fetch(event.request)
.then(response => {
if (response.status === 200) {
const responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(cache => {
cache.put(event.request, responseToCache);
});
}
return response;
})
.catch(error => {
console.log('Fetch failed for auth protected asset:', error);
return caches.match(event.request);
})
);
return;
}
if (event.request.mode === 'navigate' || shouldCache(event.request.url)) {
event.respondWith( event.respondWith(
caches.match(event.request) caches.match(event.request)
.then(response => { .then(response => {
@ -86,6 +122,11 @@ self.addEventListener('fetch', event => {
return fetch(fetchRequest) return fetch(fetchRequest)
.then(response => { .then(response => {
if (response.url.includes('cloudflareaccess.com')) {
console.log('Request redirected to authentication page:', response.url);
return response;
}
if (!response || response.status !== 200 || response.type !== 'basic') { if (!response || response.status !== 200 || response.type !== 'basic') {
return response; return response;
} }