Service worker performance strategy makes network request to ngsw.json for dataGroups

Description

Angular Service Worker configured with dataGroups cacheConfig performance strategy makes a network call to ngsw.json after serving the resource.

Steps to reproduce:

1. Configure ngsw-config.json with the following settings:

"dataGroups": [
	{
		"name": "photos",
		"urls": [
			"/photo/**"
		],
		"cacheConfig": {
			"strategy": "performance",
			"maxSize": 1000,
			"maxAge": "7d"
		}
	}
]

1. Browse to your Angular page that has a image to http://hostname/photo/unqiue_photo.png
2. The service worker should cache page and the photo
3. Open another tab and copy and paste directly to http://hostname/photo/unqiue_photo.png
4. The browser shows that the image was retrieved from service worker, however, a couple seconds later service worker makes a network call to “/ngsw.json?ngsw-cache-bust=0.5564537918108132”

Expectation: Since the request is part of the “dataGroups” it will not be in ngsw.json so I don’t see a point to make a call to “ngsw.json”. Also note that the strategy is “performance”. So my expectation was no network call would be made. Documentation states that no network call will be made for strategy “performance” until expiration time specified by maxAge.

🌍 Your Environment

Angular Version:

Angular CLI: 8.1.0
Node: 10.13.0
OS: win32 x64
Angular: 8.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.801.0
@angular-devkit/build-angular              0.801.0
@angular-devkit/build-optimizer            0.801.0
@angular-devkit/build-webpack              0.801.0
@angular-devkit/core                       8.1.0
@angular-devkit/schematics                 8.1.0
@angular/cdk                               8.0.2
@angular/http                              7.2.15
@angular/material                          8.0.2
@angular/pwa                               0.801.0
@ngtools/webpack                           8.1.0
@nguniversal/module-map-ngfactory-loader   7.1.1
@schematics/angular                        8.1.0
@schematics/update                         0.801.0
rxjs                                       6.5.2
typescript                                 3.4.5
webpack                                    4.35.2

[gkalpak]

I am afraid I don’t know how to better explain this 😞

What you describe on step 4 is a navigation request (see Request.mode: navigate): The browser “navigates” to a URL, which involves requesting a document from the server (or the service worker for that matter). The fact that the URL maps to a document that is an image and not an HTML document is irrelevant.

By design, on every navigation request, a “check for app updates” is scheduled (for when the SW is idle). I understand that (for some specific usecase) checks might be too often, but for the vast majority of usecases (involving a SW) the overhead will be minimal (very few navigation requests compared to other types of requests and very small payload of ngsw.json compared to other fetched resources/data).

Every design desicion will inevitably leave someone unsatisfied and there is only so much you can do (especially since the Angular SW is intentionally opinionated and unflexible for the time being) 🤷‍♂

Feel free to open a feature request for either reducing the frequency of update checks (e.g. not check if last check was less than X amount of time ago) or disabling the automatic update checks (although I would not be keen on introducing this option 😁).

[Exocomp]

@gkalpak

Please take a moment and understand what I’m trying to get across.

What you stated is how Angular Service Worker is implemented (which I already understand) and doesn’t address the issue I’m pointing out.

This needs to be considered as a bug (which seems like an oversight) or a feature request however you want to handle it.

I’ll explain it again. Consider these steps:

1. Setup an Angular app (for example image gallary) with Angular Service Worker and make image paths part of the dataGroups in ngsw-config.json with cacheConfig strategy performance (maxAge something large like 100 days)
2. Browse to a site to give Angular Service Worker a chance to cache all the images
3. Close the site
4. Setup a page with a direct link to the image, open a new browser instance and go to the new page click on the link to the image or just copy and page the image url
5. Angular Service Worker makes a network call to ngsw.json

NOTE: Since the image was part of dataGroups it is NOT in ngsw.json. So to making call to ngsw.json is a complete waste of resources and bandwidth.

Consider this, say “ngsw.json” is 20kb (compressed). Even a tiny resource like 1 byte triggers another 20kb to be downloaded.

Please explain how that logic makes sense?

Wouldn’t it be better to conditionally make the call to “ngsw.json”? It would be much more efficient use of resources/bandwidth.