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：第一返回缓存的响应，并获取响应异步

回答

相关问题