fix(service-worker): handle eagerly-cached assets unexpectedly missing from the cache

Context

It has been observed that occasionally angular.io loads an index.html file that contains (transitive) references to some JS chunks (e.g. lazy-loaded custom elements, such as the ToC module/component) which no longer exist neither on the server nor on the SW cache. When this happens, the page cannot be loaded and user sees the app-shell with a blank content area.

The frequency of these issues (which have been reported for other apps using @angular/service-worker) seem to be declining recently (see https://github.com/angular/angular/issues/28114#issuecomment-581989614), possibly due to fixes such as #32525. They still happen, though.

This is puzzling because these missing chunks are part of the same asset cache group (app-shell) and should be cached together with the index.html and main.js/runtime.js bundles that reference them. #28114 has much more info and in-depth discussions.

A Theory

While we haven’t found the root cause of this, here is a theory:

The browser deletes some entries from the app-shell cache. E.g. it removes the ToC module/component chunk but retains the index.html and main.js/runtime.js that reference it.

Browsers are free to decide when/what to evict from the cache, so different browsers can have different behavior.

Possible Solution

One possible solution is be to:

1. Detect this situation in the SW (i.e. when a hashed, eagerly cached asset cannot be found in the cache and also does not exist on the server).
2. Purge the corresponding cache.
3. Communicate from the SW to the page that the SW and the app are in an unrecoverable state and the page needs to be reloaded.
4. Have the page listen for the message and handle it accordingly. For example it could show a notification to the user prompting them to reload) or automatically reload the page. (For angular.io, the latter would make more sense, since there is basically no app state to be lost.)

[IgorMinar]

thanks @sonukapoor for taking this on!

[sonukapoor]

@gkalpak I will try to take a look at this.