From 114be9c71fcde0b4d2844f9017b0694209ec866b Mon Sep 17 00:00:00 2001
From: Pascal Syma <p.syma@appfarms.com>
Date: Sun, 7 Sep 2025 03:44:45 +0200
Subject: [PATCH] Handle PWA update correctly

---
 .gitignore                |  1 +
 .prettierignore           |  3 ++-
 src/App.vue               |  3 +++
 src/composables/reload.ts | 37 +++++++++++++++++++++++++++++++++++++
 vite.config.ts            |  1 +
 5 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 src/composables/reload.ts

diff --git a/.gitignore b/.gitignore
index 8ee54e8..1a45874 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+dev-dist
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index 308871d..7983191 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,4 +2,5 @@
 .output
 dist
 node_modules
-prisma/migrations
\ No newline at end of file
+prisma/migrations
+dev-dist
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 4f71541..64eff38 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { usePWAReload } from '@/composables/reload.ts';
 import { VaButton, VaDivider, VaLayout, VaNavbar } from 'vuestic-ui';
+
+usePWAReload();
 </script>
 
 <template>
diff --git a/src/composables/reload.ts b/src/composables/reload.ts
new file mode 100644
index 0000000..57d6a54
--- /dev/null
+++ b/src/composables/reload.ts
@@ -0,0 +1,37 @@
+// @ts-expect-error weird import
+import { useRegisterSW } from 'virtual:pwa-register/vue';
+import { useToast } from 'vuestic-ui';
+
+export function usePWAReload() {
+  const { init } = useToast();
+
+  const { updateServiceWorker } = useRegisterSW({
+    immediate: true,
+    onRegisteredSW: (_: string, r: ServiceWorkerRegistration) => {
+      if (import.meta.env.PROD && r) {
+        setInterval(
+          async () => {
+            await r.update();
+          },
+          5 * 60 * 1000
+        );
+      }
+    },
+    onOfflineReady: () =>
+      init({
+        title: 'Offline Verfügbar',
+        message: 'Diese WebApp ist nun offline verfügbar!',
+        color: 'success',
+        duration: 2000
+      }),
+    onNeedRefresh: () =>
+      init({
+        title: 'Update verfügbar',
+        message: 'Für diese WebApp ist ein Update verfügbar, bitte klicke hier zum Aktualisieren!',
+        color: 'warning',
+        duration: 0,
+        closeable: false,
+        onClick: updateServiceWorker
+      })
+  });
+}
diff --git a/vite.config.ts b/vite.config.ts
index 5a46235..ee3a69d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
       devOptions: {
         enabled: true
       },
+      registerType: 'prompt',
       includeAssets: '**/*',
       workbox: {
         globPatterns: ['**/*.{js,css,html,png,ico,woff,woff2}']