skip to Main Content

I’m deploying an Angular 11 app to an Azure AppService. The app uses a Service Worker. My users are experiencing caching issues. I’ve fixed a lot of these by setting the cache control header on the index.html to no-cahce, but they’re still experiencing issues. I think it’s down to the App not updating, so I’m wondering what cache-control headers the nsgw.json and manifest.webmanifest need to be served with? I can’t find any documentation about serving and angular app.

2

Answers


  1. This is not a definitive answer, but a hint that might help you configure the caching behaviour of your app with service workers. in ngsw-config.json there is a property to control how to update the cached ressources. I do not see your file details but there should be "updateMode": "prefetch". This is where you control the behaviour of your cached ressources in your app. Read on Angular Docs the values that can be passed to the updatedMode. You can try to set the updateMode to lazy.

    According to documentation, lazy:

    Tells the service worker to not cache those resources. Instead, it
    treats them as unrequested and waits until they’re requested again
    before updating them. An updateMode of lazy is only valid if the
    installMode is also lazy.

    Login or Signup to reply.
  2. I could not find any documentation either while having a similar issue, so I checked what angular.io (also an Angular app itself) uses as cache-control:

    • The HTML page has no-cache
    • ngsw.json and pwa-manifest.json have max-age=3600
    • ngsw-worker.js has max-age=86400

    I’m no sure why ngsw.json is allowed to be cached, but otherwise these values seem reasonable.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search