fix(workbox): fix worker when using pages folder

Fixes #11
kevinmarrec · Jun 7, 2022 · 52ecdb9 · 52ecdb9
1 parent aa01db1
commit 52ecdb9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 20 deletions.
diff --git a/example/nuxt.config.ts b/example/nuxt.config.ts
@@ -12,6 +12,9 @@ export default defineNuxtConfig({
     meta: {
       // Generate splash screens for iOS
       mobileAppIOS: true
+    },
+    workbox: {
+      enabled: true
     }
   },
   unocss: {

diff --git a/example/app.vue → example/pages/index.vue b/example/app.vue → example/pages/index.vue
diff --git a/src/runtime/workbox/plugin.ts b/src/runtime/workbox/plugin.ts
diff --git a/src/workbox.ts b/src/workbox.ts
@@ -1,13 +1,15 @@
-import { join } from 'pathe'
-import { addPlugin, addTemplate, useNuxt } from '@nuxt/kit'
+import { addTemplate, useNuxt } from '@nuxt/kit'
 import consola from 'consola'
+import { join } from 'pathe'
+import { joinURL } from 'ufo'
 import type { PWAContext } from './types'
 
 export default (pwa: PWAContext) => {
   if (!pwa.workbox || !pwa.workbox.enabled) { return }
 
   const options = pwa.workbox
   const nuxt = useNuxt()
+  const head = nuxt.options.app.head as Required<typeof nuxt.options.app.head>
 
   // Warning when in development mode
   if (nuxt.options.dev) {
@@ -27,9 +29,12 @@ export default (pwa: PWAContext) => {
     options
   })
 
-  // Plugin that registers the Service Worker
-  addPlugin({
-    src: pwa._resolver.resolve('./runtime/workbox/plugin'),
-    mode: 'client'
+  // Embed script that registers the Service Worker
+  head.script.push({
+    children: [
+      "if ('serviceWorker' in navigator) {",
+      `  window.addEventListener('load', () => navigator.serviceWorker.register('${joinURL(nuxt.options.app.baseURL, 'sw.js')}'))`,
+      '}'
+    ].join('\n')
   })
 }