title: How to make the Service Worker cache data from API and update the cache when needed
body: <p>I transformed my React application into a PWA and it is working partially fine.</p>
  <p>I followed this tutorial: <a href="https://medium.com/@toricpope/transform-a-react-app-into-a-progressive-web-app-pwa-dea336bd96e6" rel="noreferrer">https://medium.com/@toricpope/transform-a-react-app-into-a-progressive-web-app-pwa-dea336bd96e6</a></p>
  <p>However this article only shows how to cache static data and I also need to store data stemming from the server, I could do this following the instruction of the first answer of this post: <a href="https://stackoverflow.com/questions/57708328/how-can-i-cache-data-from-api-to-cache-storage-in-react-pwa">How can I cache data from API to Cache Storage in React PWA?</a> and inserting the firebase adresses where the data is stored into the array <code>urlsToCache</code>, populated by the files that should be stored into the cache.</p>
  <p>So far so good, however after the data be stored into the cache, the application stops fetching data from the server and loads the page only with data from the cache, even if the server is updated. This is what I need to fix.</p>
  <p>In short, I need to fetch the data from the server, store it into the cache in order to use it when the application is offline and update the cache every time the server is reached.</p>
  <p>I am trying to follow this guide, but without success: <a href="https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#serving-suggestions" rel="noreferrer">https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#serving-suggestions</a></p>
  <p>This is my worker.js file:</p>
  <pre><code>var CACHE_NAME = 'pwa-task-manager';
  var urlsToCache = [
    '/',
    '/completed',
    '/index.html',
    '/static/js/main.chunk.js',
    '/static/js/0.chunk.js',
    '/static/js/1.chunk.js',
    '/static/js/bundle.js',
    '/calculadora',
    'https://calc-marmo.firebaseio.com/clientes.json',
    'https://calc-marmo.firebaseio.com/adm.json',
  ];
  
  // Install a service worker
  self.addEventListener('install', event =&gt; {
    // Perform install steps
    event.waitUntil(
      caches.open(CACHE_NAME)
        .then(function(cache) {
          console.log('Opened cache');
          return cache.addAll(urlsToCache);
        })
    );
  });
  
  // Cache and return requests
  self.addEventListener('fetch', event =&gt; {
    event.respondWith(
      caches.match(event.request)
        .then(function(response) {
          // Cache hit - return response
          if (response) {
            return response;
          }
          return fetch(event.request);
        }
      )
    );
  });
  
  // Update a service worker
  self.addEventListener('activate', event =&gt; {
    var cacheWhitelist = ['pwa-task-manager'];
    event.waitUntil(
      caches.keys().then(cacheNames =&gt; {
        return Promise.all(
          cacheNames.map(cacheName =&gt; {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });
  </code></pre>
  <p>Any help would be much appreciated.</p>