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:

Loading cached assets when the user is offline
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.

Possible duplicate of How to use window.caches to save pages from window object? — Jeff Posnick
– Jeff Posnick, Commented Jun 12, 2017 at 14:09
@JeffPosnick Thanks. I guess this means the second use-case is not possible? — ObiHill
– ObiHill, Commented Jun 15, 2017 at 19:31
You need a service worker to handle the navigation request to a given page while offline. — Jeff Posnick
– Jeff Posnick, Commented Jun 15, 2017 at 21:37

Alfredo González Portero · Accepted Answer · 2017-12-30 01:10:39Z

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">');
});

answered Dec 30, 2017 at 1:10

Alfredo González Portero

792 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using the Cache API to cache Web pages without Service Workers

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related