From b9a70b3f4360e30998e620498278dc84796894d4 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 14 Oct 2024 14:00:31 +1100
Subject: [PATCH] make it worse

---
 docker-compose.yml                            |  8 +++
 packages/docs/auto-imports.d.ts               |  4 --
 .../src/components/app/settings/Drawer.vue    |  2 +-
 packages/docs/src/plugins/pwa.ts              |  2 +-
 packages/docs/src/service-worker.js           | 69 +++++--------------
 packages/docs/src/stores/pwa.ts               |  9 ++-
 packages/docs/src/utils/pwa.ts                | 49 ++-----------
 packages/docs/vite.config.mts                 |  2 +-
 8 files changed, 45 insertions(+), 100 deletions(-)
 create mode 100644 docker-compose.yml

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000000..3aa0fd8b8b7
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,8 @@
+services:
+  docs:
+    image: nginx:alpine
+    ports:
+      - ${PORT:-8095}:80
+    volumes:
+      - ./packages/docs/dist:/usr/share/nginx/html
+      - ./packages/docs/build/nginx.conf:/etc/nginx/nginx.conf
diff --git a/packages/docs/auto-imports.d.ts b/packages/docs/auto-imports.d.ts
index 4495d5bdf95..7d4f8db2a07 100644
--- a/packages/docs/auto-imports.d.ts
+++ b/packages/docs/auto-imports.d.ts
@@ -180,7 +180,6 @@ declare module 'vue' {
     readonly copyElementContent: UnwrapRef<typeof import('./src/utils/helpers')['copyElementContent']>
     readonly createAdProps: UnwrapRef<typeof import('./src/composables/ad')['createAdProps']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
-    readonly createCacheKey: UnwrapRef<typeof import('./src/utils/pwa')['createCacheKey']>
     readonly createOne: UnwrapRef<typeof import('@vuetify/one')['createOne']>
     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
@@ -196,7 +195,6 @@ declare module 'vue' {
     readonly generatedRoutes: UnwrapRef<typeof import('./src/utils/routes')['generatedRoutes']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getBranch: UnwrapRef<typeof import('./src/utils/helpers')['getBranch']>
-    readonly getCacheKeyForUrl: UnwrapRef<typeof import('./src/utils/pwa')['getCacheKeyForUrl']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getDistance: UnwrapRef<typeof import('./src/utils/helpers')['getDistance']>
@@ -328,7 +326,6 @@ declare module '@vue/runtime-core' {
     readonly copyElementContent: UnwrapRef<typeof import('./src/utils/helpers')['copyElementContent']>
     readonly createAdProps: UnwrapRef<typeof import('./src/composables/ad')['createAdProps']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
-    readonly createCacheKey: UnwrapRef<typeof import('./src/utils/pwa')['createCacheKey']>
     readonly createOne: UnwrapRef<typeof import('@vuetify/one')['createOne']>
     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
@@ -344,7 +341,6 @@ declare module '@vue/runtime-core' {
     readonly generatedRoutes: UnwrapRef<typeof import('./src/utils/routes')['generatedRoutes']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getBranch: UnwrapRef<typeof import('./src/utils/helpers')['getBranch']>
-    readonly getCacheKeyForUrl: UnwrapRef<typeof import('./src/utils/pwa')['getCacheKeyForUrl']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getDistance: UnwrapRef<typeof import('./src/utils/helpers')['getDistance']>
diff --git a/packages/docs/src/components/app/settings/Drawer.vue b/packages/docs/src/components/app/settings/Drawer.vue
index ff25f371f2c..fa5c2d33c84 100644
--- a/packages/docs/src/components/app/settings/Drawer.vue
+++ b/packages/docs/src/components/app/settings/Drawer.vue
@@ -1,4 +1,4 @@
-g<template>
+<template>
   <v-navigation-drawer
     id="settings-drawer"
     v-model="app.settings"
diff --git a/packages/docs/src/plugins/pwa.ts b/packages/docs/src/plugins/pwa.ts
index e67a221ebaf..3a1ac7e7cb2 100644
--- a/packages/docs/src/plugins/pwa.ts
+++ b/packages/docs/src/plugins/pwa.ts
@@ -8,7 +8,7 @@ export async function installPwa (router: Router) {
 
   router.beforeEach(async (to, from) => {
     if (to.path !== from.path) {
-      if (store.pendingUpdate) {
+      if (store.pendingUpdate && !store.isUpdating) {
         console.log('Reloading page to update service worker')
         window.location.pathname = to.fullPath
       }
diff --git a/packages/docs/src/service-worker.js b/packages/docs/src/service-worker.js
index b185aff73dc..f3ca88664ab 100644
--- a/packages/docs/src/service-worker.js
+++ b/packages/docs/src/service-worker.js
@@ -1,8 +1,4 @@
-import {
-  ensureCacheableResponse,
-  getCacheKeyForUrl,
-  openCache,
-} from '@/utils/pwa'
+import { ensureCacheableResponse, openCache } from '@/utils/pwa'
 
 const MANIFEST = self.__WB_MANIFEST
 
@@ -25,38 +21,31 @@ self.addEventListener('install', () => {
   self.skipWaiting()
 })
 
-let hasModernCache = false
 self.addEventListener('activate', event => {
   console.log('[SW] Activated')
   event.waitUntil((async () => {
-    hasModernCache = await caches.has(`precache-${location.origin}`)
-    if (hasModernCache) {
-      await removeWorkboxCaches()
-      await self.clients.claim()
-    }
+    await removeWorkboxCaches()
+    await self.clients.claim()
   })())
 })
 
 self.addEventListener('fetch', event => {
-  const url = new URL(event.request.url, location.href)
+  console.log(event.request.url)
+  const url = new URL(event.request.url)
 
   if (!['http:', 'https:'].includes(url.protocol)) return
 
   if (event.request.method !== 'GET') return
 
-  if (
-    event.request.mode === 'navigate' &&
-    event.request.destination === 'document' &&
-    url.origin === self.location.origin
-  ) {
-    return event.respondWith(getFallbackDocument())
-  }
-
   if (['https://tag.researchnow.com', 'https://srv.carbonads.net', 'https://pixel.adsafeprotected.com', 'https://cdn4.buysellads.net', 'https://ad.doubleclick.net'].includes(url.origin)) {
     return
   }
 
-  if (getCacheKeyForUrl(url.href)) {
+  if (url.origin === self.location.origin) {
+    if (event.request.mode === 'navigate' &&
+      event.request.destination === 'document') {
+      return event.respondWith(matchPrecache('/_fallback.html'))
+    }
     return event.respondWith(matchPrecache(event.request))
   }
 
@@ -67,20 +56,17 @@ self.addEventListener('fetch', event => {
 
 async function matchPrecache (request) {
   const precache = await openCache('precache')
-  const matched = await precache.match(getCacheKeyForUrl(request.url))
+  const matched = await precache.match(request)
   if (matched) return matched
   const response = fetch(request)
-  const cacheKey = getCacheKeyForUrl(request.url)
-  if (cacheKey) {
-    response.then(response => {
-      response = ensureCacheableResponse(response)
-      if (response.status === 200) {
-        precache.put(cacheKey, response.clone())
-      } else {
-        console.error(`[SW] Failed to fetch missing precached asset ${request.url}`)
-      }
-    })
-  }
+  response.then(response => {
+    response = ensureCacheableResponse(response)
+    if (response.status === 200) {
+      precache.put(response.url, response.clone())
+    } else {
+      console.error(`[SW] Failed to fetch missing precached asset ${request.url}`)
+    }
+  })
   return response
 }
 
@@ -113,23 +99,6 @@ async function networkFirst (request) {
   }
 }
 
-async function getFallbackDocument () {
-  const precache = await openCache('precache')
-
-  const response = await fetch('/_fallback.html')
-    .then(ensureCacheableResponse)
-    .catch(() => {
-      console.warn('[SW] Failed to fetch fallback document')
-    })
-
-  if (response?.status === 200) {
-    await precache.put('/_fallback.html', response.clone())
-    return response
-  }
-
-  return precache.match('/_fallback.html')
-}
-
 function removeWorkboxCaches () {
   return caches.keys().then(keys => {
     keys = keys.filter(key => key.startsWith('workbox-') || key.endsWith(self.registration.scope))
diff --git a/packages/docs/src/stores/pwa.ts b/packages/docs/src/stores/pwa.ts
index f4d46ff6d56..d83f157711b 100644
--- a/packages/docs/src/stores/pwa.ts
+++ b/packages/docs/src/stores/pwa.ts
@@ -41,14 +41,20 @@ export const usePwaStore = defineStore('pwa', () => {
     const prev = registration.active
     prevManifest.value = prev && await messageSW(prev, { type: 'GET_MANIFEST' })
     console.log({ prevManifest: prevManifest.value })
+    if (localStorage.getItem('vuetify:cacheReady') !== 'true') {
+      await updateCache()
+    }
   }
 
   async function removeWorker () {
     const registration = await navigator.serviceWorker.getRegistration()
-    registration?.unregister()
+    if (await registration?.unregister()) {
+      window.location.reload()
+    }
   }
 
   async function updateCache () {
+    localStorage.setItem('vuetify:cacheReady', 'false')
     isUpdating.value = true
     const next = nextManifest.value ?? prevManifest.value
     const prev = nextManifest.value ? prevManifest.value : undefined
@@ -57,6 +63,7 @@ export const usePwaStore = defineStore('pwa', () => {
       progressTotal.value = total
     })
     isUpdating.value = false
+    localStorage.setItem('vuetify:cacheReady', 'true')
   }
 
   return {
diff --git a/packages/docs/src/utils/pwa.ts b/packages/docs/src/utils/pwa.ts
index a505a3b6a4d..30444eeb49e 100644
--- a/packages/docs/src/utils/pwa.ts
+++ b/packages/docs/src/utils/pwa.ts
@@ -3,13 +3,6 @@ import eachLimit from 'async-es/eachLimit'
 type ManifestEntry = { url: string, revision?: string }
 type Manifest = ManifestEntry[]
 
-const urlsToCacheKeys = new Map<string, string>()
-export function getCacheKeyForUrl (url: string) {
-  url = createCacheKey(url).url
-
-  return urlsToCacheKeys.get(url)
-}
-
 export async function openCache (name: string) {
   return caches.open(`${name}-${location.origin}`)
 }
@@ -19,23 +12,21 @@ export async function cacheManifestEntries (
   previousManifest: Manifest,
   progress?: (value: number, total: number) => void
 ) {
-  for (const entry of manifest) {
-    const cacheKey = createCacheKey(entry)
-    urlsToCacheKeys.set(cacheKey.url, cacheKey.cacheKey)
-  }
   const cache = await openCache('precache')
   let count = 0
-  const total = urlsToCacheKeys.size
-  await eachLimit(urlsToCacheKeys, 4, async ([url, cacheKey]: [string, string]) => {
+  const total = manifest.length
+  await eachLimit(manifest, 8, async ({ url, revision }: ManifestEntry) => {
     let response
     try {
-      response = ensureCacheableResponse(await fetch(url))
+      response = ensureCacheableResponse(await fetch(url, {
+        cache: revision ? 'no-cache' : 'default',
+      }))
     } catch (err: any) {
       console.warn(`[SW] Failed to cache ${url}`, err.message)
       return
     }
     if (response.status === 200) {
-      await cache.put(cacheKey, response)
+      await cache.put(url, response)
     } else {
       console.warn(`[SW] Failed to cache ${url}`, response.status, response.statusText)
     }
@@ -44,15 +35,6 @@ export async function cacheManifestEntries (
   console.log('[SW] Precached', total, 'files')
   if (previousManifest) {
     await cleanCache(previousManifest)
-    let count = 0
-    for (const entry of previousManifest) {
-      const cacheKey = createCacheKey(entry)
-      if (!urlsToCacheKeys.has(cacheKey.url)) {
-        count++
-        urlsToCacheKeys.set(cacheKey.url, cacheKey.cacheKey)
-      }
-    }
-    console.log('[SW] Reused', count, 'of', previousManifest.length, 'files')
   }
 }
 
@@ -62,7 +44,7 @@ async function cleanCache (previousManifest: Manifest) {
   const precache = await openCache('precache')
 
   const responses = await Promise.all(
-    previousManifest.map(entry => precache.match(createCacheKey(entry).cacheKey))
+    previousManifest.map(entry => precache.match(entry.url))
   )
 
   // Date of earliest entry in the old manifest
@@ -105,20 +87,3 @@ export function ensureCacheableResponse (response: Response) {
     statusText: cloned.statusText,
   })
 }
-
-export function createCacheKey (entry: string | ManifestEntry) {
-  const { revision = null, url } = typeof entry === 'string'
-    ? { url: entry }
-    : entry
-
-  const cacheKeyUrl = new URL(url, location.origin)
-
-  if (revision) {
-    cacheKeyUrl.searchParams.set('__WB_REVISION__', revision)
-  }
-
-  return {
-    cacheKey: cacheKeyUrl.href,
-    url: new URL(url, location.origin).href,
-  }
-}
diff --git a/packages/docs/vite.config.mts b/packages/docs/vite.config.mts
index ed675227c0d..4a92513a397 100644
--- a/packages/docs/vite.config.mts
+++ b/packages/docs/vite.config.mts
@@ -215,7 +215,7 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
           additionalManifestEntries: [
             { url: '/_fallback.html', revision: Date.now().toString(16) },
           ],
-          dontCacheBustURLsMatching: /^\/assets\//,
+          dontCacheBustURLsMatching: /^\/?assets\//,
           maximumFileSizeToCacheInBytes: 24 * 1024 ** 2,
         },
         manifest: {