docs: activate service worker immediately, serve network first

Author: KaelWD

package.json

@@ -23,7 +23,6 @@
     "version": "node scripts/confirm-npm-tag.js",
     "prepare": "node scripts/post-install.js",
     "postversion": "node scripts/post-release-merge.js",
-    "postinstall": "patch-package",
     "clean": "lerna clean",
     "changelog": "conventional-changelog -u -p vuetify",
     "all-checks": "yarn lint && lerna run test && lerna run cy:run && yarn build"

packages/docs/src/App.vue

@@ -1,5 +1,4 @@
 <template>
-  <v-progress-linear v-if="pwa.loading" indeterminate color="primary" height="3" class="pwa-loader" />
   <router-view />
 </template>
 
@@ -14,7 +13,6 @@
   // Stores
   import { useAuthStore } from '@/store/auth'
   import { useUserStore } from '@/store/user'
-  import { usePwaStore } from '@/store/pwa'
 
   // Utilities
   import { computed, nextTick, onBeforeMount, ref, watch, watchEffect } from 'vue'
@@ -25,7 +23,6 @@
   import { IN_BROWSER } from '@/util/globals'
 
   const user = useUserStore()
-  const pwa = usePwaStore()
   const router = useRouter()
   const route = useRoute()
   const theme = useTheme()

packages/docs/src/components/app/PwaSnackbar.vue

@@ -18,8 +18,6 @@
 
     <api-option />
 
-    <pwa-option />
-
     <slash-search-option />
 
     <sync-option />
@@ -30,7 +28,6 @@
   // Components
   import ApiOption from '@/components/app/settings/options/ApiOption.vue'
   import CodeOption from '@/components/app/settings/options/CodeOption.vue'
-  import PwaOption from '@/components/app/settings/options/PwaOption.vue'
   import SettingsHeader from '@/components/app/settings/SettingsHeader.vue'
   import SlashSearchOption from '@/components/app/settings/options/SlashSearchOption.vue'
   import SyncOption from '@/components/app/settings/options/SyncOption.vue'

packages/docs/src/components/app/settings/Options.vue

@@ -232,12 +232,6 @@
   "progress": "Progress",
   "providers": "Providers",
   "published": "Published: {date}",
-  "pwa": {
-    "install": "Install Vuetify Documentation",
-    "new-content-available": "New content is available. Click **Refresh** to update.",
-    "refresh": "Refresh",
-    "ignore": "Don't ask again"
-  },
   "range": "Range",
   "read": "View Read ({number})",
   "ready-text": "Continue your learning with related content selected by the {team} or move between pages by using the navigation links below.",

packages/docs/src/components/app/settings/options/PwaOption.vue

@@ -29,24 +29,13 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted } from 'vue'
   import { useRoute } from 'vue-router'
   import { rpath } from '@/util/routes'
-  import { usePwaStore } from '@/store/pwa'
   import { useHead } from '@vueuse/head'
   import DefaultLayout from '@/layouts/default.vue'
 
   const route = useRoute()
-  const pwa = usePwaStore()
   useHead({
     title: 'Page not found',
   })
-
-  onMounted(async () => {
-    const sw = await navigator.serviceWorker?.getRegistration()
-    await sw?.update()
-    if (sw?.waiting) {
-      pwa.update()
-    }
-  })
 </script>

packages/docs/src/i18n/messages/en.json

@@ -12,8 +12,6 @@
 
     <app-back-to-top />
 
-    <app-pwa-snackbar />
-
     <v-main>
       <slot>
         <v-container
@@ -45,7 +43,6 @@
   import AppDrawer from '@/components/app/drawer/Drawer.vue'
   import AppSettingsDrawer from '@/components/app/settings/Drawer.vue'
   import AppToc from '@/components/app/Toc.vue'
-  import AppPwaSnackbar from '@/components/app/PwaSnackbar.vue'
 
   // Composables
   import { useRoute } from 'vue-router'

packages/docs/src/layouts/404.vue

