Service worker does not fetch new version of the app if the version is same as a previous version

[arikanorh]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I build a sample hello world project with angular cli and add service worker. And i added update handler on my main project to show some notification. Lets say this is version A. I did a prod build and all is well. I changed to style css lets say body {background:red} and i build again (version B) while http-server is still up. I refreshed page and service worker catched the diff and show the notication.So far so good,

Then i reverted css change and end up with a version C which is identical to version A in terms on file contents.

Then build and deploy again. At this time when i refresh the app, the service worker doesnt fetch the new files and still show the version B.

Expected behavior

Service worker should fetch the version C and trigger an update showing notification

Minimal reproduction of the problem with instructions

1. Create a new app with angular cli and add service worker
2. Build for prod and serve with http-server
3. While http-server is up change style.css to backgroun:red
4. Build deploy
5. Refresh page and you will see red background
6. Then remove background:red and make the file exactly same as before
7. Build deploy
8. Refresh the page. At this time sw wont recognize new files even after several refreshes.

What is the motivation / use case for changing the behavior?

Sometimes developers make a rollback after a detecting a fatal bug after a new release. With this bug, the revert wont go use

Environment

Angular version: 6.0.4


Browser:
- [ ] Chrome (desktop) version 69
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[gkalpak]

Indeed, this happens due to this check:

angular/packages/service-worker/worker/src/driver.ts

Lines 773 to 776 in e0ed59e

	// Check whether this is really an update.
	if (this.versions.has(hash)) {
	return false;
	}

I guess this is to account for proxies serving outdated content or something.
One solution I can think of is adding an extra field (e.g. "random" number or date) in the manifest and ensuring it is taken into account when computing the version's hash. This way we ensure (with a high enough probability) that each build will be distinguishable from all other builds.

(Taking this one step further, it would be even better if we kept the "uid" distinct from the hash, so that we could detect that the latest version is identical with a previous one and re-use that without having to re-fetch assets (even if from cache).)

[javierforero]

@gkalpak do you have any recommendations on how to fix this meanwhile your PR gets merged?

My Angular service worker doesn't seem to recognize app updates if I roll back to an older version of the app I am working on. I'm new to PWA's so any advice would be greatly appreciated

[gkalpak]

Unfortunately, I can't think of any work around that would allow rollbacks to work. The obvious (but tedious) solution is to change something in ngsw-config.json to make it different than the old one (if I'm not mistaken, it could be just something in appData).

[XavierDupessey]

Bug still exists in Angular 7.1.1.

The workaround suggested by @gkalpak works: change anything in ngsw-config.json (ngsw.json in dist folder) > appData. Thanks !

[maxisam]

If anyone deploys the app with CI/CD, you can use it to replace properties in ngsw.json to make this work like what @gkalpak suggested.

Here is how to do it in Azure DevOps

add variables like

because deploymentId will change when there is a deployment every time, so it can make rollback work properly.

[angular-automatic-lock-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.}