ServiceWorkers：第一返回緩存的響應，並獲取響應異步

，我想用我的服務人員來緩存數據的波動。我的想法是首先返回可能過時的緩存匹配，並且同時啓動獲取請求並在獲取成功時返回該數據。ServiceWorkers：第一返回緩存的響應，並獲取響應異步

這是我在競選非易失性數據的代碼，我想緩存：

return e.respondWith(
    caches.match(request.url).then(function(cacheResponse) { 
     // Found it in the cache 
     if (cacheResponse) { 
      console.log('[ServiceWorker] Found it in Cache') 
      return cacheResponse 
     // Not in the cache 
     } else { 
      console.log('[ServiceWorker] Not in Cache') 
      return fetch(request).then(function(fetchResponse) { 
       console.log('[ServiceWorker] Fetched from API', fetchResponse) 
       // don't cache errors 
       if (!(fetchResponse && fetchResponse.status === 200)) { 
        console.log('[ServiceWorker] Fetch error, no cache') 
        return fetchResponse 
       } 
       return caches.open(cacheName).then(function(cache) { 
        cache.put(request.url, fetchResponse.clone()) 
        console.log('[ServiceWorker] Fetched and Cached Data', request.url) 
        return fetchResponse 
       }) 
      }) 
     } 
    }) 
)

我怎麼會同時返回cachedResponse和fetchResponse異步？這可能嗎？

UPDATE：

我讀過傑克阿奇博爾德的離線食譜，其中他談到cache then network，這是我想要做什麼，但似乎你需要到處添加代碼你在你想要這個'緩存然後網絡'服務的地方撥打電話。

我希望有一種方法可以直接從服務人員那裏做到這一點，儘管我不確定這是可能的，因爲一旦你使用緩存數據返回，你怎麼也可以返回提取數據而不會完全相同從頁面再次請求？

感謝您的幫助！

來源

2017-09-01 jacoballenwood

的可能的複製[服務人員從緩存中獲取然後更新緩存（https://stackoverflow.com/questions/41574723/service-worker-get-from-cache-then-update-cache） –

這是不可能爲據我所知從SW返回頁面兩種反應。

例如，您可以執行的操作是使用PostMessage或Broadcast Channel API s從SW向包含新數據的頁面發送消息。基本上你會從頁面使用提取API，然後從SW返回緩存的數據，並在同一時間發起網絡請求獲得某些東西，然後刷新與任何從網絡接收到的SW緩存，最後如果反應是什麼新的，通過PostMessage通知頁面「嘿，有一個新版本可用，在這裏：{數據}」。

然而，這可能不會比你在離線食譜看到了更好的，實際上可以讓你寫更多的代碼。您需要管理SW中的消息（使用新數據），並跟蹤頁面上要更新的數據等。

如果我理解正確，我會做什麼：概括了離線烹飪書的主意在一個可以使用的函數中，而不是簡單的獲取請求，並使其返回一個Promise。通過代碼並使用customFetch（）調用替換fetch（）調用並將所有Caches API/SW邏輯保留在其他位置應該相當簡單。

來源

2017-09-03 16:06:24 pate

ServiceWorkers：第一返回緩存的響應，並獲取響應異步

回答

相關問題