angular / angular/angular

Service Worker 504 Gateway Timeout for external resources

Open
#53,438 13 comments 7 reactions 0 assignees View on GitHub
area: service-worker
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

### Which @angular/* package(s) are the source of the bug?

service-worker

### Is this a regression?

No

### Description

The fetch call for external resources, such as analytics scripts, ad manager scripts or styles will always fail when invoked after the service worker has been initialized. It appears that this is true for all opaque responses, where one can't control the CORS configuration.

I've deployed a fresh Angular 17 app generated with the CLI on Cloud Run. The only modification I've done is add the Google Analytics script to **index.html**. Note that there is nothing special about this script, it will fail the same way for any other external resource.
Repo that's in-sync with the deployed app: https://github.com/zerefel/angular-sw-fetch

## Reproduction steps
- Load the app for the first time or hit **Ctrl + Shift + R** -> The analytics script will be loaded successfully.
- Refresh the page (**Ctrl + R**) -> The analytics script can't be loaded.

I've been testing with various ngsw-config.json setups, tried to configure it with dataGroups, I also went through pretty much every single related issue, read the service worker documentation multiple times, nothing seems to help, so I can only assume this is a bug.

## Expected behavior
The service worker manages to load the resources, or at least give a meaningful error message.

### Please provide a link to a minimal reproduction of the bug

https://angular-sw-test-ccqkuvfrra-nw.a.run.app

### Please provide the exception or error you saw

```true
TypeError: Failed to fetch
at Driver.safeFetch (ngsw-worker.js:1832:33)
```

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 17.0.6
Node: 20.9.0
Package Manager: npm 10.1.0
OS: linux x64

Angular: 17.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker, ssr

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1700.6
@angular-devkit/build-angular 17.0.6
@angular-devkit/core 17.0.6
@angular-devkit/schematics 17.0.6
@schematics/angular 17.0.6
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.2
```

### Anything else?

Due to the nature of some dependencies, which request an arbitrary number of scripts of their own, (e.g. ad manager scripts), it is not viable to list every single URL in the dataGroups config, as they may not be known or could dynamically change.

Contributor guide

Open the contributing guide

Research direction

Start with the linked minimal reproduction and compare the first load with a normal refresh. Inspect the generated ngsw-worker.js at Driver.safeFetch around line 1832, along with index.html and ngsw-config.json, to trace the external opaque response. Done means external resources load after service-worker initialization or produce a meaningful error instead of TypeError: Failed to fetch.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.