サーバへの接続がない場合のキャッシュからの返信

Question

サービスワーカーの助けを借りて、サーバーへの接続がない場合はキャッシュからの応答を返したいと思います。次に、キャッシュに正しい応答がない場合、カスタム応答を返すようにします。

今のところ、私はこのコードを持っている：

this.addEventListener('fetch', function (event) { 
    event.respondWith(
     timeout(5000, fetch(event.request)).catch(function() { 
      return caches.match(event.request); 
     }) 
    ); 
}); 

は、私はこのような何かがしたい：

this.addEventListener('fetch', function (event) { 
    event.respondWith(
     timeout(5000, fetch(event.request)).catch(function() { 
      caches.match(event.request).then(function(cacheResponse) { 
       return cacheResponse; 
      }).catch(function() { 
       return new Response('No cache found'); 
      }) 
     }) 
    ); 
}); 

またはより良いが

this.addEventListener('fetch', function (event) { 
    event.respondWith(
     timeout(5000, fetch(event.request)).catch(function() { 
      caches.match(event.request).then(function(cacheResponse) { 
       return cacheResponse; 
      }).catch(function() { 
       return caches.match(offlineMessageUrl); 
      }) 
     }) 
    ); 
}); 

だろうが、そうではありませんワーキング。

Answer 1

Cache.match関数のドキュメントから、約束は常に解決されます。 Responseオブジェクトで解決されます。一致しない場合はundefinedで解決されます。あなたはこれを試すことができます： -

this.addEventListener('fetch', function (event) { 
     event.respondWith(
      caches.match(event.request).then(function(cacheResponse) { 
       return cacheResponse || new Response('No cache found'); 
      }).catch(function() { 
       return new Response('No cache found'); 
      }) 
     ); 
    });