chore: add PWA caching and cache updater (#1421)

Co-authored-by: th33xitus <domwil1091+github@gmail.com>

src/App.vue

@@ -34,11 +34,12 @@
                     <router-view></router-view>
                 </v-container>
             </v-main>
-            <the-update-dialog></the-update-dialog>
-            <the-editor></the-editor>
-            <the-timelapse-rendering-snackbar></the-timelapse-rendering-snackbar>
-            <the-fullscreen-upload></the-fullscreen-upload>
-            <the-upload-snackbar></the-upload-snackbar>
+            <the-service-worker />
+            <the-update-dialog />
+            <the-editor />
+            <the-timelapse-rendering-snackbar />
+            <the-fullscreen-upload />
+            <the-upload-snackbar />
             <the-manual-probe-dialog />
             <the-bed-screws-dialog />
             <the-screws-tilt-adjust-dialog />

src/components/TheServiceWorker.vue

@@ -0,0 +1,60 @@
+<template>
+    <v-dialog v-model="showDialog" persistent max-width="400" class="mx-0">
+        <panel
+            :title="$t('App.TheServiceWorker.TitleNeedUpdate')"
+            card-class="service-worker-dialog"
+            :margin-bottom="false">
+            <v-card-text>
+                <p>{{ $t('App.TheServiceWorker.DescriptionNeedUpdate') }}</p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text color="primary" @click="update">{{ $t('App.TheServiceWorker.Update') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TheServiceWorker extends Mixins(BaseMixin) {
+    showDialog = false
+    updateSW: ((reloadPage?: boolean | undefined) => Promise<void>) | null = null
+
+    onOfflineReady() {
+        window.console.info('PWA is offline ready')
+    }
+
+    onNeedRefresh() {
+        window.console.warn('PWA needs to refresh')
+        this.showDialog = true
+    }
+
+    onRegistered() {
+        window.console.debug('PWA is registered')
+    }
+
+    onRegisterError(error: any) {
+        window.console.error('PWA registration error:', error)
+    }
+
+    update() {
+        this.updateSW?.(true)
+        this.showDialog = false
+    }
+
+    async mounted() {
+        const { registerSW } = await import('virtual:pwa-register')
+        this.updateSW = registerSW({
+            immediate: true,
+            onOfflineReady: this.onOfflineReady,
+            onNeedRefresh: this.onNeedRefresh,
+            onRegistered: this.onRegistered,
+            onRegisterError: this.onRegisterError,
+        })
+    }
+}
+</script>

src/locales/de.json

@@ -30,6 +30,11 @@
             "NoEmptyAllowedError": "Feld darf nicht leer sein!"
         },
         "Printers": "Drucker",
+        "TheServiceWorker": {
+            "DescriptionNeedUpdate": "Der lokale Cache ist veraltet und muss aktualisiert werden. Bitte klicke auf den Button unten, um den Cache zu aktualisieren.",
+            "TitleNeedUpdate": "PWA benötigt ein Update",
+            "Update": "aktualisieren"
+        },
         "ThrottledStates": {
             "DescriptionCurrentlyThrottled": "rPi ARM-Kern(e) sind derzeit gedrosselt.",
             "DescriptionFrequencyCapped": "rPi ARM max Frequenz ist derzeit auf 1,2 GHz begrenzt.",

src/locales/en.json

@@ -30,6 +30,11 @@
             "NoEmptyAllowedError": "Input must not be empty!"
         },
         "Printers": "Printers",
+        "TheServiceWorker": {
+            "DescriptionNeedUpdate": "The local cache is outdated and needs to be updated. Please click on the button below to update the cache.",
+            "TitleNeedUpdate": "PWA needs update",
+            "Update": "update"
+        },
         "ThrottledStates": {
             "DescriptionCurrentlyThrottled": "rPi ARM core(s) are currently throttled down.",
             "DescriptionFrequencyCapped": "rPi ARM max frequency is currently limited to 1.2 GHz.",

src/main.ts

@@ -9,12 +9,6 @@ import i18n from '@/plugins/i18n'
 import store from '@/store'
 import router from '@/plugins/router'
 import { WebSocketPlugin } from '@/plugins/webSocketClient'
-import { registerSW } from 'virtual:pwa-register'
-
-// noinspection JSUnusedGlobalSymbols
-registerSW({
-    onOfflineReady() {},
-})
 
 Vue.config.productionTip = false
 

vite.config.ts

@@ -40,9 +40,23 @@ const PWAConfig: Partial<VitePWAOptions> = {
             },
         ],
     },
+    workbox: {
+        globPatterns: ['**/*.{js,css,html,woff,woff2,png,svg}'],
+        navigateFallbackDenylist: [/^\/(access|api|printer|server|websocket)/, /^\/webcam[2-4]?/],
+        runtimeCaching: [
+            {
+                urlPattern: (options) => options.url.pathname.startsWith('/config.json'),
+                handler: 'StaleWhileRevalidate',
+                options: {
+                    cacheName: 'config.json',
+                },
+            },
+        ],
+    },
     /* enable sw on development */
     devOptions: {
         enabled: true,
+        type: 'module',
     },
 }