feat(service-worker): add staleWhileRevalidate strategy

[heddendorp]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] 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

Current behavior

The service worker only supports networkFirst and cacheFirst caching for DataGroups.

Expected behavior

Also support staleWhileRevalidate Strategy.
As shown here: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate

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

This would help with slow data requests, that can not be cached for a long time. They would be way faster while still being al most up to date.
I workaround for now would be to limit the cache time in order to catch repetitive requests, but staleWhileRevalidate is preferable in my opinion.

[MattiJarvinen]

Had assumed that performance was actually stale while revalidate. It is not
On line 355 it returns if cache entry was found.

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

Lines 339 to 375 in 396c241

	private async handleFetchWithPerformance(req: Request, ctx: Context, lru: LruList):
	Promise<Response|null> {
	let res: Response|null|undefined = null;
	// Check the cache first. If the resource exists there (and is not expired), the cached
	// version can be used.
	const fromCache = await this.loadFromCache(req, lru);
	if (fromCache !== null) {
	res = fromCache.res;
	// Check the age of the resource.
	if (this.config.refreshAheadMs !== undefined && fromCache.age >= this.config.refreshAheadMs) {
	ctx.waitUntil(this.safeCacheResponse(req, this.safeFetch(req)));
	}
	}
	if (res !== null) {
	return res;
	}
	// No match from the cache. Go to the network. Note that this is not an 'await'
	// call, networkFetch is the actual Promise. This is due to timeout handling.
	const [timeoutFetch, networkFetch] = this.networkFetchWithTimeout(req);
	res = await timeoutFetch;
	// Since fetch() will always return a response, undefined indicates a timeout.
	if (res === undefined) {
	// The request timed out. Return a Gateway Timeout error.
	res = this.adapter.newResponse(null, {status: 504, statusText: 'Gateway Timeout'});
	// Cache the network response eventually.
	ctx.waitUntil(this.safeCacheResponse(req, networkFetch));
	}
	// The request completed in time, so cache it inline with the response flow.
	await this.cacheResponse(req, res, lru);
	return res;
	}

[heddendorp]

Stale while revalidate would require the service worker to fetch the resource even after it was found in the cache to update. I'm quite sure the current performance Strategy is like this @MattiJarvinen-BA
https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network

[josephliccini]

Hi all,

Just brainstorming a little here.

One thing that I see being tricky about this would be: how are the consumers of the cached API calls notified that there is now a newer version available in the cache? In the current implementation, I don't see a particularly easy way to achieve this. Would something like cache update notifications for an API resource even be desirable?

To get it to work with the current implementation, one would have to keep the current 'performance' strategy, but right before returning the res from the cache, do an async revalidation network call to update the cache with the latest data.

This way, each subsequent API call after successful 'revalidation' network call would get the newest data from cache, which (I think) would be good enough for our app's use-case. I have to do a bit more thinking, but happy to contribute / discuss ideas.

[odahcam]

Guys, I think line #20402 (comment) could be related to these #21636 (comment) errors.

By default, shouldn't SW's cached content be fetched and work in offline mode?

I got my offline app working just one time when I messed up with some configurations and SW itself (I've deleted SW from production build). I'm unable to track the cause of my issue.

[josephliccini]

To get this functionality, our group created a separate NPM task for creating a workbox-build service worker. It supports this 'staleWhileRevalidate' strategy, as well as a bit more configuration, and also custom SW authoring.

Though I really liked Angular's setup and how easy it was to get started, the Workbox one gave our group that extra configuration that we really needed. Looking forward to seeing both libraries grow and learn from each other in the future.

[gkalpak]

You should basically be able to emulate the staleWhileRevalidate strategy with strategy: 'freshness' and timeout: 0u.
This will essentially do the following:

1. Try to fetch from network first.
2. If the network request does not complete after the 0ms timeout (:grin:), fallback to the cache (ignoring cache age).
3. Once the network request completes, update the cache.
4. If the resource does not exist in the cache, wait for the network request anyway.

Maybe we could document this.
Or add the staleWhileRevalidate option, which would essentially transform to freshness + 0ms timeout under the hood.

By show of hands, who would be interested in submitting a PR? 😃

[atmosuwiryo]

I've tried solution wrote by @gkalpak
Unfortunately, the updated response only update(saved at) the cache so the page will not updated until next refresh.

[gkalpak]

@atmosuwiryo, not sure what you mean. Do you mean that requesting the resource again (after it is saved in the cache) will not serve the latest (saved) response, untill you do a full-page reload? That sounds strange. If you can set up a minimal reproduction, I'd be happy to investigate.

(If you mean that the request is only made once (on page load), so with the staleWhileRevalidate strategy you don't get the latest content until a full-page reload, then that works as expected - this is what the staleWhileRevalidate strategy is for. If you want to always get the latest content, you can use the freshness strategy.)

[atmosuwiryo]

@gkalpak, my mistake then. It's for staleWhileRevalidate strategy so it is works as expected then.

What I'm trying to achive is that I've created offline-image cache directive with strategy:

1. fetch online
2. while wait for response, update image's src to locally saved image
3. When response received, update the image's src with the online response, also update the locally saved image.

Now i'm testing, can service-worker do it with same result.

Note: I'm using this for ionic project.