Racing Cache and Network strategy
We can think of this strategy as the winner takes all. We try to get the data from the cache and from the network at the same time, and whoever is faster, we show their response. The strategy aims to display data as quickly as possible, prioritizing the first available source. This strategy ensures that users see content quickly, even if they are offline or have a slow network connection.
How to do it…
We are going to leverage Angular’s interceptors and simulate the same behavior as if we were implementing Racing Cache and Network offline strategy inside of a service worker.
Step 1 – Extracting data from the cache
First, we are going to define a stream for extracting data from the cache:
let dataFromCache$: Observable<HttpEvent<unknown>>;
const openCache$ = from(caches.open('my-app-cache'));
dataFromCache$ = openCache$.pipe(
switchMap((cache: Cache) => from(cache.match(req.url)))...
