title: Using the Cache API to cache Web pages without Service Workers
body: <p>I'm using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache" rel="noreferrer">Cache API</a> and I'm exploring how much I can do with it without having to use Service Workers.</p>
  
  <p>I have two main use cases:</p>
  
  <ol>
  <li>Loading cached assets when the user is offline</li>
  <li>Reloading the page when the user is offline</li>
  </ol>
  
  <hr>
  
  <p>For the first use case, I can cache images using the following code:</p>
  
  <pre><code>if('caches' in window) {
    caches.open('my-cache').then(function(cache_obj) { 
      cache_obj.addAll(['/', '/img/first.png', '/img/second.png'])
        .then(function() { 
          console.log('Cached!');
        });
    });
  }
  </code></pre>
  
  <p>When I take the user offline, then I load the image into the DOM programmatically like so:</p>
  
  <pre><code>$('body').append('&lt;img src="/img/first.png"&gt;');
  </code></pre>
  
  <p>The image appears on the page as expected. If I take out <code>first.png</code> from the list of cached images, and then repeat this, the image does not appear [because it is not cached]. So the Cache API works quite nicely for the first use case.</p>
  
  <p>However, I'm wondering if I can do the same thing for the second use case. Can I cache a full HTML page offline, and then have it reload when the user is offline, but without having to setup a service worker?</p>
  
  <p><strong>Note</strong>: I have a way I can do something very similar using localStorage/sessionStorage to cache the HTML content of the page and then intelligently load it into the current page when the user is offline [using offline.js detection], but I'm looking for a simpler approach using the Cache API.</p>