vite-plugin-pwa
vite-plugin-pwa copied to clipboard
vite-pwa
feat: automatic generation and injection of favicon
There's a favicon plugin for webpack https://github.com/jantimon/favicons-webpack-plugin which given the single image file automatically creates small icons and injects them to index.html
Providing such functionality to this PWA plugin would be a nice thing too - it would inject icons to the manifest section of the plugin configuration, to the entry file (index.html) and to dist/assets.
Found this package looking specifically for this feature — I'm using Sveltekit and service workers are already reasonably straightforward there, but generating and injecting an iconset into a manifest would be a big productivity win on new projects
@jacekkarczmarczyk Maybe it would be better to add a cli to generate the icons since the process will be too expensive, then we can transform the index.html using the cli or just adding another plugin with a transform html hook (on dev and on build).
I'm testing this vite plugin https://github.com/josh-hemphill/vite-plugin-favicon/, but the generation is wrong since it is using the assets directory and the manifest is not being updated to use the icons with hashed name (when integrated here, we need to exclude the manifest.webmanifest generation). Since the pwa plugin is using workbox-build (file based), it would be better to use the public directory, all generated icons will go there and also added to the sw pre cache manifest, so if we change the icons the sw will change also their hash. Once the icons are generated on the public directory we can use them from any asset.
If we include a plugin with a similar fashion to previous one, icons will not be generated on development, just starting the dev server will take more than 10 seconds, and that is not what we want.
I don't know vite internals but I'm pretty sure it could be done with some caching, obviously first time would be expensive, but next time images would be taken from the cache (unless the original image has changed)
@jacekkarczmarczyk there is plugin for VS Code from microsoft (PWABuilder), maybe it would be better to use it instead integrating the logic here, I've not tested it yet (I use IntelliJ EE):
https://github.com/pwa-builder/pwa-studio
I use IntelliJ EE
Me too, also not sure if VS Code plugin would be usable in automatic CI etc
@jacekkarczmarczyk can you take a look at this one PWA Asset Generator ? You can also generate splash for installed PWA.
I'll take a look to try to integrate here, including also pwa icons injection on html (the library allow us to use it also as a module).
FYI: https://web.dev/learn/pwa/enhancements/ on Learn PWA from Google
Will do, thanks. This link from Google looks cool too!
FYI: The link to Learn PWA is also included on Getting Started entry on docs: https://vite-plugin-pwa.netlify.app/guide/
+1 for this feature. Tried using vite-plugin-favicons-inject to generate my favicons, but this uses the library favicons and that autogenerates a manifest as well. They have no way to disable manifest generation (open issue for 3 years) and in my case that one is the one the browser always chose to load.
Implemented in https://github.com/vite-pwa/vite-plugin-pwa/pull/621?
Implemented in https://github.com/vite-pwa/vite-plugin-pwa/pull/621?
Yes, check ~~pwa-assets~~ assets-generator example (only when configuring the pwa assets to be generated on the fly via new pwaAssets option): theme-color will be also injected, check the docs https://vite-pwa-org.netlify.app/assets-generator/integrations.html
I'll try to add support to inject theme-color, favicon, and maskable icons to the html head using the manifest without pwaAssets configured (apple icons cannot be injected since the manifest doesn't have those icons).