503 ok (from serviceWorker)

Question

I used @angular/service-worker to generate SW for an angular4 web app. after updating the ngsw-manifest.json to handle dynamic request from the server I get "Status Code:503 OK (from ServiceWorker)" when offline (after first loading).

Any thoughts?

Answer 1

your problem is related with [Content Security Policy (CSP)] configuration on your web server or proxy nginx. Due you are connecting properly with nginx, the PWA offline feature is not enabled in your browser.

read more on (https://content-security-policy.com/).

Answer 2

The performance strategy works (you can try this strategy), the caveat being dynamic content is only cached on the second page load due to async nature of the service worker. In your ngsw-config.json:

      "cacheConfig": {         "strategy": "performance",         "maxSize": 100,         "maxAge": "3d" } 

By default, files that are fetched at runtime are not cached, but by creating a dynamic cache group, matching files that are fetched by the Service Worker will also be cached. Choosing optimizeFor setting of performance will always serve from the cache first, and then attempt to cache any updates. Choosing freshness means that the Service Worker will attempt to access the file via the network, and if the network fails, then it will serve the cached copy.