diff options
| -rw-r--r-- | app/src/lib/svelte/ReloadPrompt.svelte | 34 | ||||
| -rw-r--r-- | app/src/routes/+layout.svelte | 44 |
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} |