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

Question

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?

Answer 1

Disabling ETag header from backend solved this issue temporarily.

Answer 2

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