static/icon.png hash is not invalidated with target: static

[Josh979]

The app icon images that are generated seem to use the default/initial icon.png image for icon generation when using the default icon.png filename. I tried different configurations to get it to refresh, and I ended up having to build once using an alternate filename, and then switch the filename back to the original, then build again, in order to allow the new icon.png file to be used.

Nuxt version: 2.14.5 and 2.14.6
This occurred in both @nuxt/pwa v3.0.0-beta20 and v3.0.2

Initial run. No options added to config. I updated icon.png file in static dir folder. Result: The new icon.png image was not used to generate icon files, instead the old icon.png file was used.

pwa:{  },

Next attempt: Setting the values in the options also did not use new icon.png image, still the old icon.png image was used.

  pwa:{
    icon:{
      source: '/static/icon.png',
      fileName: 'icon.png'
    },
  },

Finally got a new image to be used for generation by first changing the filename+source to a different file,

  pwa:{
    icon:{
      source: '/static/icon-alt.png',
      fileName: 'icon-alt.png'
    },
  },

I then changed the icon config back to the default filename, added a new icon.png file to the static directory, ran build, and the new icon.png file was used correctly.

  pwa:{
    icon:{
      source: '/static/icon.png',
      fileName: 'icon.png'
    },
  },

[leopoldkristjansson]

I was struggling with this too. I found out that leaving the / before static/... worked for me.

  pwa: {
    icon: {
      source: 'static/icon.png',
      filename: 'icon.png'
    },
  },

Now the icon builds again.

[Josh979]

@leopoldkristjansson Thanks for the tip, I'll have to try that out in the meantime.

[ponnex]

I was struggling with this too. I found out that leaving the / before static/... worked for me.

  pwa: {
    icon: {
      source: 'static/icon.png',
      filename: 'icon.png'
    },
  },

Now the icon builds again.

This works for me thanks!

[crytos]

Hello, guys is there a way of the icon.source being an external image URL, please. I am working on a dynamic subdomain kind of app and need to generate different icons basing on the logo of the current subdomain app

pwa: { icon: { source: 'https://res.cloudinary.com/viera/image/upload/v1599731538/uploads/it6atyi5fbnquuxiyoqk.png', filename: 'And what do i put here please' }, },

Thank you, please.

[ponnex]

Hello, guys is there a way of the icon.source being an external image URL, please. I am working on a dynamic subdomain kind of app and need to generate different icons basing on the logo of the current subdomain app

pwa: { icon: { source: 'https://res.cloudinary.com/viera/image/upload/v1599731538/uploads/it6atyi5fbnquuxiyoqk.png', filename: 'And what do i put here please' }, },

Thank you, please.

I think it isn't possible with this module, as it generates icons on manifest.json. The closes I could find is this article

[crytos]

Hey, @ponnex Let me check out that link, please. Thank you

[studnitz]

The icon is cached in rootDir/node_modules/.cache/pwa/icon. Clearing that directory gets the new icon, still a bug though iMo.

[crytos]

The icon is cached in rootDir/node_modules/.cache/pwa/icon. Clearing that directory gets the new icon, still a bug though iMo.

Yeah, that's right. Actually, I just added an icons array in the manifest option abject. and disabled the icons module.

[crytos]

Hey @ponnex Later I figured that my problem is bigger. I am trying to build an app like "StudioYou" - the one you referred in the article above, It is called myduuka.com, It's a platform for creating online shops, whereby each user can have an independent online shop on their subdomain.

So I have been trying to make a request to the server according to the current host(subdomain) so that I can get the data for that particular subdomain. But since to my knowledge, I can't access the window.location.host (subdomain) from the nuxt.config, I am stuck there currently

[pi0]

Hi @Josh979. I'm trying to investigate this issue but hash for cache is generated based on file contents (src). Are you using target: static or nuxt generate?

[pi0]

@crytos You can ask your generic questions in nuxtjs or discord :)

[Josh979]

Hi @Josh979. I'm trying to investigate this issue but hash for cache is generated based on file contents (src). Are you using target: static or nuxt generate?

@pi0 Yes, I use both.

[pi0]

Ahh i see. This is a bug with nuxt smart rebuild as we don't hash static dir (so static/icon.png changes not detected) and icon module will be skipped.

Some workarounds:

• nuxt generate --force-build
• update anything inside nuxt.config
• put icon in assets/icon.png instead

[pi0]

Hi. Sorry for inconveniences. This issue should be resolved by v3.2.0 without need to workaround above.

[larsdouweschuitema]

I was struggling with this too. I found out that leaving the / before static/... worked for me.

  pwa: {
    icon: {
      source: 'static/icon.png',
      filename: 'icon.png'
    },
  },

Now the icon builds again.

This worked for me, thank you. 💯