服務人員提取

我正在使用服務工作人員進行脫機工作。所以對於每個提取請求，我將它存儲在緩存中。服務人員提取

現在，我希望服務人員提出請求，並在下次存儲它。問題是當我使用fetch(myUrl).then...時，服務工作者中的Fetch Listener 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

}）;

來源

2017-10-06 Gugu

你確定你的服務人員註冊呢？ –

因爲我不能發表評論我要得到任何具體細節和你的代碼似乎我的權利，我的猜測是：

您服務工作者沒有註冊，或跑步。你可以確定它是通過檢查你的檢查員的應用程序選項卡來運行的。它應該看起來像下面這樣：

你認爲它沒有工作，因爲沒有被記錄到控制檯的消息。服務工作人員在與您的頁面不同的環境中運行，因此這些消息將記錄到不同的控制檯，您可以通過單擊上圖中的檢查按鈕來檢查該控制檯。

來源

2017-10-06 15:05:17

我確實檢查了服務人員。對於每個新的請求，我都會寫入控制檯。然後我運行一個函數，即提取。我在控制檯中得到它的結果，但我沒有從提取監聽器獲取控制檯消息。 – Gugu

你能提供記錄消息的截圖嗎？ –

緩存則網絡策略可能是你在找什麼：

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);

來源

2017-10-06 17:22:42

服務人員提取

回答

相關問題