2 files changed, 32 insertions, 33 deletions
diff --git a/clients/www/src/lib/components/ReloadPrompt.svelte b/clients/www/src/lib/components/ReloadPrompt.svelte
new file mode 100644
index 0000000..e6effbb
--- /dev/null
+++ b/clients/www/src/lib/components/ReloadPrompt.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getToastStore } 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>
diff --git a/clients/www/src/lib/offlineToast.ts b/clients/www/src/lib/offlineToast.ts
deleted file mode 100644
index 3ae943e..0000000
--- a/clients/www/src/lib/offlineToast.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { getToastStore, type ToastSettings } from '@skeletonlabs/skeleton';
-
-const toastStore = getToastStore();
-
-const offline: ToastSettings = {
-	message: 'You are currently offline.',
-	background: 'variant-filled-error',
-	autohide: false
-};
-
-const online: ToastSettings = {
-	message: 'You are back online.',
-	background: 'variant-filled-success',
-	autohide: true,
-	timeout: 3000
-};
-
-/**
- * Make a toast for if the PWA is ever brought offline for whatever reason.
- */
-export default function offlineToast() {
-	window.addEventListener('offline', () => {
-		toastStore.clear();
-		toastStore.trigger(offline);
-	});
-
-	window.addEventListener('online', () => {
-		toastStore.clear();
-		setTimeout(() => {
-			toastStore.trigger(online);
-		}, 300);
-	});
-}