使用Cache API在没有Service Workers的情况下缓存Web页面

Question

我正在使用Cache API ，我正在探索我可以用它做多少而不必使用Service Worker。

我有两个主要用例：

1. 在用户脱机时加载缓存资产
2. 用户离线时重新加载页面

---

对于第一个用例，我可以使用以下代码缓存图像：

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

当我将用户脱机时，我会以编程方式将图像加载到DOM中，如下所示：

$('body').append('<img src="/img/first.png">');

图像按预期显示在页面上。 如果我从缓存图像列表中取出first.png ，然后重复此操作，则图像不会出现[因为它没有缓存]。 因此，Cache API对于第一个用例非常有效。

但是，我想知道我是否可以为第二个用例做同样的事情。 我可以离线缓存完整的HTML页面，然后在用户离线时重新加载，但无需设置服务工作者吗？

注意 ：我有一种方法可以使用localStorage / sessionStorage来缓存页面的HTML内容，然后在用户离线时智能地将其加载到当前页面[使用offline.js检测]，但我是使用Cache API寻找更简单的方法。

Answer 1

这应该适合你。

您还可以阅读属性navigator.onLine [true / false]

当连接脱机时 ，该类将添加到正文中

此任务不需要服务工作者

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