Handle PWA update correctly

.gitignore

@@ -28,3 +28,4 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+dev-dist

.prettierignore

@@ -3,3 +3,4 @@
 dist
 node_modules
 prisma/migrations
+dev-dist

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>

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
+      })
+  });
+}

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}']