Question

当服务器关闭时，是否可以显示我网站的离线缓存？

我可以找到关于脱机页面的所有示例都与客户端脱机有关。如果无法访问服务器，我需要向用户显示我的网站的缓存版本。

我已经读过HMTL 5中的Cache Manifest，但它已被删除，导致许多问题。

如果不使用任何其他负载均衡服务器，可以做些什么呢？

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

P.S。使用Fetch API似乎比实现旧的和令人讨厌的XMLHttpRequest更好。

无法访问服务器时显示脱机缓存

1 个答案: