feat(pwa): add update component

components/layout/PwaUpdater.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+  import { CloudArrowDownIcon } from '@heroicons/vue/24/solid'
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      v-if="$pwa?.needRefresh"
+      class="container mx-auto mb-4 max-w-3xl border-x border-b border-base-0/20 bg-transparent p-4"
+      role="alert"
+    >
+      <div class="flex items-center">
+        <CloudArrowDownIcon
+          aria-hidden="true"
+          class="me-2 h-6 w-6 flex-shrink-0"
+        />
+        <span class="sr-only">Info</span>
+
+        <h3 class="text-lg font-medium text-base-content-highlight">There is a new update</h3>
+      </div>
+
+      <div class="mb-4 mt-2 text-sm">Refresh or click the button below to apply the update</div>
+
+      <div class="flex">
+        <button
+          class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util w-full items-center rounded-md border border-base-0/20 px-3 py-2 text-center text-center text-sm font-medium text-base-content-highlight"
+          type="button"
+          @click="$pwa.updateServiceWorker()"
+        >
+          Refresh
+        </button>
+      </div>
+    </div>
+  </ClientOnly>
+</template>
+
+<style>
+  .pwa-toast {
+    @apply fixed bottom-0 right-0 z-50 m-4 rounded-md border border-base-0/20 p-3 text-left;
+  }
+
+  .pwa-toast .message {
+    @apply mb-2;
+  }
+
+  .pwa-toast button {
+    @apply mr-2 rounded-md border border-base-0/20 px-3 py-1 outline-none;
+  }
+</style>

layouts/default.vue

@@ -55,6 +55,8 @@
       />
     </div>
 
+    <PwaUpdater />
+
     <ClientOnly>
       <Toaster
         :expand="true"

nuxt.config.js

@@ -153,6 +153,8 @@ export default defineNuxtConfig({
 
     registerType: 'autoUpdate',
 
+    registerWebManifestInRouteRules: true,
+
     manifest: {
       name: 'Rule 34 App',
       short_name: 'R34 App',
@@ -208,14 +210,12 @@ export default defineNuxtConfig({
     },
 
     client: {
-      installPrompt: true
+      installPrompt: true,
       // you don't need to include this: only for testing purposes
       // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
       // , periodicSyncForUpdates: 3600
     },
 
-    selfDestroying: true,
-
     devOptions: {
       enabled: true,
       suppressWarnings: true,