Service worker locked in EXISTING_CLIENTS_ONLY state

🐞 bug report

Affected Package

The issue is caused by package @angular/pwa

Is this a regression?

Not a regression I think.

Description

If a network failure happens, the service worker will enter the EXISTING_CLIENTS_ONLY state.

If a connected client reloads (F5), the service worker will stay in that state forever and serve nothing to the client, nor to other clients or reloading clients.

In my opinion, it would be better if the service worker kept serving the old cached version, while waiting for the network to recover and the update to occur successfully. Otherwise, offline mode is broken.

🔬 Minimal Reproduction

To enter EXISTING_CLIENTS_ONLY state:

1. Create an Angular app:

    mkdir drop_me
    cd drop_me
    npm install @angular/cli
    node_modules/.bin/ng new my-dream-app
    cd my-dream-app
    node_modules/.bin/ng add @angular/pwa --project my-dream-app
    node_modules/.bin/ng build --prod
    npm install http-server
    node_modules/.bin/http-server -p 8080 -c-1 dist/my-dream-app
   

2. Open http://localhost:8080 in Chrome and wait for the page

3. Kill the server

4. Change something in src/app/app.component.html

5. Rebuild and serve:

    node_modules/.bin/ng build --prod
    node_modules/.bin/http-server -p 8080 -c-1 dist/my-dream-app
   

6. Go back in Chrome, it slow 3g network in dev tool, hit F5, and wait for the service worker to start downloading index.html, main.js or any file of the update.

   When that happen, check chrome devtool Offline checkbox.

   The service worker is now in EXISTING_CLIENTS_ONLY.

From now, to create the issue, just hit F5.

The application will be broken offline, even after network reconnection, tab close/re-open, etc.

For me, beside unregistering the service worker manually, only a new update of the application can fix the state.

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.3
Node: 11.5.0
OS: linux x64
Angular: 8.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@angular/pwa                      0.800.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

Only tested on Chrome.

[H--o-l]

@gkalpak

Now that #31865 is merged (🎉)

🎉 🎉

No issue, I open the PR https://github.com/angular/angular/pull/32682 !

[gkalpak]

Reading through your comments, everything sounds reasonable, @H--o-l. But I have to take a closer look at the code and the current behavior (it does definitely sound like a bug). I’ll try to get to it in the next few days.