angular: 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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 16 (15 by maintainers)
Commits related to this issue
- fix(service-worker): clear service worker cache in safety worker (#43324) clear angular service worker cache in safety worker to ensure stale or broken contents are not served in future requests Fix... — committed to angular/angular by naveedahmed1 3 years ago
- fix(service-worker): clear service worker cache in safety worker (#43324) clear angular service worker cache in safety worker to ensure stale or broken contents are not served in future requests Fix... — committed to angular/angular by naveedahmed1 3 years ago
- fix(service-worker): clear service worker cache in safety worker (#43324) clear angular service worker cache in safety worker to ensure stale or broken contents are not served in future requests Fix... — committed to TeriGlover/angular by naveedahmed1 3 years ago
- fix(service-worker): clear service worker cache in safety worker (#43324) clear angular service worker cache in safety worker to ensure stale or broken contents are not served in future requests Fix... — committed to TeriGlover/angular by naveedahmed1 3 years ago
@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
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).
Regarding the
unrecoverable
event-handler:'serviceWorker' in navigator
is redundant, since it will always be true ifSwUpdate#unrecoverable
emits.Other than that, it looks fine.
Thx for the update, @naveedahmed1!
I am going to close this, since I don’t think there is anything that can be done on our side (ServiceWorkers have some limitations/idiosyncrasies and we have to live with them 😃).
AFAICT, the methods described in https://angular.io/guide/service-worker-devops should work (if applied correctly). Feel free to suggest any docs improvements that would make the instructions more clear. Also, if you have ideas on better methods for dealing with a broken SW, I’m all ears 😃