Javascript 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

？这可能吗

---

更新：

我读过杰克·阿奇博尔德（Jake Archibald）的离线烹饪书，他在书中谈到了这一点，这正是我想要做的，但似乎你需要在你打电话的任何地方添加代码，在那里你需要这种“缓存然后网络”服务

我希望有一种方法可以直接从服务人员那里实现这一点，尽管我不确定这是否可行，因为一旦您返回缓存数据，您怎么还可以返回fetch数据而不从页面再次发出完全相同的请求呢

---

谢谢你的帮助

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

例如，您可以使用或将消息从SW发送到包含新数据的页面。基本上，您可以使用Fetch API从页面请求某些内容，然后从SW返回缓存数据，同时启动网络请求，然后使用SW从网络接收到的任何内容刷新缓存，最后，如果响应是新的内容，则通过PostMessage通知页面：“嘿，有一个新版本可用，在这里使用：{data}”

然而，这可能不会比你在离线烹饪书中看到的更好，实际上可能会让你编写更多的代码。你可能需要管理来自软件的消息（使用新数据），并跟踪页面上要更新的数据等

如果我理解正确，我会怎么做：在一个函数中概括离线烹饪书的思想，这个函数可以用来代替简单的Fetch请求，并让它返回一个承诺。阅读代码并用customFetch（）替换Fetch（）调用应该相当简单调用并将所有缓存API/SW逻辑保留在其他地方。

可能存在的重复