Using the Cache API to cache Web pages without Service Workers

Question

I'm using the Cache API and I'm exploring how much I can do with it without having to use Service Workers.

I have two main use cases:

1. Loading cached assets when the user is offline
2. Reloading the page when the user is offline

---

For the first use case, I can cache images using the following 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!');
      });
  });
}

When I take the user offline, then I load the image into the DOM programmatically like so:

$('body').append('<img src="/img/first.png">');

The image appears on the page as expected. If I take out first.png 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.

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?

Note: 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.

Answer 1

This should work for you.

You can also read the property navigator.onLine [true/false]

When the connection is offline, the class is added to the body

The Service Worker is not necessary for this task

// We capture the events online - offline
// You can also: if (navigator.onLIne) {... }

window.addEventListener('online', function () {
  $('body').toggleClass('offline').append('<img src="/img/first.png">');
});
window.addEventListener('offline', function () {
  $('body').toggleClass('offline').append('<img src="/img/second.png">');
});