Question

我正在使用Cache API，我正在探索在不使用服务工作者的情况下我能用它做多少。

我有两个主要用例：

在用户离线时加载缓存资产
用户离线时重新加载页面

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

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 detection]，但我正在寻找一种使用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">');
});

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

1 个答案: