94

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
  • 4,798
  • 4
  • 28
  • 52
tobik
  • 1,269
  • 1
  • 10
  • 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

3 Answers3

1

Disabling ETag header from backend solved this issue temporarily.

Tibin Thomas
  • 742
  • 5
  • 12
  • 2
    can you please elaborate your answer, where can i find this ETag in an angular application. – vndpal Dec 16 '19 at 09:25
  • You have to do it in backend config. – Tibin Thomas Dec 23 '19 at 11:20
  • 1
    It doesn't work for me. – Tatyana Molchanova Dec 20 '21 at 14:16
  • "temporarily" means that this fix is unrelated and this step is not related to the issue. The error explained in the question is related to the "Service Worker" code that RUNS on the BROWSER. Simply it's browser's installed service worker (from the website) cache configuration problem. – Dom Jan 11 '23 at 10:31
1

I had the service worker configuration file ngsw-config.json configured wrong. I'd recommend checking ngswConfigPath in angular.json file you have and check out what mis-configuration you got.

On my end, upon removing the cache settings for index.html from ngsw-config.json, it worked like charm afterwards. We might do have similar error 504 Gateway Timeout (from service worker) but our service worker configuration file are definitely not going to be the same.

Edit: once you fix your service worker configuration, if this error happens on your local dev environment, you might need to update your loaded service worker into the browser, to do this:

  • Open devtools
  • Go to Application
  • Service workers
  • Tick "Update on reload"
  • Refresh (your app should work as normal without hard reload - you shouldn't experience the problem again when doing normal refresh)
  • Revert "Update on reload"

Note in regards to the other answers given to this question here

  • I don't see why would SSL certificate error would be related to 504 Gateway Timeout (from service worker) that doesn't actually hit the server. It occurs on the browser side completely, in fact, not a single remote request gets generated.
  • I also don't see why changing ETAG on backend where again, the error happens on the browser, again no backend/frontend server hits at all! It's an error gets thrown by Angular Service Worker which is on the browser side.
Dom
  • 580
  • 4
  • 26
0

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
  • 79
  • 4
  • Not related, unless your service worker cached that SSL, however this still remains cache configuration problem, Service Worker shouldn't cache errors or failures. – Dom Jan 11 '23 at 10:34