feat(html): add head when missing from entry point (#784)

* feat(html): add head when missing from entry point * chore: add warning when missing close head tag in the html
vite-pwa · Nov 29, 2024 · 856d3a0 · 856d3a0
1 parent c4c25c9
commit 856d3a0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
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