Angular 5 Service Workers Cache refresh on data update or insertion

Question

I have been reading about the new Service Workers support for Angular 5 and Angular CLI and I found it fascinating. I'm particularly interested in caching API end points. In all the tutorials I have read, they all seem to focus on caching end point calls once and then serving future requests from the cache storage. What if my web application frequently updates or inserts data? All my requests would still continue being served from the cache which will result in fetching old data and not the new data that I just updated or inserted which would only be retrieved if I make a new call to the API end point. How can we keep this in sync?

To make my question a bit clear; In short what I am asking for is how can you refresh your cache based on your need.I understand that If I pick 'freshness' strategy, it will always fetch from network except at the time of network failure or time out in which case it defaults to the cache. If I pick 'performance' strategy, it will always serve from cache and will not be suitable for things that change often. What I'm looking for is a little bit of both. I would like it to always serve from the cache except in the case where I specifically tell it not to. For example when I create new customer, I would like to refresh the cache and then it continues to serve from the cache until I tell it to refresh otherwise.

Answer 1

First things first:

Service workers are not able to cache all requests (as of the date of this answer). They can only cache GET requests, since POST requests are inherently meant to change the state of the back-end model. If you are interested in buffering other than GET requests while offline (and then replay them once the internet is reconnected), try reading here. The discussion about allowing the service workers to cache POST requests is still ongoing though.

That being said, if your app uses only GETs to populate the app state in the browser, it will work just fine offline (once a user accesses all the GETs at least once so they will have been cached).

This caching mechanic is not turned on by default. You have to modify your ngsw-config.json to set it up. For API request caching, the dataGroups is the right place to put the configuration to.

"dataGroups": [
    {
      "name": "api",
      "urls": [
        "https://api.yourdomain.com/**"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "1d",
        "version": 1
      }
    }
  ]

Notice the strategy part of the cacheConfig. This is what tells the service worker how to behave. In the example, you can see I set it to freshness. This means the worker will first try to access the internet and fetch fresh data. If it fails, it will serve the cached version (if there is some). The other allowed value is performance which will first serve the cached data (if any) and then sync the cache online in the background.

You can find more on service worker configuration in the official docs