ServiceWorkers：首先返回缓存的响应并异步获取响应答案

【问题标题】：ServiceWorkers: Return cached response first and fetch response asyncServiceWorkers：首先返回缓存的响应并异步获取响应
【发布时间】：2018-02-11 00:43:03
【问题描述】：

我想用我的服务人员缓存易失性数据。我的想法是首先返回可能陈旧的缓存匹配，同时触发获取请求并在获取成功时返回该数据。

这是我为要缓存的非易失性数据运行的代码：

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？这可能吗？

更新：

我已经阅读了 Jake Archibald 的离线食谱，他在其中谈到了 cache then network，这正是我想要做的，但看起来你需要在任何你想要这个“缓存”的地方添加代码网络服务。

我希望有一种方法可以直接从服务工作者那里执行此操作，但我不确定这是否可能，因为一旦您返回缓存数据，您如何在不发出完全相同的请求的情况下也返回获取数据再次从页面？

感谢您的帮助！

【问题讨论】：

Service Worker get from cache then update cache的可能重复

标签： javascript caching web service-worker

【解决方案1】：

据我所知，不可能从 SW 向页面返回两个响应。

例如，您可以使用PostMessage 或Broadcast Channel APIs 将消息从SW 发送到包含新数据的页面。基本上你会使用 Fetch API 从页面请求一些东西，然后从 SW 返回缓存的数据，同时发起一个网络请求，然后用 SW 从网络接收到的任何东西刷新缓存，最后如果响应是什么新的，通过 PostMessage 通知页面“嘿，有一个新版本可用，把它放在这里：{ data }”。

但是，这可能并不比您在离线食谱中看到的更好，并且实际上可以让您编写更多代码。您可能需要以某种方式管理来自 SW 的消息（使用新数据）并跟踪页面上要更新的数据等。

如果我理解正确，我会怎么做： 将 Offline Cookbook 的想法概括为一个可用于代替简单 Fetch 请求的函数，并使其返回一个 Promise。浏览代码并将 fetch() 调用替换为 customFetch() 调用并将所有 Caches API/SW 逻辑保留在其他地方应该相当简单。

【讨论】：