gpt4 book ai didi

javascript - 我们应该如何以及何时写入 Service Worker 中的缓存?

转载 作者:行者123 更新时间:2023-11-29 16:10:58 25 4
gpt4 key购买 nike

  • 在不显式指定 urlsToCache 的情况下缓存来自应用的所有请求。所以我将在 fetch 事件下缓存内容。
  • 响应来自缓存的请求。
  • 获取成功后更新缓存。

最初,

this.addEventListener('fetch', function(event) {
var fetchReq = event.request.clone(),
cacheReq = event.request.clone();
event.respondWith(fetch(fetchReq).then(function(response) {
var resp = response.clone();
caches.open(CACHE_NAME).then(function(cache) {
req = event.request.clone();
cache.put(req, resp);
});
return response;
}).catch(function() {
return caches.match(cacheReq);
}));
});

离线情况处理得非常好。但这里的问题是连接速度慢。用户必须等到获取超时或抛出错误才能从缓存中获取响应。

self.addEventListener('fetch', function(event) {
var cacheRequest = event.request.clone();
event.respondWith(caches.match(cacheRequest).then(function(response) {
if(response) return response;
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(function(response) {
var responseToCache = response.clone();
caches.open(cache_name).then(function(cache) {
var cacheSaveRequest = event.request.clone();
cache.put(cacheSaveRequest, responseToCache);
});
return response;
});
}));
});

在缓存优先的情况下,服务的响应很好。但这里的问题是,当代码更新时。当更新通过 sw 提供的 /public/main.css 时,在页面重新加载时仅提供缓存,不提供更新的内容。

我还尝试将 cache_name 从 cache-v1 修改为 cache-v2(以便存在 sw 二进制差异并更新 sw 并且可以清除旧缓存) ,并在 activate 事件上清除了 cache-v1。但这引发了新的问题,即两个 service worker 在同一 Registration ID 下同时运行。有关更多信息,请参见其他 SO 问题:How to stop older service workers?

最佳答案

两个服务 worker 同时运行在技术上不是问题——它按设计工作。 (请参阅我对 How to stop older service workers? 的回答)确保关闭其他可能激活了旧版本服务 worker 的选项卡。

您在这里遇到了不同缓存与网络场景之间不可避免的权衡。如果您还没有通读 the offline cookbook ,在尝试确定哪种缓存策略最适合您的特定资源时,这是一个很好的起点。

关于javascript - 我们应该如何以及何时写入 Service Worker 中的缓存?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28069926/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com