Static assets having duplicate file revision when generating Service Worker precache about docs

[userquin]

@lgaspari includeManifestIcons: false when including png extension, all pwa icons are included by default, I'll try to fix it, can you confirm it?

I guess we can improve this function https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/assets.ts#L47, called to include pwa icons and shorcuts icons

The logic here https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/assets.ts#L56, called from src/options.ts module

[userquin]

No, workbox will use glogPatterns in the dist folder only. The options included in the pwa will generate the revision from the public folder, Vite will copy public folder after workbox build.

[userquin]

We include them using manifestEntries when listed in includeAssets and includeManifestIcon enabled

[userquin]

Check the assets module

[userquin]

@lgaspari weird, I have published the new docs for my vuetify nuxt module (VitePress) and the sw is fine:
https://vuetify-nuxt-module.netlify.app/

I'll check running the examples in the vite-plugin-pwa repo.

are you using Vite or some meta framework (SvelteKit, Nuxt...)?

[lgaspari]

are you using Vite or some meta framework (SvelteKit, Nuxt...)?

Just plain Vite for now.

@lgaspari includeManifestIcons: false when including png extension, all pwa icons are included by default, I'll try to fix it, can you confirm it?

Actually, this made the trick! It looks like using both features together causes the duplicate file revision, so I could just do:

{
  ...

  // Don't include manifest icons in favor of `injectManifest.globPatterns`.
  includeManifestIcons: false,

  // Inject manifest options.
  injectManifest: {
    globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
  },

  ...
}

I guess we can improve this function https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/assets.ts#L47, called to include pwa icons and shorcuts icons

That would be good, like either use just globPatterns or fallback to includeManifestIcons + includeAssets.

[lgaspari]

Yeah, I've been doing some extra runs on my end and that seems exactly what I needed for adding not only public/ files (from includeAssets option) but also any other asset found in the project (from workbox.globPatterns option) whilst avoiding duplicate file revision adding includeManifestIcons: false.

@userquin could you confirm this behavior below?

// meant for public/* files only
includeAssets: [
  // works
  'apple-touch-icon-180x180.png',
  'favicon.ico',
  'logo.svg',
  'robots.txt',

  // won't match src/assets/* files
  '**/*.png',
],

// meant for the whole project, including public/* files
workbox: {
  // will match most files
  globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
},

[lgaspari]

No, workbox will use glogPatterns in the dist folder only.

Right, I meant the dist/ folder, my bad.

The options included in the pwa will generate the revision from the public folder, Vite will copy public folder after workbox build.

Hmm, if Vite copies the public/ folder after workbox build, how is it possible to have those files listed in the precache then?

These are my runs:

Run 1

config:

includeAssets: [
  'apple-touch-icon-180x180.png',
],

output:

e.precacheAndRoute(
  [
    {
      url: 'apple-touch-icon-180x180.png',
      revision: '9b7a985648e65a01c130fa6e22b2459b',
    },
  ]

Run 2

config:

includeAssets: [
  'apple-touch-icon-180x180.png',
],
workbox: {
  globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
},

output:

e.precacheAndRoute(
  [
    {
      url: 'apple-touch-icon-180x180.png',
      revision: '9b7a985648e65a01c130fa6e22b2459b',
    },
    {
      url: 'apple-touch-icon-180x180.png',
      revision: '9b7a985648e65a01c130fa6e22b2459b',
    },
  ]

Run 3

config:

workbox: {
  globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
},

output:

e.precacheAndRoute(
  [
    {
      url: 'apple-touch-icon-180x180.png',
      revision: '9b7a985648e65a01c130fa6e22b2459b',
    },
  ]

The same would happen to every file listed in the includeAssets config (e.g. favicon.ico, logo.svg) that matches the globPatterns. In case of robots.txt, I'd keep it in the includeAssets array, but I could def add .txt to the glob pattern.

Let me know if you need a further example, I'm just trying to wrap my head around how it works to fine-tune the configuration based on that.

---

EDIT: I'm currently using Vite at version ^3.0.7 if that helps.

[lgaspari]

Gotcha! I thought they were kind of exclusive at moment of writing my above comment without having double-checked the code as you pointed out.

The issue can be closed since the solution to my problem was given in #67 (comment) by @userquin. Thanks a lot dude! 💯