让用户选择更新 Service Worker
Let user choose to update Service Worker
是否可以让用户选择何时更新 Service Worker?
为什么?我想添加经济模式,这意味着用户可以选择节省大量带宽。当用户的限制几乎用完或 he/she 在国外使用昂贵的互联网时,这可能很有用。
那是因为如果Service Worker更新了,有新的资产版本,它会全部下载下来,可能有好几MB。如果您距离新月还有 3 天和 50MB,每一 MB 都很重要。
假设我可以从 localStorage 检索设置:
const economy = localStorage.getItem(economy) || false
如何让 Service Worker 知道它应该只在 economy 为真时更新自己?
我有点意识到这可能是一个长 运行(过时的版本)的问题,但如果 he/she 不想更新,我打算经常惹恼用户。我只是想添加选项供用户选择。
如果您愿意在 install
和 activate
事件之外处理 updating/deleting(可能只是一部分)缓存条目,您可以更灵活地决定何时处理它们应该被触发。实际上,您根本不必在 Service Worker 中执行更新,如果不这样做对您来说更容易的话。各个网页可以访问与给定来源的服务工作者使用的完全相同的 Cache Storage API 个实例。您可以直接从页面修改缓存以响应对您最有意义的任何操作,例如:
// Ensure we have access to the Cache Storage API.
if ('caches' in window) {
// Swap this out for whatever UI element will trigger the update.
const el = document.querySelector('#update-caches-button');
el.addEventListener('click', () => {
window.caches.open('my-cache').then(cache => {
// Add or delete entries from cache.
});
});
}
您可以做类似的事情,但将所有逻辑保留在服务工作者中,方法是使用客户端页面中的 postMessage()
触发服务工作者的 message
事件,然后更新缓存message
事件处理程序。
依靠 install
/activate
事件执行缓存管理有一些优势。特别是,您可以依靠 service worker 停留在 "waiting" state 中,而其他活动客户端依赖于先前的缓存状态,而不必担心丢弃其他那些需要的条目客户端或在资源仍在使用时将预期版本的资源换成新版本。但作为一名开发人员,最终您有责任了解缓存资源的使用方式,以及您在这些缓存中管理的资产是否不太可能在版本不匹配或某些内容被删除时引起问题一个选项卡稍后需要由另一个选项卡从网络中检索,然后您可以自由实施这种方法。
对于它的价值,我们在 sw-precache
. There's some background at https://github.com/GoogleChrome/sw-precache/issues/145 中实现 precaching/updates 时考虑了类似的问题,即尝试使用浏览器公开的标准信号来指示用户更喜欢保存数据,而不是每个人都想出自己的启发式方法。
是否可以让用户选择何时更新 Service Worker?
为什么?我想添加经济模式,这意味着用户可以选择节省大量带宽。当用户的限制几乎用完或 he/she 在国外使用昂贵的互联网时,这可能很有用。
那是因为如果Service Worker更新了,有新的资产版本,它会全部下载下来,可能有好几MB。如果您距离新月还有 3 天和 50MB,每一 MB 都很重要。
假设我可以从 localStorage 检索设置:
const economy = localStorage.getItem(economy) || false
如何让 Service Worker 知道它应该只在 economy 为真时更新自己?
我有点意识到这可能是一个长 运行(过时的版本)的问题,但如果 he/she 不想更新,我打算经常惹恼用户。我只是想添加选项供用户选择。
如果您愿意在 install
和 activate
事件之外处理 updating/deleting(可能只是一部分)缓存条目,您可以更灵活地决定何时处理它们应该被触发。实际上,您根本不必在 Service Worker 中执行更新,如果不这样做对您来说更容易的话。各个网页可以访问与给定来源的服务工作者使用的完全相同的 Cache Storage API 个实例。您可以直接从页面修改缓存以响应对您最有意义的任何操作,例如:
// Ensure we have access to the Cache Storage API.
if ('caches' in window) {
// Swap this out for whatever UI element will trigger the update.
const el = document.querySelector('#update-caches-button');
el.addEventListener('click', () => {
window.caches.open('my-cache').then(cache => {
// Add or delete entries from cache.
});
});
}
您可以做类似的事情,但将所有逻辑保留在服务工作者中,方法是使用客户端页面中的 postMessage()
触发服务工作者的 message
事件,然后更新缓存message
事件处理程序。
依靠 install
/activate
事件执行缓存管理有一些优势。特别是,您可以依靠 service worker 停留在 "waiting" state 中,而其他活动客户端依赖于先前的缓存状态,而不必担心丢弃其他那些需要的条目客户端或在资源仍在使用时将预期版本的资源换成新版本。但作为一名开发人员,最终您有责任了解缓存资源的使用方式,以及您在这些缓存中管理的资产是否不太可能在版本不匹配或某些内容被删除时引起问题一个选项卡稍后需要由另一个选项卡从网络中检索,然后您可以自由实施这种方法。
对于它的价值,我们在 sw-precache
. There's some background at https://github.com/GoogleChrome/sw-precache/issues/145 中实现 precaching/updates 时考虑了类似的问题,即尝试使用浏览器公开的标准信号来指示用户更喜欢保存数据,而不是每个人都想出自己的启发式方法。