Показывать автономный кеш, когда сервер недоступен

Question

Можно ли показать автономный кеш моего сайта, когда сервер не работает?

Все примеры, которые я могу найти относительно автономных страниц, связаны с тем, что клиент находится в автономном режиме. Мне нужно показать пользователю кэшированную версию моего сайта, если сервер недоступен.

Я читал о манифесте кэша в HMTL 5, но он удаляется и вызывает много проблем.

Что можно сделать без использования других серверов балансировки нагрузки и тому подобного?

Answer 1

Недавно я узнал, что с Fetch API и сервисными работниками все просто.

Сначала вы регистрируете работника сервиса:

  if (!navigator.serviceWorker) return;

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

Затем настройте его для кеширования того, что необходимо:

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

И используйте Fetch API для получения кэшированных блоков, если нет ответа на вызов:

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

если нужно получить кэшированную версию, только если сервер не работает, попробуйте что-то вроде:

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

PS использование Fetch API кажется гораздо более приятным способом, чем реализация старого и неприятного XMLHttpRequest.