chore(pwa): improve DX for `$pwa` (#2498)

modules/pwa/index.ts

@@ -50,15 +50,15 @@ export default defineNuxtModule<VitePWANuxtOptions>({
       baseURL: '/',
       maxAge: 0,
     })
-    if (options.disable) {
+
-      addPlugin({ src: resolver.resolve('./runtime/pwa-plugin-stub.client') })
+    // Register PWA types
-    }
+    nuxt.hook('prepare:types', ({ references }) => {
-    else {
+      // TODO: remove this once JetBrains fixes the issue with types: remove also the dts file
-      // Register PWA types
+      references.push({ path: resolver.resolve('runtime/types') })
-      nuxt.hook('prepare:types', ({ references }) => {
+      references.push({ types: 'vite-plugin-pwa/info' })
-        references.push({ types: 'vite-plugin-pwa/info' })
+      references.push({ types: 'vite-plugin-pwa/vue' })
-        references.push({ types: 'vite-plugin-pwa/client' })
+    })
-      })
+    if (!options.disable) {
       // Inject $pwa helper throughout app
       addPlugin({ src: resolver.resolve('./runtime/pwa-plugin.client') })
     }

modules/pwa/runtime/pwa-plugin-stub.client.ts

@@ -1,7 +0,0 @@
-export default defineNuxtPlugin(() => {
-  return {
-    provide: {
-      pwa: {},
-    },
-  }
-})

modules/pwa/runtime/pwa-plugin.client.ts

@@ -1,4 +1,6 @@
 import { useRegisterSW } from 'virtual:pwa-register/vue'
+import type { UnwrapNestedRefs } from 'vue'
+import type { PwaInjection } from './types'
 import { STORAGE_KEY_PWA_HIDE_INSTALL } from '~/constants'
 
 export default defineNuxtPlugin(() => {
@@ -115,7 +117,7 @@ export default defineNuxtPlugin(() => {
         needRefresh,
         updateServiceWorker,
         close,
-      }),
+      }) satisfies UnwrapNestedRefs<PwaInjection>,
     },
   }
 })

modules/pwa/runtime/types.d.ts

@@ -0,0 +1,28 @@
+import type { Ref } from 'vue'
+import type { UnwrapNestedRefs } from 'vue'
+
+export interface PwaInjection {
+  isInstalled: boolean
+  showInstallPrompt: Ref<boolean>
+  cancelInstall: () => void
+  install: () => Promise<void>
+  swActivated: Ref<boolean>
+  registrationError: Ref<boolean>
+  needRefresh: Ref<boolean>
+  updateServiceWorker: (reloadPage?: boolean | undefined) => Promise<void>
+  close: () => Promise<void>
+}
+
+declare module '#app' {
+  interface NuxtApp {
+    $pwa?: UnwrapNestedRefs<PwaInjection>
+  }
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $pwa?: UnwrapNestedRefs<PwaInjection>
+  }
+}
+
+export {}