サービスワーカー

Question

オフライン作業のためにサービスワーカーを使用しています。したがって、各フェッチ要求に対して、私はキャッシュにそれを格納します。

今、 サービスワーカーがリクエストして次回も保存することをお勧めします。 問題は、fetch(myUrl).then...を使用すると、サービスワーカーのフェッチリスナーself.addEventListener('fetch', function(e)...がそれをキャッチしないということです。

私はコードを複製したくありません..任意のアイデア？

フェッチリスナーがある：

self.addEventListener（ 'フェッチ'、関数（E）{

// e.respondWidth Responds to the fetch event 
e.respondWith(

    // Check in cache for the request being made 
    caches.match(e.request) 
     .then(function(response) { 

      // If the request is in the cache 
      if (response) { 
       console.log("[ServiceWorker] Found in Cache", e.request.url, response); 
       // Return the cached version 
       return response; 
      } 

      // If the request is NOT in the cache, fetch and cache 

      var requestClone = e.request.clone(); 
      return fetch(requestClone) 
       .then(function(response) { 

        if (!response) { 
         console.log("[ServiceWorker] No response from fetch ") 
         return response; 
        } 

        var responseClone = response.clone(); 

        // Open the cache 
        caches.open(cacheName).then(function(cache) { 

         // Put the fetched response in the cache 
         cache.put(e.request, responseClone); 
         console.log('[ServiceWorker] New Data Cached', e.request.url); 

         // Return the response 
         return response; 

        }); // end caches.open 
        // returns the fresh response (not cached..) 
        return response; 

       }) 
       .catch(function(err) { 
        console.log('[ServiceWorker] Error Fetching & Caching New Data', err); 
       }); 


     }) // end caches.match(e.request) 
     .catch(function(e){ 
      // this is - if we still dont have this in the cache !!! 
      console.log("[ServiceWorker] ERROR WITH THIS MATCH !!!",e, arguments) 
     })// enf of caches.match 
); // end e.respondWith 

}）。

Answer 1

私は、任意の特定の詳細や、あなたのコードを取得するコメントカントので、右に私には思われる、私の推測では、次のとおりです。

• あなたのサービス労働者が登録、または実行されていません。インスペクタのアプリケーションタブをチェックして実行中であることを確認できます。それは次のようになります。

• あなたはそれが原因でコンソールに記録されていないメッセージの動作していないと仮定します。 サービスワーカーはページとは異なる環境で動作するため、メッセージは上の画像のinspectボタンをクリックして確認できる別のコンソールに記録されます。

Answer 2

キャッシュは、[ネットワーク戦略は、あなたが探しているものはおそらくです：

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network

var networkDataReceived = false; 

startSpinner(); 

// fetch fresh data 
var networkUpdate = fetch('/data.json').then(function(response) { 
    return response.json(); 
}).then(function(data) { 
    networkDataReceived = true; 
    updatePage(); 
}); 

// fetch cached data 
caches.match('/data.json').then(function(response) { 
    if (!response) throw Error("No data"); 
    return response.json(); 
}).then(function(data) { 
    // don't overwrite newer network data 
    if (!networkDataReceived) { 
    updatePage(data); 
    } 
}).catch(function() { 
    // we didn't get cached data, the network is our last hope: 
    return networkUpdate; 
}).catch(showErrorMessage).then(stopSpinner);