90

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?

aturan23
  • 3,762
  • 3
  • 23
  • 44
tobik
  • 1,199
  • 1
  • 8
  • 9
  • 9
    It seems that a lot of people are facing this problem. https://github.com/angular/angular/issues/20756 https://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: https://github.com/angular/angular/projects/13 – sje Mar 03 '18 at 00:36
  • 1
    Please provide FULL sources (or better yet, stackblitz please :) – yomateo Oct 29 '18 at 21:45
  • Can you provide a screenshot from the network tab, that shows the 504? – Daniel Habenicht Nov 02 '18 at 20:58
  • 2
    There was some work done on [the issue](https://github.com/angular/angular/issues/20970#issuecomment-430918457) . @tobik is this still an issue ? – Joniras Dec 19 '18 at 08:43
  • 2
    it's a chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=823392 – Fateh Mohamed Jun 11 '19 at 23:36
  • There is an issue with the service work in your version, try going to version 5.2.11. I had an issue with it to where it read the version wrong and it would just leave a blank screen which was fixed in 11 – Robert Leeuwerink Jun 19 '19 at 18:27

2 Answers2

2

Disabling ETag header from backend solved this issue temporarily.

Tibin Thomas
  • 714
  • 5
  • 12
1

I was getting this error in chrome browser because of expired SSL certificate. Replacing the SSL certificate with a valid one was the solution.

Ghasem
  • 81
  • 4