Merge branch 'refs/heads/main' into userquin/feat-add-vite6-support

vite-pwa · Nov 29, 2024 · 88b2e45 · 88b2e45
2 parents cc935a3 + a4a9a8e
commit 88b2e45
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "vite-plugin-pwa",
   "type": "module",
-  "version": "0.21.0",
-  "packageManager": "pnpm@9.12.3",
+  "version": "0.21.1",
+  "packageManager": "pnpm@9.14.4",
   "description": "Zero-config PWA for Vite",
   "author": "antfu <[email protected]>",
   "license": "MIT",

diff --git a/src/client/build/register.ts b/src/client/build/register.ts
@@ -26,12 +26,12 @@ export function registerSW(options: RegisterSWOptions = {}) {
 
   let wb: import('workbox-window').Workbox | undefined
   let registerPromise: Promise<void>
-  let sendSkipWaitingMessage: () => Promise<void> | undefined
+  let sendSkipWaitingMessage: () => void | undefined
 
   const updateServiceWorker = async (_reloadPage = true) => {
     await registerPromise
     if (!auto) {
-      await sendSkipWaitingMessage?.()
+      sendSkipWaitingMessage?.()
     }
   }
 
@@ -48,12 +48,12 @@ export function registerSW(options: RegisterSWOptions = {}) {
       if (!wb)
         return
 
-      sendSkipWaitingMessage = async () => {
+      sendSkipWaitingMessage = () => {
         // Send a message to the waiting service worker,
         // instructing it to activate.
         // Note: for this to work, you have to add a message
         // listener in your service worker. See below.
-        await wb?.messageSkipWaiting()
+        wb?.messageSkipWaiting()
       }
       if (!autoDestroy) {
         if (auto) {
@@ -98,10 +98,7 @@ export function registerSW(options: RegisterSWOptions = {}) {
                   !onNeedRefreshCalled && onOfflineReady?.()
               }
               else {
-                if (event.isExternal)
-                  window.location.reload()
-                else
-                  !onNeedRefreshCalled && onOfflineReady?.()
+                !onNeedRefreshCalled && onOfflineReady?.()
               }
             }
             else if (!event.isUpdate) {
@@ -111,8 +108,6 @@ export function registerSW(options: RegisterSWOptions = {}) {
           // Add an event listener to detect when the registered
           // service worker has installed but is waiting to activate.
           wb.addEventListener('waiting', showSkipWaitingPrompt)
-          // @ts-expect-error event listener provided by workbox-window
-          wb.addEventListener('externalwaiting', showSkipWaitingPrompt)
         }
       }
 

diff --git a/src/client/dev/register.ts b/src/client/dev/register.ts
@@ -3,5 +3,5 @@ import type { RegisterSWOptions } from '../type'
 export type { RegisterSWOptions }
 
 export function registerSW(_options: RegisterSWOptions = {}) {
-  return (_reloadPage = true) => {}
+  return async (_reloadPage = true) => {}
 }
diff --git a/src/html.ts b/src/html.ts
@@ -1,3 +1,4 @@
+import { yellow } from 'kolorist'
 import {
   DEV_PWA_ASSETS_NAME,
   DEV_READY_NAME,
@@ -25,20 +26,43 @@ navigator.serviceWorker.register('${path}', { scope: '${options.scope}' })
 }`.replace(/\n/g, '')
 }
 
+export function checkForHtmlHead(html: string) {
+  if (!html.includes('</head>')) {
+    if (!html.includes('<body>')) {
+      console.warn([
+        '',
+        yellow('PWA WARNING:'),
+        '</head> and <body> tags not found in the html, the service worker and web manifest will not be injected.',
+      ].join('\n'))
+      return html
+    }
+    else {
+      console.warn([
+        '',
+        yellow('PWA WARNING:'),
+        '</head> not found in the html, adding it to the html tag: add empty <head></head> to your html to remove this warning.',
+      ].join('\n'))
+    }
+    return html.replace('<body>', `<head>\n</head>\n<body>`)
+  }
+
+  return html
+}
+
 export function injectServiceWorker(html: string, options: ResolvedVitePWAOptions, dev: boolean) {
   const manifest = generateWebManifest(options, dev)
 
   if (!dev) {
     const script = generateRegisterSW(options, dev)
     if (script) {
-      return html.replace(
+      return checkForHtmlHead(html).replace(
         '</head>',
         `${manifest}${script}</head>`,
       )
     }
   }
 
-  return html.replace(
+  return checkForHtmlHead(html).replace(
     '</head>',
     `${manifest}</head>`,
   )

diff --git a/src/pwa-assets/html.ts b/src/pwa-assets/html.ts
@@ -1,5 +1,6 @@
 import { generateHtmlMarkup } from '@vite-pwa/assets-generator/api/generate-html-markup'
 import type { PWAPluginContext } from '../context'
+import { checkForHtmlHead } from '../html'
 import type { AssetsGeneratorContext, PWAHtmlAssets } from './types'
 import { mapLink } from './utils'
 
@@ -11,7 +12,7 @@ export function transformIndexHtml(
   if (assetsGeneratorContext.injectThemeColor) {
     const manifest = ctx.options.manifest
     if (manifest && 'theme_color' in manifest && manifest.theme_color) {
-      html = html.replace(
+      html = checkForHtmlHead(html).replace(
         '</head>',
           `\n<meta name="theme-color" content="${manifest.theme_color}"></head>`,
       )
@@ -21,7 +22,7 @@ export function transformIndexHtml(
   if (assetsGeneratorContext.includeHtmlHeadLinks) {
     const link = generateHtmlMarkup(assetsGeneratorContext.assetsInstructions)
     if (link.length)
-      html = html.replace('</head>', `\n${link.join('\n')}</head>`)
+      html = checkForHtmlHead(html).replace('</head>', `\n${link.join('\n')}</head>`)
   }
 
   return html