Plugin PWA does not automatically update icons (requires users to clear cache)

[ninest]

Version

4.4.1

Reproduction link

https://github.com/ninest/frequency

Environment info

  System: 
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
  Binaries:
    Node: 10.15.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.0.5
  npmPackages:
    @vue/cli-overlay:  4.4.1 
    @vue/cli-plugin-eslint: ~4.4.0 => 4.4.1 
    @vue/cli-plugin-pwa: ~4.4.0 => 4.4.1 
    @vue/cli-plugin-router: ~4.4.0 => 4.4.1 
    @vue/cli-plugin-vuex: ~4.4.0 => 4.4.1 
    @vue/cli-service: ~4.4.0 => 4.4.1 
    @vue/cli-shared-utils:  4.4.1 
    @vue/component-compiler-utils:  3.1.2 
    @vue/eslint-config-airbnb: ^5.0.2 => 5.0.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    vue: ^2.6.11 => 2.6.11 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.2 
    vue-router: ^3.2.0 => 3.3.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.4.0 => 3.4.0 
  npmGlobalPackages:
    @vue/cli: 4.4.1

Steps to reproduce

1. Run the app (using something like http-server from dist/)
2. Stop the server, then change all the icons (in public/img/icons) and the favicon
3. Build the app
4. Use http-server to serve the app

Now if you open the website, the old favicon is still served. The user is required to clear the cache to see the new icons

What is expected?

The icons should be updated. I know that the new service worker will only activate after the second time the website has been visited. But this did not work either.

I thought that all images would have a random ID appended to them so the cache can be busted appropriately:
Perhaps favicon.ico would be changed to favicon.783d33.ico in production. Whenever the favicon changes, the random ID can change

What is actually happening?

The same icons are being served, I believe they are served from the cache

---

I tried using pwa.assetsVersion (setting it to '0.0.1'), but that seems to break it completely in offline mode. When I set it and go offline, every icon disappears, and I see this in the console:

GET http://localhost:8080/img/icons/favicon-32x32.png?v=0.0.1 net::ERR_INTERNET_DISCONNECTED

[IsaacCespedes]

Did you find a solution? Thank you.

[ninest]

I have two ways which I think will work, but I haven't tested them properly:

1. pwa.assetVersion

From the docs:

This option is used if you need to add a version to your icons and manifest, against browser’s cache. This will append ?v=<pwa.assetsVersion> to the URLs of the icons and manifest.

So every time you change your icons, change the assetsVersion. For example, set it to 1 initially, and when you change the icons, change it to 2.

2. Change the folder names of the icons

Put all your icons in a folder called icons/, so it looks like this:

icons/
	icon-512.png
	icon-192.png

When you update your icon, change the folder name to 'icons-2`:

icons-2/
	icon-512.png
	icon-192.png

and update your pwa.manifestOptions with the new paths. Since the path is different, the old cache should be "broken". I got this method from a solution to this issue.

[IsaacCespedes]

I tried both and both options did not work. In both cases I had to reinstall the home screen app to see the new icon. There was supposed to be docs for the manifestOptions as of last year, but I don't see anything.

This is my vue.config:
pwa: {
name: "MyApp",
themeColor: "#000000",
msTileColor: "#000000",
appleMobileWebAppCapable: "yes",
appleMobileWebAppStatusBarStyle: "black",
assetsVersion: "1.2",
iconPaths: {
favicon32: "img/icons2/favicon-32x32.png",
favicon16: "img/icons2/favicon-16x16.png",
appleTouchIcon: "img/icons2/apple-touch-icon-152x152.png",
maskIcon: "img/icons2/safari-pinned-tab.svg",
msTileImage: "img/icons2/msapplication-icon-144x144.png",
},
manifestOptions: {
icons: [
{
src: "./img/icons2/android-chrome-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "./img/icons2/android-chrome-512x512.png",
sizes: "512x512",
type: "image/png",
},
{
src: "./img/icons2/android-chrome-maskable-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "./img/icons2/android-chrome-maskable-512x512.png",
sizes: "512x512",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-60x60.png",
sizes: "60x60",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-76x76.png",
sizes: "76x76",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-120x120.png",
sizes: "120x120",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-152x152.png",
sizes: "152x152",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-180x180.png",
sizes: "180x180",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon.png",
sizes: "180x180",
type: "image/png",
},
{
src: "./img/icons2/msapplication-icon-144x144.png",
sizes: "144x144",
type: "image/png",
},
{
src: "./img/icons2/mstile-150x150.png",
sizes: "150x150",
type: "image/png",
},
],
},

[ninest]

Are you on iOS or Android? If you're on Android, check out https://web.dev/manifest-updates/

As for iOS, I do not know how they handle PWAs updating

[IsaacCespedes]

My apologies. I'm on Android. I will try again soon and report my findings. Thank you.
(I thought it would update along with bundle changes.)