works offline

components/MainLayout.vue

@@ -10,6 +10,7 @@ const { theme, site, isDark } = useData()
 
 <template lang="pug">
 .flex.flex-col.noise.items-center.relative.min-h-100svh
+  RegisterSW
   .w-full.backdrop-blur-xl.sticky.top-0.z-100.bg-light-200.bg-opacity-60.dark-bg-dark-300.dark-bg-opacity-60
     .flex.flex.items-center.w-full.max-w-180.mx-auto.gap-4.px-2
       a.p-2.flex.items-center.gap-4(href="/")

components/RegisterSW.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { onBeforeMount, ref } from 'vue'
+
+const offlineReady = ref(false)
+function onOfflineReady() {
+  offlineReady.value = true
+}
+async function close() {
+  offlineReady.value = false
+}
+
+onBeforeMount(async () => {
+  const { registerSW } = await import('virtual:pwa-register')
+  registerSW({
+    immediate: true,
+    onOfflineReady,
+    onRegistered() {
+      console.info('Service Worker registered')
+    },
+    onRegisterError(e) {
+      console.error('Service Worker registration error!', e)
+    },
+  })
+})
+</script>
+
+<template lang="pug">
+template(v-if="offlineReady")
+  .pwa-toast(role="alertdialog", aria-labelledby="pwa-message")
+    #pwa-message.mb-3 App ready to work offline
+    button.pwa-cancel(type="button", @click="close") Close
+</template>
+
+<style>
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 100;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+  background-color: gray;
+}
+
+.pwa-toast #pwa-message {
+  margin-bottom: 8px;
+}
+
+.pwa-toast button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}
+</style>

package.json

@@ -26,6 +26,7 @@
 		"webmidi": "^3.1.8"
 	},
 	"devDependencies": {
+		"workbox-window": "^7.0.0",
 		"@directus/sdk": "^14.0.0",
 		"@unocss/extractor-pug": "^0.58.0",
 		"@vite-pwa/vitepress": "^0.3.1",