Add a reload prompt instead of an auto-update

Signed-off-by: Matt Strapp <matt@mattstrapp.net>

2 files changed, 45 insertions, 33 deletions

diff --git a/app/src/lib/svelte/ReloadPrompt.svelte b/app/src/lib/svelte/ReloadPrompt.svelte
new file mode 100644
index 0000000..1d5dbf6
--- /dev/null
+++ b/app/src/lib/svelte/ReloadPrompt.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { getToastStore, Toast } from "@skeletonlabs/skeleton";
+	import { useRegisterSW } from "virtual:pwa-register/svelte";
+
+	const toastStore = getToastStore();
+
+	const  {
+		updateServiceWorker,
+	} = useRegisterSW({
+		onRegisteredSW(r) {
+			console.log("SW Registered: ", r)
+		},
+		onNeedRefresh() {
+			toastStore.trigger({
+            message: 'A new version of the application is available.',
+            autohide: false,
+						action: {
+							label: 'Refresh',
+							response: updateServiceWorker
+						}
+          });
+		},
+		onOfflineReady() {
+			toastStore.trigger({
+            background: 'variant-filled-success',
+            message: 'Now ready for offline use!',
+            timeout: 5000
+          });
+		},
+		onRegisterError(err) {
+			console.error("SW Registration Error: ", err)
+		}
+	})
+</script>
\ No newline at end of file
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index c866e8c..087465b 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -3,17 +3,14 @@
   import Icon from '@iconify/svelte';
   import menuIcon from '@iconify/icons-carbon/menu';
   import {
-      AppBar,
-      AppShell,
-      Drawer,
-      Toast,
-      getDrawerStore,
-      getToastStore,
-      initializeStores
+    AppBar,
+    AppShell,
+    Drawer,
+    Toast,
+    getDrawerStore,
+    initializeStores
   } from '@skeletonlabs/skeleton';
-  import { onMount } from 'svelte';
   import { pwaInfo } from 'virtual:pwa-info';
-  import { useRegisterSW } from 'virtual:pwa-register/svelte';
   import '../app.postcss';
 
   // Floating UI for Popups
@@ -24,7 +21,6 @@
   initializeStores();
 
   const drawerStore = getDrawerStore();
-  const toastStore = getToastStore();
 
   function drawerOpen() {
     drawerStore.open({
@@ -32,28 +28,6 @@
     });
   }
 
-  onMount(async () => {
-    if (pwaInfo) {
-      useRegisterSW({
-        immediate: true,
-        onRegistered(r) {
-          console.log(`SW Registered: ${r?.active?.scriptURL}`);
-        },
-        onRegisterError(error: Error) {
-          console.error('SW registration error', error);
-        },
-        onOfflineReady() {
-          toastStore.trigger({
-            background: 'variant-filled-success',
-            hideDismiss: true,
-            message: 'Now ready for offline use!',
-            timeout: 5000
-          });
-        }
-      });
-    }
-  });
-
   $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '';
 </script>
 
@@ -76,7 +50,7 @@
       <svelte:fragment slot="lead">
         <div class="flex items-center">
           <button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
-            <Icon icon={menuIcon} width=25 />
+            <Icon icon={menuIcon} width="25" />
           </button>
           <strong class="text-xl uppercase">Nothing</strong>
         </div>
@@ -89,3 +63,7 @@
   <!-- Page Route Content -->
   <slot />
 </AppShell>
+
+{#await import('$lib/svelte/ReloadPrompt.svelte') then { default: ReloadPrompt }}
+  <ReloadPrompt />
+{/await}