@@ -8,8 +8,6 @@
 
     <app-drawer />
 
-    <app-pwa-snackbar />
-
     <v-main>
       <slot>
         <v-container
@@ -52,7 +50,6 @@
   import AppBar from '@/components/app/bar/Bar.vue'
   import AppDrawer from '@/components/app/drawer/Drawer.vue'
   import AppSettingsDrawer from '@/components/app/settings/Drawer.vue'
-  import AppPwaSnackbar from '@/components/app/PwaSnackbar.vue'
   import UserProfile from '@/components/user/UserProfile.vue'
   import UserTabs from '@/components/user/UserTabs.vue'
 

packages/docs/src/layouts/default.vue

@@ -131,8 +131,18 @@ router.afterEach((to, from) => {
     setTimeout(() => window.location.reload(), 100)
   }
 })
-router.onError(err => {
-  console.error(err)
+router.onError((err, to) => {
+  if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
+    if (!localStorage.getItem('vuetify:dynamic-reload')) {
+      console.log('Reloading page to fix dynamic import error')
+      localStorage.setItem('vuetify:dynamic-reload', 'true')
+      location.assign(to.fullPath)
+    } else {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    }
+  } else {
+    console.error(err)
+  }
 })
 
 installGlobalComponents(app)
@@ -144,5 +154,6 @@ installPinia(app, router)
 installVuetify(app)
 
 router.isReady().then(() => {
+  localStorage.removeItem('vuetify:dynamic-reload')
   app.mount('#app')
 })

packages/docs/src/layouts/user.vue

@@ -1,64 +1,26 @@
-// Stores
-import { usePwaStore } from '@/store/pwa'
-import { useUserStore } from '@/store/user'
-
 // Types
 import type { Router } from 'vue-router'
 
 export async function installPwa (router: Router) {
-  const { registerSW } = await import('virtual:pwa-register')
-
   await router.isReady()
 
-  const pwa = usePwaStore()
-  const user = useUserStore()
-  pwa.updateSW = registerSW({
-    async onNeedRefresh () {
-      const registration = await navigator.serviceWorker?.getRegistration()
-      if (registration?.active && registration?.waiting) {
-        const manifest = await messageSW(registration.active, { type: 'GET_MANIFEST' })
-        await messageSW(registration.waiting, { type: 'SET_MANIFEST', manifest })
-      }
+  let pendingUpdate = false
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.addEventListener('controllerchange', async () => {
+      pendingUpdate = true
+    })
+  }
 
-      if (user.pwaRefresh) pwa.snackbar = true
-    },
-  })
-
-  let registration: ServiceWorkerRegistration | undefined
   router.beforeEach(async (to, from) => {
     if (to.path !== from.path) {
+      if (pendingUpdate) {
+        console.log('Reloading page to update service worker')
+        window.location.pathname = to.fullPath
+      }
+
       navigator.serviceWorker?.getRegistration().then(reg => {
-        registration = reg
         reg?.update()
       })
-
-      if (!user.pwaRefresh && registration?.active && registration?.waiting) {
-        pwa.loading = true
-        const promise = new Promise<void>(resolve => {
-          registration!.waiting?.addEventListener('statechange', e => {
-            const sw = e.target as ServiceWorker
-            console.log('SW state change:', sw.state)
-            if (sw.state === 'activated') {
-              window.location.pathname = to.fullPath
-              resolve()
-            } else if (sw.state === 'redundant') {
-              resolve()
-            }
-          })
-        })
-        await messageSW(registration.waiting, { type: 'SKIP_WAITING' })
-        await promise
-      }
-    }
-  })
-}
-
-function messageSW (sw: ServiceWorker, data: {}): Promise<any> {
-  return new Promise(resolve => {
-    const messageChannel = new MessageChannel()
-    messageChannel.port1.onmessage = (event: MessageEvent) => {
-      resolve(event.data)
     }
-    sw.postMessage(data, [messageChannel.port2])
   })
 }