add pwa functionality

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."

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>

src/lib/style/fonts/material-symbols-rounded.scss

@@ -7,6 +7,8 @@
 }
 
 .icon {
+  user-select: none;
+
   direction: ltr;
   display: inline-block;
 

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>

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()],
 })