How to update PWA home screen icon on desktop with Angular 8

Question

I have a project with Angular and PWA. OS is Windows 10. The angular core version is 8.2.14 and pwa version is 0.803.19. The manifest file is

{
  "name": "App Name",
  "short_name": "App Name",
  "theme_color": "#313643",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icon/72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
   ...etc
  ]
}

When I installed pwa on the desktop for the first time, the manifest file was default with default icons. Then I've changed icons in icons folder and path to them in the manifest with the theme color. I've tried to reinstall the app several times, but the theme and icons were the same as the default. I've checked the console - there were new icons. The same was in prompt to install the app. But when I clicked to install, the installed app icon and theme defaulted angular. I even tried to rename the icons folder. It not helped. Theme changed only when I explicitly paste it in index.html theme color. There two interesting things. The first is when I tried RMB on the installed app, properties->change icon, it offers me only a new icon and no angular default. But if change it manually and reinstall the app, icon again was angular default. Second is when we tried to install the app on another PC for the first time, the installed app was with new icons. It seems to me that there is some kind of cache on the PC or something. I have not found any information about this problem. Does anybody have any ideas? In production, it might become a problem, and I think this is not correct behavior.

Here is my ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Answer 1

How did you set the caching strategy for the icons (static assets) in your ng-sw.config file?

If you want to manually delete the SW cache, you can do it via Dev Tools (if you use with Chrome):

Then refresh the page and the SW will cache the target assets again. You should then see the new images.

If you want to read more about PWAs, have a look at the articles I wrote about them, going from theory to concrete examples.

---

From the Angular docs:

In the context of an Angular service worker, a "version" is a collection of resources that represent a specific build of the Angular app. Whenever a new build of the app is deployed, the service worker treats that build as a new version of the app. This is true even if only a single file is updated. At any given time, the service worker may have multiple versions of the app in its cache and it may be serving them simultaneously.

If you made a new build with the newer assets and deployed it, the users should get it when they refresh the page or the new SW version gets active. It can be that the new SW is installed on the client side but it does not get active as the user has still at least one browser tab open where the old SW is running.

This is the same as you changes anything in your webmanifest file (for the home screen icon). As soon as the suer refreshes the app, the new icon will be served.

To delete all caches content programmatically (otherwise provide a specific cache name to match):

if ('caches' in window) {
    caches.keys()
      .then(function(keyList) {
          return Promise.all(keyList.map(function(key) {
              return caches.delete(key);
          }));
      })
}