title: Progressive web app using Service Worker: How to cache only static (non database dependent) parts of a page?
body: <p>I have a web app (PHP/Laravel) that needs to work offline. The app is used to manage a number of people I'll call <em>clients</em>. My question concerns a page consisting of not much more than a table listing all our clients. Path is <code>/clients</code>.</p>
  
  <p>Synchronization between MySQL (on server) and Indexed DB (for offline use) is working well, now I have to cache the static HTML of that page. My current approach caches the whole page <em>including client data from the server</em>. However, I don't want any data from MySQL in the cache, because when I'm offline, I get all the data from Indexed DB.</p>
  
  <p>This is my simplified <code>offline-worker.js</code>:</p>
  
  <pre><code>var CACHE_NAME = 'app-cache';
  
  var urlsToCache = [
    '/clients'
  ];
  
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/offline-worker.js');
  }
  
  self.addEventListener('install', function(evt) {
    evt.waitUntil(
      caches.open(CACHE_NAME)
        .then(function(cache) {
          return cache.addAll(urlsToCache);
      })
    )
  });
  
  self.addEventListener('fetch', function(evt) {
    evt.respondWith(
      caches.match(evt.request)
        .then(function(response) {
  
          if (response)
            return response;
  
          var fetchRequest = evt.request.clone();
  
          return fetch(fetchRequest).then(
            function(response) {
              if (!response || response.status != 200 || response.type != 'basic')
                return response;
  
              var responseToCache = response.clone();
  
              caches.open(CACHE_NAME)
                .then(function(cache) {
                  cache.put(evt.request, responseToCache);
                });
              return response;
            }
          );
        })
    )
  });
  </code></pre>
  
  <p>Right now, I'd remove the data as soon as the browser detects it's offline, but I'd rather cache a 'clean' version/template of that page from the beginning. This is a totally simplified version of <code>/clients</code>:</p>
  
  <pre><code>&lt;h1&gt;Our clients&lt;/h1&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Charles&lt;/td&gt;
      &lt;td&gt;Chaplin&lt;/td&gt;
    &lt;/tr&gt;
    &lt;!-- Imagine many more rows of server generated data here. 
         I'd like to get rid of all rows before caching. --&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What's the best way to cache <code>/clients</code> without any data from MySQL? I'm aware of the fact that the browser can't see what page elements come from a server database and which ones are static.</p>
  
  <p>If I have to manually set up an offline version, that's fine. I just need to know how to tell the browser to use the offline version when there's no internet connection.</p>