Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular service worker fetch error after deploy [duplicate]

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?

like image 702
Tomer Kohn Avatar asked Jun 05 '17 14:06

Tomer Kohn


People also ask

How do I bypass Angular service worker?

To bypass the service worker, set ngsw-bypass as a request header, or as a query parameter. The value of the header or query parameter is ignored and can be empty or omitted.

What is Serviceworker in Angular?

At its simplest, a service worker is a script that runs in the web browser and manages caching for an application. Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them.

What is NGSW-config JSON?

The ngsw-config.json configuration file specifies which files and data URLs the Angular service worker should cache and how it should update the cached files and data. The Angular CLI processes the configuration file during ng build .

What is NGSW worker JS?

This is the runtime configuration file, that the Angular Service worker will use. This file is built based on the ngsw-config. json file, and contains all the information needed by the Angular Service Worker to know at runtime about which files it needs to cache, and when.


2 Answers

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/).

like image 142
farokh veician Avatar answered Nov 07 '22 15:11

farokh veician


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.

like image 37
ferralucho Avatar answered Nov 07 '22 13:11

ferralucho