feat: add support for 'script-defer' injectRegister option (#27)

* feat: add support for 'script-defer' option for injectRegister script * chore: use `script-defer` in pwa-simple example
vite-pwa · Nov 25, 2023 · 104dbf1 · 104dbf1
1 parent c6838f7
commit 104dbf1
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 18 deletions.
diff --git a/examples/pwa-simple/.vitepress/config.ts b/examples/pwa-simple/.vitepress/config.ts
@@ -44,7 +44,7 @@ export default withPwa(defineConfig({
   pwa: {
     mode: 'development',
     registerType: 'autoUpdate',
-    // injectRegister: 'inline',
+    injectRegister: 'script-defer',
     includeAssets: ['favicon.svg'],
     manifest: {
       name: 'VitePress PWA',

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@vite-pwa/vitepress",
   "type": "module",
   "version": "0.3.0",
-  "packageManager": "pnpm@8.10.5",
+  "packageManager": "pnpm@8.11.0",
   "description": "Zero-config PWA for VitePress",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -42,7 +42,7 @@
     "release": "bumpp && npm publish"
   },
   "peerDependencies": {
-    "vite-plugin-pwa": ">=0.17.0 <1"
+    "vite-plugin-pwa": ">=0.17.2 <1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.43.1",
@@ -55,7 +55,7 @@
     "typescript": "^5.2.2",
     "unbuild": "^2.0.0",
     "vite": "^5.0.0",
-    "vite-plugin-pwa": ">=0.17.0 <1",
+    "vite-plugin-pwa": ">=0.17.2 <1",
     "vitepress": "1.0.0-rc.28"
   },
   "pnpm": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/config.ts b/src/config.ts
@@ -22,7 +22,7 @@ export function configurePWAOptions<T = DefaultTheme.Config>(config: UserConfig<
   else {
     pwa.workbox = pwa.workbox ?? {}
     pwa.workbox.dontCacheBustURLsMatching = dontCacheBustURLsMatching
-    if (pwa.registerType === 'autoUpdate' && (pwa.injectRegister === 'script' || pwa.injectRegister === 'inline')) {
+    if (pwa.registerType === 'autoUpdate' && (pwa.injectRegister === 'script' || pwa.injectRegister === 'script-defer' || pwa.injectRegister === 'inline')) {
       pwa.workbox.clientsClaim = true
       pwa.workbox.skipWaiting = true
     }

diff --git a/src/integration.ts b/src/integration.ts
@@ -59,21 +59,33 @@ export function withUserConfig<T = DefaultTheme.Config>(config: UserConfig<T>) {
 
     const registerSWData = api?.registerSWData()
     if (registerSWData && registerSWData.shouldRegisterSW) {
-      if (registerSWData.inline) {
+      if (registerSWData.mode === 'inline') {
         head.push([
           'script',
           { id: 'vite-plugin-pwa:inline-sw' },
           `if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('${registerSWData.inlinePath}', { scope: '${registerSWData.scope}' })})}`,
         ])
       }
       else {
-        head.push([
-          'script',
-          {
-            id: 'vite-plugin-pwa:register-sw',
-            src: registerSWData.registerPath,
-          },
-        ])
+        if (registerSWData.mode === 'script-defer') {
+          head.push([
+            'script',
+            {
+              id: 'vite-plugin-pwa:register-sw',
+              defer: 'defer',
+              src: registerSWData.registerPath,
+            },
+          ])
+        }
+        else {
+          head.push([
+            'script',
+            {
+              id: 'vite-plugin-pwa:register-sw',
+              src: registerSWData.registerPath,
+            },
+          ])
+        }
       }
     }