From 3209f8b4e0ffc12434ae9a3ad5e52e84cf60121b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Wed, 5 Jul 2023 21:27:41 +0200
Subject: [PATCH] add pwa functionality

---
 src/lib/components/Navigation.svelte          |  3 ++
 src/lib/components/PwaStatus.svelte           | 36 +++++++++++++++++++
 .../style/fonts/material-symbols-rounded.scss |  2 ++
 src/routes/+layout.svelte                     | 22 ++++++++++++
 vite.config.js                                |  3 +-
 5 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/PwaStatus.svelte

diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index fa735681..2601002c 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -17,6 +17,9 @@
   </div>
 
   <div class="actions">
+    {#await import("$lib/components/PwaStatus.svelte") then { default: PwaStatus }}
+      <PwaStatus />
+    {/await}
     {#if browser && !("serial" in navigator)}
       <abbr
         title="Your browser does not support serial connections. Try using Chrome instead."
diff --git a/src/lib/components/PwaStatus.svelte b/src/lib/components/PwaStatus.svelte
new file mode 100644
index 00000000..82f8446d
--- /dev/null
+++ b/src/lib/components/PwaStatus.svelte
@@ -0,0 +1,36 @@
+<script>
+  import {useRegisterSW} from "virtual:pwa-register/svelte"
+
+  const {needRefresh, updateServiceWorker, offlineReady} = useRegisterSW()
+</script>
+
+{#if !$needRefresh}
+  <button title="Update ready" class="icon" on:click={() => updateServiceWorker(true)}>update</button>
+{:else if $offlineReady}
+  <div title="App can now be used offline" class="icon">offline_pin</div>
+{:else}
+  <div title="Waiting to be offline ready..." class="icon working">offline_bolt</div>
+{/if}
+
+<style lang="scss">
+  button {
+    cursor: pointer;
+    color: var(--md-sys-color-on-background);
+    background: transparent;
+    border: none;
+  }
+
+  @keyframes working {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .working {
+    animation: working 1s ease alternate-reverse infinite;
+  }
+</style>
diff --git a/src/lib/style/fonts/material-symbols-rounded.scss b/src/lib/style/fonts/material-symbols-rounded.scss
index 9875484f..2b902e0c 100644
--- a/src/lib/style/fonts/material-symbols-rounded.scss
+++ b/src/lib/style/fonts/material-symbols-rounded.scss
@@ -7,6 +7,8 @@
 }
 
 .icon {
+  user-select: none;
+
   direction: ltr;
   display: inline-block;
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1d2bfb61..dff7dd07 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
   import Navigation from "$lib/components/Navigation.svelte"
   import {hasSerialPermission} from "$lib/serial/device.js"
   import {initSerial} from "$lib/serial/connection.js"
+  import {pwaInfo} from "virtual:pwa-info"
 
   onMount(async () => {
     const theme = themeFromSourceColor(argbFromHex("#6D81C7"), [
@@ -14,10 +15,31 @@
     const dark = true // window.matchMedia("(prefers-color-scheme: dark)").matches
     applyTheme(theme, {target: document.body, dark})
 
+    if (pwaInfo) {
+      /** @type {import('vite-plugin-pwa/types').RegisterSWOptions} */
+      const swOptions = {
+        immediate: true,
+        onRegisteredSW(url, registration) {
+          console.log("Service Worker Registered", url, registration)
+        },
+        onRegisterError(error) {
+          console.log("ServiceWorker Registration Error", error)
+        },
+      }
+      const {registerSW} = await import("virtual:pwa-register")
+      registerSW(swOptions)
+    }
+
     if (await hasSerialPermission()) await initSerial()
   })
+
+  $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : ""
 </script>
 
+<svelte:head>
+  {@html webManifestLink}
+</svelte:head>
+
 <Navigation />
 
 <main>
diff --git a/vite.config.js b/vite.config.js
index ee08226a..63f92879 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,7 @@
 import {sveltekit} from "@sveltejs/kit/vite"
 import {defineConfig} from "vite"
+import {SvelteKitPWA} from "@vite-pwa/sveltekit"
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [sveltekit(), SvelteKitPWA()],
 })