There should be a seamless way to get rid of broken service worker state

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

service-worker

Is this a regression?

No

Description

I faced a strange issue with Angular Service worker. My website users were being served with old version of the app which was never getting updated.

If I close browser window, open again and navigate to https://www.mustakbil.com it serves the cached version of the app from service worker. If I refresh the page it loads new version of the app but when I close the browser and reopen it shows same old version of the app.

When I debug the service worker, it shows Driver state: EXISTING_CLIENTS_ONLY. Here’s the output of /ngsw/state

NGSW Debug Info:

Driver version: 12.2.0-rc.0
Driver state: EXISTING_CLIENTS_ONLY (Degraded due to failed initialization: Hash mismatch (cacheBustedFetchFromNetwork): https://www.mustakbil.com/styles.dbc7cf3b891664628fe9.css: expected 02817d65d4e9df85dab3d21324d5ec2c105fa165, got 3aa6510e4f778214e6e6958b7bcea9398baf9d8b (after cache busting)
Error: Hash mismatch (cacheBustedFetchFromNetwork): https://www.mustakbil.com/styles.dbc7cf3b891664628fe9.css: expected 02817d65d4e9df85dab3d21324d5ec2c105fa165, got 3aa6510e4f778214e6e6958b7bcea9398baf9d8b (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://www.mustakbil.com/combined-sw.js:1:9886)
    at Generator.next (<anonymous>)
    at fulfilled (https://www.mustakbil.com/combined-sw.js:1:175))
Latest manifest hash: 226aa816c81da75f68299ffb568a41bd7f881589
Last update check: 2s922u

=== Version 226aa816c81da75f68299ffb568a41bd7f881589 ===

Clients: 1c822e1d-9199-41f9-ad57-3cda8a91bfd9

=== Idle Task Queue ===
Last update tick: 8s736u
Last update run: 3s730u
Task queue:


Debug log:

[17s149u] Error(Hash mismatch (cacheBustedFetchFromNetwork): https://www.mustakbil.com/styles.dbc7cf3b891664628fe9.css: expected 02817d65d4e9df85dab3d21324d5ec2c105fa165, got 3aa6510e4f778214e6e6958b7bcea9398baf9d8b (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): https://www.mustakbil.com/styles.dbc7cf3b891664628fe9.css: expected 02817d65d4e9df85dab3d21324d5ec2c105fa165, got 3aa6510e4f778214e6e6958b7bcea9398baf9d8b (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://www.mustakbil.com/combined-sw.js:1:9886)
    at Generator.next (<anonymous>)
    at fulfilled (https://www.mustakbil.com/combined-sw.js:1:175)) Error occurred while updating to manifest 7bc1992cebed8206fd5798aaeae287c4b5038c1f
[1s976u] Error(Hash mismatch (cacheBustedFetchFromNetwork): https://www.mustakbil.com/styles.dbc7cf3b891664628fe9.css: expected 02817d65d4e9df85dab3d21324d5ec2c105fa165, got 3aa6510e4f778214e6e6958b7bcea9398baf9d8b (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): https://www.mustakbil.com/styles.dbc7cf3b891664628fe9.css: expected 02817d65d4e9df85dab3d21324d5ec2c105fa165, got 3aa6510e4f778214e6e6958b7bcea9398baf9d8b (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://www.mustakbil.com/combined-sw.js:1:9886)
    at Generator.next (<anonymous>)
    at fulfilled (https://www.mustakbil.com/combined-sw.js:1:175)) Error occurred while updating to manifest 7bc1992cebed8206fd5798aaeae287c4b5038c1f

I tried the approach of safety worker as suggested in Angular docs (https://angular.io/guide/service-worker-devops#safety-worker) and got rid of my old worker.

Docs suggest For most sites, this means that you should serve the safety worker at the old Service Worker URL forever., this means we should rename our main worker. I did the same. Now when I deployed my app, I noticed that safety worker always kicks in; and my new service worker doesn’t get registered as a result I see below error in my console log:

NGSW Safety Worker - unregistered old service worker
main.a91480950c35a82b4c64.js:1 ERROR DOMException: Registration failed - storage error

So apparently its now stuck in safety worker.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

NGSW Safety Worker - unregistered old service worker
main.a91480950c35a82b4c64.js:1 ERROR DOMException: Registration failed - storage error

### Please provide the environment you discovered this bug in

```true
Angular CLI: 13.0.0-next.0
Node: 14.16.0
Package Manager: npm 6.14.11
OS: win32 x64

Angular: 13.0.0-next.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                          Version
----------------------------------------------------------
@angular-devkit/architect        0.1201.1
@angular-devkit/build-angular    13.0.0-next.0
@angular-devkit/core             13.0.0-next.0
@angular-devkit/schematics       13.0.0-next.0
@angular/cdk                     13.0.0-next.0
@angular/cli                     13.0.0-next.0
@angular/fire                    6.1.5
@angular/google-maps             13.0.0-next.0
@angular/material                13.0.0-next.0
@angular/pwa                     13.0.0-next.0
@nguniversal/aspnetcore-engine   12.1.0
@nguniversal/builders            12.1.0
@nguniversal/common              12.1.0
@schematics/angular              13.0.0-next.0
rxjs                             6.6.7
typescript                       4.3.5

Anything else?

No response

[naveedahmed1]

@gkalpak just created my first ever pull request in an open source repo, lets see how it goes 😄

Here’s the link to the pull request https://github.com/angular/angular/pull/43324

[gkalpak]

Yes, you shouldn’t need to clear all SW caches.

The SW may be serving multiple app versions simultaneously (i.e. serving different versions to different tabs). If a single version is broken, you don’t need to delete all caches (since some may correspond to good versions). The SW will stop using the caches corresponding to the broken version (and will eventually remove them, since they are unused).