Pwa-module: static/icon.png hash is not invalidated with `target: static`

Created on 22 Sep 2020  路  14Comments  路  Source: nuxt-community/pwa-module

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'
    },
  },

bug

Most helpful comment

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.

All 14 comments

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.

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

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!

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.

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

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

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

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.

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

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?

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

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.

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

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

Was this page helpful?
0 / 5 - 0 ratings