Add basic PWA support

TODO: draw the rest of the owl

3 files changed, 33 insertions, 2 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">
diff --git a/app/src/routes/+layout.ts b/app/src/routes/+layout.ts
index c8cacf0..189f71e 100644
--- a/app/src/routes/+layout.ts
+++ b/app/src/routes/+layout.ts
@@ -1 +1 @@
-export const prerender = true;
\ No newline at end of file
+export const prerender = true;
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 67c0353..7cd11ed 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -1,8 +1,12 @@
+<svelte:head>
+    <title>Coming Soon(TM)</title> 
+</svelte:head>
+
 <!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
 
 <div class="container h-full mx-auto flex justify-center items-center">
 	<div class="space-y-10 text-center flex flex-col items-center">
-		<h2 class="h2">Welcome to Skeleton.</h2>
+		<h2 class="h2">Welcome to a placeholder.</h2>
 		<!-- Animated Logo -->
 		<figure>
 			<section class="img-bg" />