From e91af487919a2d3f8d3f96c954ad08c975fb1106 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Fri, 23 Dec 2022 10:45:55 +0000
Subject: [PATCH] feat: allow Fluidd to run fully offline (#986)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 components.d.ts                               |  1 +
 src/App.vue                                   |  2 +
 .../common/RegisterServiceWorker.vue          | 79 +++++++++++++++++++
 src/locales/en.yaml                           |  3 +
 vite.config.ts                                | 21 ++++-
 5 files changed, 103 insertions(+), 3 deletions(-)
 create mode 100644 src/components/common/RegisterServiceWorker.vue

diff --git a/components.d.ts b/components.d.ts
index 38d10ec84d..3abf32c2b3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -43,6 +43,7 @@ declare module 'vue' {
     FlashMessage: typeof import('./src/components/common/FlashMessage.vue')['default']
     KlippyStatusCard: typeof import('./src/components/common/KlippyStatusCard.vue')['default']
     ManualProbeDialog: typeof import('./src/components/common/ManualProbeDialog.vue')['default']
+    RegisterServiceWorker: typeof import('./src/components/common/RegisterServiceWorker.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SocketDisconnected: typeof import('./src/components/common/SocketDisconnected.vue')['default']
diff --git a/src/App.vue b/src/App.vue
index d21ba9a4a4..1823036482 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -63,6 +63,8 @@
               (!authenticated && apiConnected)
           "
         />
+
+        <register-service-worker />
       </v-container>
 
       <socket-disconnected
diff --git a/src/components/common/RegisterServiceWorker.vue b/src/components/common/RegisterServiceWorker.vue
new file mode 100644
index 0000000000..338f123cfb
--- /dev/null
+++ b/src/components/common/RegisterServiceWorker.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <v-snackbar
+      v-model="needRefresh"
+      timeout="-1"
+      multi-line
+      elevation="24"
+      bottom
+      right
+    >
+      <span v-html="$t('app.general.msg.needs_refresh')" />
+      <template #action="{ attrs }">
+        <app-btn
+          v-bind="attrs"
+          @click="updateServiceWorker"
+        >
+          {{ $t('app.general.btn.reload') }}
+        </app-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import consola from 'consola'
+import { EventBus } from '@/eventBus'
+
+@Component({})
+export default class RegisterServiceWorker extends Vue {
+  updateSW: ((reloadPage?: boolean) => Promise<void>) | null = null
+  needRefresh = false
+
+  onOfflineReady () {
+    consola.debug('[PWA] ready for offline work')
+    EventBus.$emit(this.$tc('app.general.msg.offline_ready'), { timeout: 5000 })
+  }
+
+  onNeedRefresh () {
+    consola.debug('[PWA] needs refresh')
+    this.needRefresh = true
+  }
+
+  onRegistered (registration?: ServiceWorkerRegistration) {
+    consola.debug('[PWA] registered', registration)
+  }
+
+  onRegisterError (e: any) {
+    consola.error('[PWA] registration error', e)
+  }
+
+  updateServiceWorker () {
+    this.updateSW && this.updateSW(true)
+  }
+
+  async mounted () {
+    try {
+      const { registerSW } = await import('virtual:pwa-register')
+
+      this.updateSW = registerSW({
+        immediate: true,
+        onOfflineReady: this.onOfflineReady,
+        onNeedRefresh: this.onNeedRefresh,
+        onRegistered: this.onRegistered,
+        onRegisterError: this.onRegisterError
+      })
+    } catch {
+      consola.error('[PWA] disabled')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  :deep(.v-snack__wrapper .v-snack__content) {
+    overflow: hidden;
+    overflow-wrap: break-word;
+  }
+</style>
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 1908bd827e..6151224b37 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -166,6 +166,7 @@ app:
       reboot: Reboot
       recover: Recover
       refresh: Refresh
+      reload: Reload
       remove: Remove
       remove_all: Remove All
       rename: Rename
@@ -308,6 +309,8 @@ app:
         Click <b>Adjusted</b> if a significant adjustment is necessary on the current screw; otherwise, click <b>Accept</b> to continue.
       welcome_back: >-
         Welcome back.<br>Sign in below to stay in touch with your printer.
+      offline_ready: Fluidd is now ready to work offline.
+      needs_refresh: New content available, please click the <b>Reload</b> button to update.
     simple_form:
       error:
         arrayofnums: Only numbers
diff --git a/vite.config.ts b/vite.config.ts
index e9430cc89d..9b00b8168a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,7 +14,6 @@ import version from './vite.config.inject-version'
 export default defineConfig({
   plugins: [
     VitePWA({
-      registerType: 'autoUpdate',
       includeAssets: [
         '**/*.svg',
         '**/*.png',
@@ -23,13 +22,28 @@ export default defineConfig({
       ],
       workbox: {
         globPatterns: [
-          '**/*.{js,css,html,ttf,woff,woff2}'
+          '**/*.{js,css,html,ttf,woff,woff2,wasm}'
         ],
         maximumFileSizeToCacheInBytes: 4 * 1024 ** 2,
         navigateFallbackDenylist: [
           /^\/websocket/,
           /^\/(printer|api|access|machine|server)\//,
           /^\/webcam[2-4]?\//
+        ],
+        runtimeCaching: [
+          {
+            urlPattern: (options) => (options.sameOrigin && options.url.pathname.startsWith('/config.json')),
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'config',
+              matchOptions: {
+                ignoreSearch: true
+              },
+              precacheFallback: {
+                fallbackURL: 'config.json'
+              }
+            }
+          }
         ]
       },
       manifest: {
@@ -64,7 +78,8 @@ export default defineConfig({
         ]
       },
       devOptions: {
-        enabled: true
+        enabled: true,
+        type: 'module'
       }
     }),
     vue(),