vite-pwa / vite-plugin-pwa

Zero-config PWA for Vite
https://vite-pwa-org.netlify.app/
MIT License
3.22k stars 211 forks source link

`<head>` tag required for the manifest to be correctly injected #782

Open simensol opened 1 week ago

simensol commented 1 week ago

I spent several hours debugging why the <link rel="manifest" href="/manifest.webmanifest"> tag wasn't injected into my app by vite-plugin-pwa.

Since I use unjs/unhead to manage all <head> tags, my index.html entry point didn't have a <head> tag:

<!DOCTYPE html>
<html lang="en">
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

I realized that for vite-plugin-pwa to inject the manifest, an empty <head> tag is required:

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

This should probably be documented somewhere.

userquin commented 1 week ago

PR welcome :pray: (use the docs repo)

simensol commented 1 week ago

Would it be more appropriate to consider this as a bug or to raise a warning instead of just documenting it?

userquin commented 1 week ago

@simensol can you check using the version from here https://github.com/vite-pwa/vite-plugin-pwa/pull/784#issuecomment-2473648975 ?

simensol commented 3 days ago

@userquin The warning message works as expected:

PWA WARNING:
</head> and <body> not found in the html, the service worker and web manifest will not be injected.

However, in my case, only the <head> tag was missing, so no error was raised. Could we also raise an error if only the <head> tag is missing?

userquin commented 3 days ago

The pr just adds the head if missing, I can change the logic to just log the warning, I will try to change the pr tmr and release a patch version (0.21.1)

simensol commented 3 days ago

I see. I think creating the missing <head> tag is a good solution, as long as the user sees a warning or info message explaining the behavior.