refactor: use nuxt plugin to provide pwa helpers globally (#604)

components/pwa/PwaBadge.client.vue

@@ -1,13 +1,9 @@
-<script setup>
-import { pwa } from '~/composables/pwa'
-</script>
-
 <template>
   <button
-    v-if="pwa.needRefresh"
+    v-if="$pwa?.needRefresh"
     bg="fade" relative rounded
     flex="~ gap-1 center" px3 py1 text-primary
-    @click="pwa.updateServiceWorker()"
+    @click="$pwa.updateServiceWorker()"
   >
     <div i-ri-download-cloud-2-line />
     <h2 flex="~ gap-2" items-center>

components/pwa/PwaPrompt.client.vue

@@ -1,10 +1,6 @@
-<script setup>
-import { pwa } from '~/composables/pwa'
-</script>
-
 <template>
   <div
-    v-if="pwa.needRefresh"
+    v-if="$pwa?.needRefresh"
     m-2 p5 bg="fade" relative
     rounded-lg of-hidden
     flex="~ col gap-3"
@@ -13,10 +9,10 @@ import { pwa } from '~/composables/pwa'
       {{ $t('pwa.title') }}
     </h2>
     <div flex="~ gap-1">
-      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="pwa.updateServiceWorker()">
+      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.updateServiceWorker()">
         {{ $t('pwa.update') }}
       </button>
-      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="pwa.close()">
+      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.close()">
         {{ $t('pwa.dismiss') }}
       </button>
     </div>

config/pwa.ts

@@ -3,7 +3,7 @@ import type { VitePWANuxtOptions } from '../modules/pwa/types'
 
 const isPreview = process.env.PULL_REQUEST === 'true'
 
-const pwa: VitePWANuxtOptions = {
+export const pwa: VitePWANuxtOptions = {
   mode: isCI ? 'production' : 'development',
   // disable PWA only when in preview mode
   disable: /* temporarily test in CI isPreview || */ (isDevelopment && process.env.VITE_DEV_PWA !== 'true'),
@@ -49,5 +49,3 @@ const pwa: VitePWANuxtOptions = {
     type: 'module',
   },
 }
-
-export { pwa }

plugins/pwa.client.ts

@@ -1,6 +1,6 @@
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 
-export function usePWA() {
+export default defineNuxtPlugin(() => {
   const online = useOnline()
 
   const {
@@ -34,10 +34,12 @@ export function usePWA() {
   }
 
   return {
-    needRefresh,
+    provide: {
-    updateServiceWorker,
+      pwa: reactive({
-    close,
+        needRefresh,
+        updateServiceWorker,
+        close,
+      }),
+    },
   }
-}
+})
-
-export const pwa = reactive(usePWA())