87
votes

I am using the Angular-CLI 1.6.6 and @angular/service-worker 5.2.5 in our Angular 5.2.5 app. Everything works fine on the local lite-server, as well as on the production server, except for one error message popping in our production environment:

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

Looking into the ngsw-worker.js script I found the lines (2466 following) where the error message above is generated:

    async safeFetch(req) {
        try {
            return await this.scope.fetch(req);
        }
        catch (err) {
            this.debugger.log(err, `Driver.fetch(${req.url})`);
            return this.adapter.newResponse(null, {
                status: 504,
                statusText: 'Gateway Timeout',
            });
        }
    } 

Console logging err in the catch puts out the following error:

    TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
        at Driver.safeFetch (ngsw-worker.js:2464)
        at Driver.handleFetch (ngsw-worker.js:1954)
        at <anonymous>

An error that seems related to this question: What causes a Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode error?

The req that generates this error is any first access to the app:

https://example.com/test/#/connect
https://example.com/test/#/map?token=[accestoken]
...

On app reload the error is not repeated.

Can anybody help me out here? Is there a bug in safeFetch() of the service worker (maybe to support HashLocationStrategy)? Do I have to change anything in my config?

1
It seems that a lot of people are facing this problem. github.com/angular/angular/issues/20756 github.com/angular/angular/issues/20970 etc. Not that it's of any help, but it seems that it's being looked at according to the angular service worker project: github.com/angular/angular/projects/13 - sje
Please provide FULL sources (or better yet, stackblitz please :) - yomateo
Can you provide a screenshot from the network tab, that shows the 504? - Daniel Habenicht
There was some work done on the issue . @tobik is this still an issue ? - Joniras

1 Answers

2
votes

Disabling ETag header from backend solved this issue temporarily.