Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
chenyu-01 opened this issue Apr 11, 2024 · 3 comments

Comments

@chenyu-01
Copy link

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
Copy link
Member

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
Copy link
Author

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants