icon: caching problem

[homerjam]

Hi,

As highlight by this post on SO the module always displays the default icon.

I presume this is actually a problem with caching somewhere. I noticed there's a hash of some kind in the filename that goes into the manifest, what is this based on?

Thanks, James

[ivodolenc]

Maybe you just need to delete the cacheDir directory from {rootDir}/node_modules/.cache/pwa/icon

Try setting icon options like this:

// nuxt.config.js

{
  pwa: {
    icon: {
      source: 'path/to/your/file/icon.png',
      fileName: 'icon.png',
      // sizes: [64, 192, 512],
      // ...
    },
  },
}

After that, simply run dev server (npm run dev or yarn dev) and the icon should work as expected 👌

For more info, scroll down a bit to the cacheDir section.

[homerjam]

@ivodolenc Thanks! I think the problem is I have no way to remove the old cache directory with the default icon in Vercel. This is because Vercel caches the node_modules directory during build. But I can simply use a different path with the cacheDir setting 👍

[jtlindsey]

Just in case anyone else has this issue, make sure your icon.png is 512x512 and you should be good after following this answer since it's automatically generating icons (ref) and in my case appeared to not generate the larger icons because my icon.png was very small.