使用缓存API在没有Service Workers的情况下缓存网页

Question

我正在使用Cache API，并且我正在探索不需要使用Service Workers情况下的API应用。

我有两个主要用例：

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更简单的方法。

- ObiHill

---

可能是如何使用window.caches从window对象保存页面？的重复问题。 - Jeff Posnick

@JeffPosnick 谢谢。我猜这意味着第二种用例不可能？ - ObiHill

你需要一个服务工作者来处理离线时对给定页面的导航请求。 - Jeff Posnick

@JeffPosnick 谢谢。我真的希望它能有所不同。 - ObiHill

Answer 1

这对您应该有效。

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

当连接处于离线状态时，该类被添加到 body。

这项任务并不需要 Service Worker。

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

- Alfredo González Portero