Implementing seamless RxJS offline-first apps using a Cache-First strategy
In this recipe, we’re going to explore how to implement an offline strategy where we first check whether we have data inside the cache, then we fall back to the network.
How to do it…
We are going to leverage Angular’s interceptors and simulate the same behavior as if we were implementing the Cache-First offline strategy inside a service worker.
Step 1 – Extracting data from the Cache API
Usually, on the modern web, we store data for the offline mode inside a browser’s Cache API. When we use offline mode, the Cache-first strategy says:
- First, try to get the data from the Cache API.
- If there is data in the cache, return it immediately to the interceptor as a response.
- If the data is not matched by the request’s URL key, then we proceed to the network and check whether we are back online.
The implementation of a strategy...
