You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Uncaught (in promise) add-to-cache-list-conflicting-entries: add-to-cache-list-conflicting-entries :: [{"firstEntry":"http://localhost:4173/music-playing/assets/img/pwa-192x192.png","secondEntry":"http://localhost:4173/music-playing/assets/img/pwa-192x192.png?__WB_REVISION__=25b38533f534eb0f7ea0771021d541a8"}]
at O.addToCacheList (http://localhost:4173/music-playing/workbox-3e911b1d.js:1:11736)
at O.precache (http://localhost:4173/music-playing/workbox-3e911b1d.js:1:11367)
at http://localhost:4173/music-playing/workbox-3e911b1d.js:1:14994
at Object.precacheAndRoute (http://localhost:4173/music-playing/workbox-3e911b1d.js:1:15006)
at http://localhost:4173/music-playing/sw.js:1:673
at http://localhost:4173/music-playing/sw.js:1:565
Here is my configuration to fix that, i have to ignore the icon file that i mentioned earlier. Notice i explicitly add globIgnore to fix it mannually. Can vite-plugin-pwa automatically ignore that file in icons?
// vite.config.jsimport{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'import{VitePWA}from'vite-plugin-pwa'importvuefrom'@vitejs/plugin-vue'importVueDevToolsfrom'vite-plugin-vue-devtools'// https://vitejs.dev/config/exportdefaultdefineConfig(({ mode })=>{constisProduction=mode==='production'return{base: isProduction ? '/music-playing/' : '/',plugins: [vue(),VueDevTools(),VitePWA({registerType: 'autoUpdate',manifest: {name: 'Music Playing APP',theme_color: '#4DBA87',icons: [{src: 'assets/img/pwa-192x192.png',sizes: '192x192',type: 'image/png',},],},scope: isProduction ? '/music-playing/' : '/',workbox: {globPatterns: ['**/*.{js,css,html,png,jpg,svg}'],globIgnores: ['node_modules/**/*','sw.js','workbox-*.js','**/pwa-*.png',// the code to ignore caching the icon file],},}),],resolve: {alias: {'@': fileURLToPath(newURL('./src',import.meta.url)),},},}})
The text was updated successfully, but these errors were encountered:
move the pwa icons to public folder and use it in the app without /assets prefix (use just / prefix, the one for public): vite will emit the pwa icon assets and workbox-build will add it since you have also png files, ando added twice
this icon file is already in public folder, and i indeed use it in the vite config without /, the vue code is not using this icon file, it is only mentioned in the vite config
I had the same situation with conflicting entries based on:
image files in public folder
some image files referenced in manifest config
image files not imported in code
What helped me was taking a look at the generated sw.js to figure out what files are registered with precacheAndRoute and whether there are duplicate entries (with revision null / any hash).
Setting includeManifestIcons: false, removed duplicate entries for the files used within the manifest config.
IMHO excluding files via globIgnores does only help when files are imported in code from e.g. a src/assets folder.
I got error trying to activate the service worker
Here is my configuration to fix that, i have to ignore the icon file that i mentioned earlier. Notice i explicitly add globIgnore to fix it mannually. Can vite-plugin-pwa automatically ignore that file in icons?
The text was updated successfully, but these errors were encountered: