aboutsummaryrefslogtreecommitdiffstats
path: root/app
diff options
context:
space:
mode:
authorMatt Strapp <matt@mattstrapp.net>2023-09-29 09:05:42 -0500
committerMatt Strapp <matt@mattstrapp.net>2023-09-29 09:05:42 -0500
commitc8b8dd263e331245356b8b32e6a8396f27b478d1 (patch)
tree6a7cd29f31d584f810a66a8d0c5d4ba612ba03eb /app
parentFix centering of content (diff)
downloadtrinkets-c8b8dd263e331245356b8b32e6a8396f27b478d1.tar
trinkets-c8b8dd263e331245356b8b32e6a8396f27b478d1.tar.gz
trinkets-c8b8dd263e331245356b8b32e6a8396f27b478d1.tar.bz2
trinkets-c8b8dd263e331245356b8b32e6a8396f27b478d1.tar.lz
trinkets-c8b8dd263e331245356b8b32e6a8396f27b478d1.tar.xz
trinkets-c8b8dd263e331245356b8b32e6a8396f27b478d1.tar.zst
trinkets-c8b8dd263e331245356b8b32e6a8396f27b478d1.zip
Add a reload prompt instead of an auto-update
Signed-off-by: Matt Strapp <matt@mattstrapp.net>
Diffstat (limited to 'app')
-rw-r--r--app/src/lib/svelte/ReloadPrompt.svelte34
-rw-r--r--app/src/routes/+layout.svelte44
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}