Handle PWA update correctly

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