[bug] add-to-cache-list-conflicting when setting both the globPattern and icons manifest

[chenyu-01]

I got error trying to activate the service worker

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.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const isProduction = 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(new URL('./src', import.meta.url)),
      },
    },
  }
})

[userquin]

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

[chenyu-01]

public folder

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

[erfanmola]

Same issue here, been a while like 3-4 months since this issue started after an update to package.

[dirx]

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.