refactor: inject pwa client plugin from module (#1758)

composables/web-share-target.ts

@@ -4,7 +4,7 @@ export function useWebShareTarget(listener?: (message: MessageEvent) => void) {
 
   onBeforeMount(() => {
     // PWA must be installed to use share target
-    if (useNuxtApp().$pwa.isInstalled && 'serviceWorker' in navigator) {
+    if (useNuxtApp().$pwa?.isInstalled && 'serviceWorker' in navigator) {
       if (listener)
         navigator.serviceWorker.addEventListener('message', listener)
 

modules/pwa/index.ts

@@ -1,5 +1,5 @@
 import { mkdir, writeFile } from 'node:fs/promises'
-import { defineNuxtModule } from '@nuxt/kit'
+import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 import type { VitePluginPWAAPI } from 'vite-plugin-pwa'
 import { VitePWA } from 'vite-plugin-pwa'
 import type { Plugin } from 'vite'
@@ -19,6 +19,8 @@ export default defineNuxtModule<VitePWANuxtOptions>({
     scope: nuxt.options.app.baseURL,
   }),
   async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url)
+
     let vitePwaClientPlugin: Plugin | undefined
     const resolveVitePluginPWAAPI = (): VitePluginPWAAPI | undefined => {
       return vitePwaClientPlugin?.api
@@ -35,6 +37,19 @@ export default defineNuxtModule<VitePWANuxtOptions>({
       baseURL: '/',
       maxAge: 0,
     })
+    if (options.disable) {
+      addPlugin({ src: resolver.resolve('./runtime/pwa-plugin-stub.client') })
+    }
+    else {
+      // Register PWA types
+      nuxt.hook('prepare:types', ({ references }) => {
+        references.push({ types: 'vite-plugin-pwa/info' })
+        references.push({ types: 'vite-plugin-pwa/client' })
+      })
+      // Inject $pwa helper throughout app
+      addPlugin({ src: resolver.resolve('./runtime/pwa-plugin.client') })
+    }
+
     // TODO: combine with configurePWAOptions?
     nuxt.hook('nitro:init', (nitro) => {
       options.outDir = nitro.options.output.publicDir

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

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

nuxt.config.ts

@@ -133,6 +133,9 @@ export default defineNuxtConfig({
   },
   sourcemap: isDevelopment,
   hooks: {
+    'prepare:types': function ({ references }) {
+      references.push({ types: '@types/wicg-file-system-access' })
+    },
     'nitro:config': function (config) {
       const nuxt = useNuxt()
       config.virtual = config.virtual || {}

pages/share-target.vue

@@ -8,7 +8,7 @@ definePageMeta({
 
 useWebShareTarget()
 
-const pwaIsInstalled = process.server ? false : useNuxtApp().$pwa.isInstalled
+const pwaIsInstalled = process.client && !!useNuxtApp().$pwa?.isInstalled
 </script>
 
 <template>

shims.d.ts

@@ -1,7 +1,3 @@
-/// <reference types="@types/wicg-file-system-access" />
-/// <reference types="vite-plugin-pwa/info" />
-/// <reference types="vite-plugin-pwa/client" />
-
 declare global {
   namespace NodeJS {
     interface Process {