How can I list my blog posts already stored in the browser cache by a Service Worker?

Question

My blog already has a working Service Worker that caches recent posts, and let users read even when they are offline.

On the offline page that is shown for content not available in the cache, I would like to list the recent posts that ARE in the cache, to give the user an opportunity to read them while offline.

Is there an easy way to list such content when in a standard window context, instead of a Service Worker one?

I can't find any tutorial for this. All the tutorials I find only deal with the Service Worker part.

Thanks.

Answer 1

In addition to being available in Workers, the Cache Storage API is also available as part of the window global scope, as window.caches.

Here's an exerpt from a full example of using that interface to get a list of all cache contents:

window.caches.keys().then(function(cacheNames) {
  cacheNames.forEach(function(cacheName) {
    window.caches.open(cacheName).then(function(cache) {
      return cache.keys();
    }).then(function(requests) {
      requests.forEach(function(request) {
        // Do something with request, like update your UI
        // based on request.url.
      });
    });
  });
});