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