
### Caching Strategy

Now that we have learned how to cache files with service workers , lets dive into some of the strategies that can be used for caching.

#### Cache with network fallback

In this strategy first we try to access our cache and then if that fails or if we don't find the items in our cache we fallback to the network.
The service worker intercepts requests that our page sends and then look in the cache and if response is found it returns response to the page and if response is not found it goes back to the network.

![Cache with network fallback](/images/cache-with-network-fallback.png)

```js
self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      // Cache hit - return response
      if (response) {
        return response;
      }

      return fetch(event.request).then(function (response) {
        // Check if we received a valid response
        if (!response || response.status !== 200 || response.type !== "basic") {
          return response;
        }

        // IMPORTANT: Clone the response. A response is a stream
        // and because we want the browser to consume the response
        // as well as the cache consuming the response, we need
        // to clone it so we have two streams.
        var responseToCache = response.clone();

        caches.open(CACHE_NAME).then(function (cache) {
          cache.put(event.request, responseToCache);
        });

        return response;
      });
    })
  );
});
```

###### Advantage

- We can load resources immediately if we have them in cache.

###### Disadvantage

- For resources that should be highly up to date , we might return old versions that are still in the cache.

#### Cache Only

In this strategy the service worker intercepts requests , we then look at our cache and if response is found we return it to the page and totally ignore the network.

![Cache Only](/images/cache-only.svg)

```js
self.addEventListener("fetch", function (event) {
  event.respondWith(caches.match(event.request));
});
```

#### Network Only

In this strategy we don't use service workers instead the page sends request to network and we return response.

![Network Only](/images/network-only.svg)
![Network Only](/images/network-only.png)

```js
self.addEventListener("fetch", function (event) {
  event.respondWith(fetch(event.request));
});
```

#### Network with cache fallback

In this strategy we catch requests in service worker and then try to reach the network and if that fetch fails , in that case we reach out to the cache and return asset from the cache.

![Network with cache fallback](/images/network-with-cache-fallback.png)

```js
self.addEventListener("fetch", function (event) {
  event.respondWith(
    fetch(event.request).catch(function (error) {
      return caches.match(event.request);
    })
  );
});
```

###### Disadvantage

- In case of request timeout due to poor network we have to wait until the timeout to get response from cache which can be horrible user experience.

#### Cache then Network

In this strategy the idea is to get response from cache as fast as possible and then look for more up to date version from the network.

![Cache then Network](/images/cache-then-network.png)

```js
// we don't want to overwrite if network is fast than cache
let networkDataReceived = false;

fetch(url)
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    networkDataReceived = true;
    //From web
    console.log(data);
  });

if ("caches" in window) {
  caches
    .match(url)
    .then(function (response) {
      if (response) {
        return response.json();
      }
    })
    .then(function (data) {
      //From cache
      if (!networkDataReceived) {
        console.log(data);
      }
    });
}

//Now we save the response from network to the cache for future use
//sw.js
self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.open(CACHE_DYNAMIC_NAME).then(function (cache) {
      return fetch(event.request).then(function (response) {
        cache.put(event.request, response.clone());
        return response;
      });
    })
  );
});
```

#### Cache then Network with offline support

Here we combine multiple strategies together , one such example is using cache then network strategy with cache with network fallback.

We use cache then network strategy when we do have internet access and we want to get something on screen quickly.

We cannot use this strategy when we don't have internet access as we have to request the network and then also update the cache but we can't do it as we are offline.

```js
//we want to use cache then network strategy for url for which we also have code in normal javascript file.
self.addEventListener("fetch", function (event) {
  let url = "https://www.googleapis.com/";

  //cache then network
  if (event.request.url.indexOf(url) > -1) {
    event.respondWith(
      caches.open(CACHE_DYNAMIC_NAME).then(function (cache) {
        return fetch(event.request).then(function (response) {
          cache.put(event.request, response.clone());
          return response;
        });
      })
    );
  } else {
    //cache with network fallback
    event.respondWith(
      caches.match(event.request).then(function (response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        return fetch(event.request).then(function (response) {
          // Check if we received a valid response
          if (
            !response ||
            response.status !== 200 ||
            response.type !== "basic"
          ) {
            return response;
          }

          // IMPORTANT: Clone the response. A response is a stream
          // and because we want the browser to consume the response
          // as well as the cache consuming the response, we need
          // to clone it so we have two streams.
          var responseToCache = response.clone();

          caches.open(CACHE_NAME).then(function (cache) {
            cache.put(event.request, responseToCache);
          });

          return response;
        });
      })
    );
  }
});
```

#### Custom Cache Network Race Strategy

The following example is based on [cache-network-race](https://jakearchibald.com/2014/offline-cookbook/#cache--network-race) from the Offline Cookbook (which Workbox does not provide), but goes a step further and always updates the cache after a successful network request. This in an example of a more complex strategy that uses multiple actions.

**Note**: _workbox-strategies provides the most common caching strategies so it’s easy to apply them in your service worker._

![cache-network-race](/images/cache-network-race.svg)

```js
import { Strategy } from "workbox-strategies";

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then((response) => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        (results) => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === "rejected" &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

// The online cookbook
// Promise.race is no good to us because it rejects if
// a promise rejects before fulfilling. Let's make a proper
// race function:
function promiseAny(promises) {
  return new Promise((resolve, reject) => {
    // make sure promises are all promises
    promises = promises.map((p) => Promise.resolve(p));
    // resolve this promise as soon as one resolves
    promises.forEach((p) => p.then(resolve));
    // reject if all promises reject
    promises
      .reduce((a, b) => a.catch(() => b))
      .catch(() => reject(Error("All failed")));
  });
}

self.addEventListener("fetch", (event) => {
  event.respondWith(
    promiseAny([caches.match(event.request), fetch(event.request)])
  );
});
```

_References_ :

- [PWA The Complete Guide](https://www.udemy.com/course/progressive-web-app-pwa-the-complete-guide/) , Maximilian
- [developers.google.com](https://developers.google.com/web)
- [The Offline Cookbook](https://jakearchibald.com/2014/offline-cookbook/) - Jake
