Add basic PWA support

TODO: draw the rest of the owl

1 files changed, 27 insertions, 0 deletions

diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 3d5c07f..93a41b1 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+	import { registerSW } from 'virtual:pwa-register'
+	import { pwaInfo } from 'virtual:pwa-info'; 
+	import { onMount } from 'svelte'
+
 	import '../app.postcss';
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
 
@@ -6,8 +10,31 @@
 	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
 	import { storePopup } from '@skeletonlabs/skeleton';
 	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
+
+	onMount(async () => {
+    if (pwaInfo) {
+      registerSW({
+        immediate: true,
+        onRegistered(r) {
+          console.log(`SW Registered: ${r}`)
+        },
+        onRegisterError(error) {
+          console.log('SW registration error', error)
+        },
+		onOfflineReady() {
+			console.log('SW Offline Ready')
+		}
+      })
+    }
+  })
+  	
+	$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '' 
 </script>
 
+<svelte:head> 
+ 	{@html webManifestLink} 
+</svelte:head>
+
 <!-- App Shell -->
 <AppShell>
 	<svelte:fragment slot="header">