Service Worker does not work correctly until the first refresh app

🐞 bug report

Affected Package

The issue is caused by package @angular/service-worker": “9.1.11”

Description

The service worker does not work correctly until the page refresh (F5) , only after the first refresh we can work offline. We must refresh the page in order to work offline

Could you tell me why only after the first refresh we can work offline, is this the bug or a features?

Possible premises When loading the first time page in accordance with the dev tools, the application cache does not end, only after the first restart of the application the cache is typed, all requests over the network are under the service worker.

Screenshot below

🔬 Minimal Reproduction

As a new user, the first time (Dev tools -> Clear storage 0 b) I go to the site, after downloading the application I go offline and reload the page

Actual result: site is down. Expected Result: site is loading.

For example: When you first visit the site developers.google.com when switching to offline mode, we will get Service Unavailable, only after the first reload the site becomes accessible in offline mode

🌍 Your Environment

Google Chrome x64 v 83.0.4103.116

Angular Version:

Angular CLI: 9.1.9
Node: 13.8.0
OS: win32 x64

Angular: 9.1.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: No

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.9
@angular-devkit/build-optimizer   0.901.9
@angular-devkit/build-webpack     0.901.9
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.9
@angular/cli                      9.1.9
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.9
@schematics/update                0.901.9
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.1

[gkalpak]

All requests on a page go through the SW as long as there is a SW activeated for the page. The very first time you load the page there is no SW installed, so app requests go to the network as usual. Once your app is stabilized, the SW will be registered and from that point onwards it will control the page (meaning all requests will go through it).

So, the .../settings request happens before the SW is registered and thus activated for the page.

See the SwRegistrationOptions docs for more details on when the SW is registered and what other options are available. Keep in mind that registering, installing, activating the SW are asynchronous operations, so even if you register it immediately it is not guaranteed that it will capture a request.

Read the documentation on ServiceWorkerContainer and ServiceWorker to learn more about what API are available to your app.

In any case, I would personally not delay the initial rendering of an app waiting for the SW to be activated. If some requests are crusial for your app, you can re-send them once the SW is activated to let the SW intercept and cache them.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}