Show offline cache when server is unreachable

Question

Is it possible to show an offline cache of my website when the server is down?

All the examples I can find regarding offline pages has to do with the client being offline. What I need is to show the user a cached version of my site if the server can't be reached.

I've read about the Cache Manifest in HMTL 5 but it's getting removed and it causes to many problems.

What can be done without using any other loadbalancing servers and such?

Have you looked into [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)? — evolutionxbox, Nov 13 '17 at 10:23
How would that work if the server can't be reached? I would still need to have some javascript loaded somewhere in a cache? Or maybe you were thinking of using it in combination with Cache Manifest? — vato, Nov 13 '17 at 10:30
Using serviceworkers you can cache resources an data. Look at https://stackoverflow.com/a/28483715/1203628 — pdorgambide, Nov 13 '17 at 10:39
Look up tutorials on service workers. They are JS scripts which, once "installed" will can serve assets when a server is unreachable. — evolutionxbox, Nov 13 '17 at 10:39

Julius Dzidzevičius · Accepted Answer · 2017-11-13T13:03:06.073

I recently learned that with Fetch API and service workers its dead simple:

First, you register the Service worker:

  if (!navigator.serviceWorker) return;

  navigator.serviceWorker.register('/sw.js')

Then configure it to cache whats needed:

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function(cache) {
      return cache.addAll([
        '/',
        'js/main.js',
        'css/main.css',
        'imgs/icon.png',      
      ]);
    })
  );
});

And use Fetch API to get cached peaces if no response from the call:

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

if need to get cached version only if server is down, try something like:

self.addEventListener('fetch', function(event) {
  event.respondWith(
    return fetch(event.request).then(function(response) {
     if (response.status !== 200) {        
       caches.match(event.request).then(function(response) {
         return response;
       }).catch(function(error) {
         console.error('Fetching failed:', error);
         throw error;
      });
    })
  );
});

p.s. using Fetch API seems much nicer way than implementing old and nasty XMLHttpRequest.

Show offline cache when server is unreachable

1 Answers1