VitePWA plugin not updating generated icons in manifest - progressive-web-apps

Question

I have a site with PWA img assets in
img/icons/imagename.png
I am trying to build the site with vite and vite-plugin-pwa to use it as a pwa.
The vite.config.js and the index.html are in the project root directory. Images are in img directory.
The problem is that when I run the build file places the imgs in the folder assets/imageName###.png
For example chrome192.png is placed in assets/chrome192.f25426fd.png
However, the manifest file generated upon build manifest.webmanifest still contains
src: 'img/icons/chrome192.png',
The application tab for dev tools in chrome shows {rootURL}/img/icon/chrome192.png not found. Which is expected since the bundling with vite build places it in a different folder (assets).
Why does it not update the path of the images in the generated manifest.webmanifest?
Isn't that the whole point of the vite-plugin-pwa to keep track of the filenames that change upon build.
Another issue is that I have different routes eg: html/about
Inside the about.html generated on build, the web manifest path is given as:
<link rel="manifest" href="./manifest.webmanifest">
It uses this path instead of using ../manifest.webmanifest or maybe a path from the root without the ./ such as href="./manifest.webmanifest"
My vite.config.js is shown below
import { resolve } from 'path';
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa'
// import legacy from '#vitejs/plugin-legacy';
export default defineConfig({
plugins: [
VitePWA({
includeAssets: ['img/icons/favicon.png', 'img/icons/maskable_icon.png' ],
manifest: {
name: 'Final Countdown',
start_url: "/",
short_name: 'Final Countdown',
description: 'Awesome countdown App',
theme_color: '#031c36',
icons: [
{
src: 'img/icons/chrome192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'img/icons/chrome512.png',
sizes: '512x512',
type: 'image/png'
},
{
src: 'img/icons/chrome512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable'
}
]
}
})
],
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
about: resolve(__dirname, 'html/about.html'),
countdownList: resolve(__dirname, 'html/countdown-list.html'),
fallback: resolve(__dirname, 'html/fallback.html'),
today: resolve(__dirname, 'html/today.html'),
formupload: resolve(__dirname, 'html/form-upload.html'),
},
},
},
});
The code is hosted at this branch if you need to take a look at the full folder
https://github.com/RDjarbeng/countdown/tree/vitePWA
I have removed the previous manifest.json file that used to work before I started using the vite-plugin-pwa, because when it was included there were two manifest files in the build instead.
Have also tried using /img/icons/... for the paths and resolve(__dirname, img/icons/chrome192.png)
How do I get the PWA manifest and icons to sync with the image build files generated by the viteJS bundler and satisfy the PWA conditions?
How do I get the paths of html files not in the root folder to use the correct path to the manifest.webmanifest?

Answer 1

If the icon is only being used in the webmanifest icons, those icons should go to public folder.
Create a folder named public in the root directory and move the icons for the manifest there. Vite will add these to the build without changing the file names.
Find full solution here.
https://github.com/vite-pwa/vite-plugin-pwa/issues/396
You do not need to add public/ to the names of the images in the manifest.json.
In the end the vite config, vitePWA contained
...
includeAssets: ["**/*.{png}"],
manifest: {
name: 'Final Countdown',
start_url: "/",
id: "/",
short_name: 'Final Countdown',
description: 'Awesome countdown App',
theme_color: '#031c36',
icons: [
{
src: '/img/icons/chrome192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: '/img/icons/chrome512.png',
sizes: '512x512',
type: 'image/png'
},
]
},
Full path to the image:
{rootURL}/public/img/icons/chrome192.png
where {rootURL} is the root url from which the site is served