キャッシュAPIを使用してサービスワーカーなしでWebページをキャッシュする

Question

私はCache APIを使用しています。サービスワーカーを使用せずにどれだけのことができるか調べています。

私は2つの主な使用例があります。ユーザーは、ユーザーが最初のユースケースについては

---

オフラインのときにページをリロード

オフラインのときに

1. ロードは、資産のキャッシュされました次のコードを使用して画像をキャッシュすることができます：

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

   私は、ユーザーをオフラインにすると0

   は、その後、私はそうのようなプログラムでDOMにイメージをロードします：予想通り

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

   画像がページに表示されます。キャッシュされた画像のリストからfirst.pngを取り出してこれを繰り返すと、画像は[キャッシュされないため]表示されません。したがって、Cache APIは最初の使用例ではうまく動作します。

   しかし、2番目の使用例でも同じことができるかどうかは疑問です。完全なHTMLページをオフラインでキャッシュし、ユーザーがオフラインのときにリロードすることはできますが、サービスワーカーを設定する必要はありませんか？

   ノート：localStorage/sessionStorageを使用してページのHTMLコンテンツをキャッシュし、ユーザーがオフラインのときにインテリジェントにロードする方法[offline.js検出を使用する方法]、私はキャッシュAPIを使用して簡単なアプローチを探しています。

Answer 1

これはうまくいくはずです。

また、プロパティ[真/偽] navigator.onLineを読むことができます

接続が がオフライン、クラスが

サービスワーカーがある本文に追加されている

このタスクの

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