upgraded pwa config to be prompt-based (instead of autoUpdate) + located every pwa config into a dedicated PwaReloadPrompt component

Author: fcamblor

mobile/src/App.vue

@@ -2,8 +2,10 @@
   <ion-app>
     <ion-router-outlet />
   </ion-app>
+  <pwa-reload-prompt />
 </template>
 
 <script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
+import PwaReloadPrompt from "@/components/PwaReloadPrompt.vue";
 </script>

mobile/src/components/PwaReloadPrompt.vue

@@ -0,0 +1,57 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import { pwaInfo } from 'virtual:pwa-info'
+import {toastController} from "@ionic/vue";
+import {watch} from "vue";
+import {reload} from "ionicons/icons";
+
+console.log(pwaInfo)
+
+const {
+    offlineReady,
+    needRefresh,
+    updateServiceWorker,
+} = useRegisterSW({
+    immediate: true,
+    onRegisteredSW(swUrl, r) {
+        // eslint-disable-next-line no-console
+        console.log(`Service Worker at: ${swUrl}`)
+
+        r && setInterval(async () => {
+            // eslint-disable-next-line no-console
+            console.debug('Checking for sw update...')
+            await r.update()
+        }, 60000)
+    },
+})
+
+watch([needRefresh], async ([_needRefresh]) => {
+    if(_needRefresh) {
+        const toast = await toastController.create({
+            message: 'New content available, click on reload button to update.',
+            duration: undefined,
+            position: 'top',
+            buttons: [{
+                text: 'Reload',
+                side: 'end',
+                icon: reload,
+                role: 'reload',
+                handler: updateServiceWorker,
+            }],
+            color: 'primary'
+        })
+        await toast.present()
+    }
+})
+
+const close = async () => {
+    offlineReady.value = false
+    needRefresh.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

mobile/src/sw.ts

@@ -1,20 +1,35 @@
-import {registerRoute, Route, setDefaultHandler} from 'workbox-routing';
-import {NetworkOnly, StaleWhileRevalidate} from 'workbox-strategies';
+import {
+    NavigationRoute,
+    registerRoute,
+    Route,
+    setCatchHandler,
+    setDefaultHandler
+} from 'workbox-routing';
+import {NetworkOnly, StaleWhileRevalidate, Strategy, StrategyHandler} from 'workbox-strategies';
 import { ExpirationPlugin } from 'workbox-expiration';
-import {clientsClaim} from "workbox-core";
-import {cleanupOutdatedCaches, precacheAndRoute} from "workbox-precaching";
+import {cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute} from "workbox-precaching";
 
 declare let self: ServiceWorkerGlobalScope & {__WB_DISABLE_DEV_LOGS?: boolean}
 
+self.addEventListener('message', (event) => {
+    if (event.data && event.data.type === 'SKIP_WAITING') {
+        self.skipWaiting()
+    }
+})
+
 
 // TODO: comment this line if you want to debug workbox (very verbose!) logs in the console
 self.__WB_DISABLE_DEV_LOGS = true
 
-cleanupOutdatedCaches()
 const wbManifest = self.__WB_MANIFEST
 precacheAndRoute(wbManifest);
 
-setDefaultHandler(new NetworkOnly())
+cleanupOutdatedCaches()
+
+// To allow working offline
+registerRoute(new NavigationRoute(
+    createHandlerBoundToURL('index.html')
+))
 
 // A new route that matches same-origin image requests and handles
 // them with the cache-first, falling back to network strategy:
@@ -32,7 +47,20 @@ const imageRoute = new Route(({ request, sameOrigin }) => {
 // Register the new route
 registerRoute(imageRoute);
 
-// this is necessary, since the new service worker will keep on skipWaiting state
-// and then, caches will not be cleared since it is not activated
-self.skipWaiting()
-clientsClaim()
+setDefaultHandler(new NetworkOnly())
+setCatchHandler(async (event) => {
+    const headers: Record<string, string> = {};
+    event.request.headers.forEach((v, k) => { headers[k] = v; })
+    console.warn(`CatchHandler called for: ${JSON.stringify({
+        destination: event.request.destination,
+        url: event.request.url,
+        method: event.request.method,
+        mode: event.request.mode,
+        cache: event.request.cache,
+        credentials: event.request.credentials,
+        headers,
+        redirect: event.request.redirect,
+        bodyUsed: event.request.bodyUsed
+    })}`)
+    return Response.error();
+})

mobile/src/vite-env.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="vite/client" />
+/// <reference types="workbox-precaching" />
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vite-plugin-pwa/info" />
+/// <reference types="vite-plugin-pwa/vue" />
 
 interface ImportMetaEnv {
     readonly VITE_FIREBASE_API_KEY: string,

mobile/vite.config.ts

@@ -16,12 +16,14 @@ export default defineConfig(({ command, mode }) => {
           type: 'module'
         },
         strategies: 'injectManifest',
-        injectRegister: 'inline',
-        registerType: 'autoUpdate',
+        injectRegister: null,
+        registerType: 'prompt',
+        includeAssets: ['favicon.png'],
         srcDir: 'src',
         filename: 'sw.ts',
         mode: isDevMode?'development':'production',
         minify: !isDevMode,
+        selfDestroying: false,
         workbox: {
           mode: isDevMode?'development':'production',
           sourcemap: isDevMode,