Update SW (#1)

* Tweaks * Update Service Worker
cssnr · Oct 6, 2024 · 5a336f4 · 5a336f4
1 parent 4f9f864
commit 5a336f4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 24 deletions.
diff --git a/app/static/js/forms.js b/app/static/js/forms.js
@@ -1,12 +1,12 @@
 // Form Submit Handler
 
-document.querySelectorAll('input.form-control').forEach((el) => {
+document.querySelectorAll('.form-control').forEach((el) => {
     el.addEventListener('focus', () => {
         el.classList.remove('is-invalid')
     })
 })
 
-document.querySelector('form.submit').addEventListener('submit', formSubmit)
+document.querySelector('form.submit')?.addEventListener('submit', formSubmit)
 
 async function formSubmit(event) {
     event.preventDefault()
@@ -41,17 +41,18 @@ async function formSubmit(event) {
             event.target.classList.add('d-none')
             document
                 .querySelector(event.target.dataset.success)
-                .classList.remove('d-none')
+                ?.classList.remove('d-none')
         } else if (json.error) {
             console.debug('Error Message')
             showToast(json.error, 'danger')
         } else {
             console.debug('Loop Errors')
             for (const [key, value] of Object.entries(json)) {
                 console.debug(`${key}: ${value}`)
-                const input = event.target.querySelector(`input[name="${key}"]`)
-                input.classList.add('is-invalid')
-                input.nextElementSibling.textContent = value.toString()
+                const el = event.target.querySelector(`[name="${key}"]`)
+                console.debug('el:', el)
+                el.classList.add('is-invalid')
+                el.nextElementSibling.textContent = value.toString()
             }
         }
     } catch (error) {

diff --git a/app/static/js/sw.js b/app/static/js/sw.js
@@ -2,7 +2,7 @@
 
 const cacheName = 'v1'
 
-const resources = [
+const cacheResources = [
     '/',
     '/news/',
     '/message/',
@@ -34,13 +34,20 @@ const resources = [
     '/static/dist/js-cookie/js.cookie.min.js',
 ]
 
-const excludes = ['/admin', '/flower', '/phpmyadmin', '/redis', '/ws']
+const cacheExcludes = [
+    '/admin',
+    '/flower',
+    '/oauth',
+    '/phpmyadmin',
+    '/redis',
+    '/ws',
+]
 
-const addResourcesToCache = async (resources) => {
-    console.debug('%c addResourcesToCache:', 'color: Cyan', resources)
+const addResourcesToCache = async (cacheResources) => {
+    console.debug('%c addResourcesToCache:', 'color: Cyan', cacheResources)
     try {
         const cache = await caches.open(cacheName)
-        await cache.addAll(resources)
+        await cache.addAll(cacheResources)
     } catch (e) {
         console.error(`cache.addAll error: ${e.message}`, e)
     }
@@ -73,7 +80,7 @@ const cleanupCache = async (event) => {
 }
 
 const cacheFirst = async (event) => {
-    // console.debug('%ccacheFirst:', 'color: Aqua', event.request.url)
+    console.debug('%c cacheFirst:', 'color: Aqua', event.request.url)
 
     const responseFromCache = await caches.match(event.request)
     if (responseFromCache?.ok) {
@@ -90,33 +97,39 @@ const cacheFirst = async (event) => {
         console.debug(`fetch error: ${e.message}`, 'color: OrangeRed')
     }
 
-    console.debug('%cNo Cache or Network:', 'color: Red', event.request.url)
-    return new Response('No Cache or Network Available', {
-        status: 408,
-        headers: { 'Content-Type': 'text/plain' },
-    })
+    return return408(event)
 }
 
 const networkFirst = async (event) => {
-    // console.debug('%cnetworkFirst:', 'color: Coral', event.request.url)
+    console.debug('%c networkFirst:', 'color: Orange', event.request.url)
 
     try {
         const responseFromNetwork = await fetch(event.request)
+        // console.debug('responseFromNetwork:', responseFromNetwork)
+        if (responseFromNetwork.type === 'opaqueredirect') {
+            console.debug('%c opaqueredirect:', 'color: Yellow', event.request)
+            return responseFromNetwork
+        }
         if (responseFromNetwork?.ok) {
-            // await putInCache(event.request, responseFromNetwork.clone())
-            putInCache(event.request, responseFromNetwork.clone()).then()
+            // noinspection ES6MissingAwait
+            putInCache(event.request, responseFromNetwork.clone())
             return responseFromNetwork
         }
     } catch (e) {
         console.debug(`fetch error: ${e.message}`, 'color: OrangeRed')
     }
 
     const responseFromCache = await caches.match(event.request)
+    // console.debug('responseFromCache:', responseFromCache)
     if (responseFromCache?.ok) {
         return responseFromCache
     }
 
-    console.debug('%cNo Network or Cache:', 'color: Red', event.request.url)
+    return return408(event)
+}
+
+function return408(event) {
+    console.debug('%c 408: No Network/Cache:', 'color: Red', event.request.url)
     return new Response('No Network or Cache Available', {
         status: 408,
         headers: { 'Content-Type': 'text/plain' },
@@ -127,12 +140,13 @@ async function fetchResponse(event) {
     // console.debug('fetchResponse:', event.request)
     const url = new URL(event.request.url)
     // console.debug('url:', url)
+    // console.debug('url.pathname:', url.pathname)
     if (
         event.request.method !== 'GET' ||
         self.location.origin !== url.origin ||
-        excludes.some((e) => url.pathname.startsWith(e))
+        cacheExcludes.some((e) => url.pathname.startsWith(e))
     ) {
-        console.debug('%cExcluded Request:', 'color: Yellow', event.request.url)
+        console.debug('%c Excluded:', 'color: Yellow', event.request.url)
         return
     }
     if (url.pathname.startsWith('/static/')) {
@@ -145,8 +159,9 @@ self.addEventListener('fetch', fetchResponse)
 
 self.addEventListener('install', (event) => {
     console.debug('%c install:', 'color: Cyan', event)
+    event.waitUntil(addResourcesToCache(cacheResources))
+    // noinspection JSIgnoredPromiseFromCall
     self.skipWaiting()
-    event.waitUntil(addResourcesToCache(resources))
 })
 
 self.addEventListener('activate', (event) => {