How do i cache api in reactjs Progressive Web App(Pwa) to add Offline support?

Question

I have registered my service worker by adding serviceWorker.register(); in my code.In create-react-app Api results are not cached.How do we cache Api result so we counld improve Offline support.

Answer 1

you can cache the network responses and can be served from it as below

window.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('your-app').then(function(cache) {
      return cache.match(event.request).then(function (response) {
        return response || fetch(event.request).then(function(response) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

resource