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

public/service-worker.js

@@ -2,8 +2,11 @@ const CACHE_NAME = 'jleibl-portfolio-v1';
 
 const PRECACHE_ASSETS = [
   '/',
-  '/index.html',
-  '/manifest.json',
+  '/index.html'
+];
+
+const AUTH_ASSETS = [
+  '/manifest.json'
 ];
 
 const STYLE_ASSETS = [
@@ -17,6 +20,7 @@ const IMAGE_ASSETS = [
 
 const ALL_ASSETS = [
   ...PRECACHE_ASSETS,
+  ...AUTH_ASSETS,
   ...STYLE_ASSETS,
   ...IMAGE_ASSETS
 ];
@@ -50,22 +54,28 @@ self.addEventListener('activate', event => {
 });
 
 function shouldCache(url) {
-  if (url.origin === self.location.origin) {
-    if (url.pathname.endsWith('.html') ||
-        url.pathname.endsWith('.css') ||
-        url.pathname.endsWith('.js') ||
-        url.pathname.endsWith('.jpg') ||
-        url.pathname.endsWith('.jpeg') ||
-        url.pathname.endsWith('.png') ||
-        url.pathname.endsWith('.svg') ||
-        url.pathname.endsWith('.webp') ||
-        url.pathname.endsWith('.woff') ||
-        url.pathname.endsWith('.woff2') ||
-        url.pathname.endsWith('.json')) {
+  const urlObj = new URL(url);
+  
+  if (urlObj.hostname.includes('cloudflareaccess.com')) {
+    return false;
+  }
+  
+  if (urlObj.origin === self.location.origin) {
+    if (urlObj.pathname.endsWith('.html') ||
+        urlObj.pathname.endsWith('.css') ||
+        urlObj.pathname.endsWith('.js') ||
+        urlObj.pathname.endsWith('.jpg') ||
+        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;
     }
     
-    if (url.pathname === '/') {
+    if (urlObj.pathname === '/') {
       return true;
     }
   }
@@ -73,8 +83,34 @@ function shouldCache(url) {
   return false;
 }
 
+function isAuthProtectedAsset(url) {
+  const urlPath = new URL(url).pathname;
+  return AUTH_ASSETS.some(asset => asset === urlPath);
+}
+
 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(
       caches.match(event.request)
         .then(response => {
@@ -86,6 +122,11 @@ self.addEventListener('fetch', event => {
           
           return fetch(fetchRequest)
             .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') {
                 return response;
               }