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;