Register service worker after hard refresh(硬刷新后注册服务工作者)
本文介绍了硬刷新后注册服务工作者的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
只要在硬刷新后(例如,对于Chrome,Ctrl + F5)重新加载包含服务工作者的Web应用程序,服务工作者之后就无法注册。
根据W3C
的文档注意:如果请求的值为 是强制刷新(Shift+刷新)。返回的ServiceWorker对象 从该属性中,表示同一服务工作者的getter是 相同的对象。
因此,问题是:是否真的不可能在执行硬刷新后立即注册服务工作者?我正在使用navigator.serviceWorker.controller检查服务人员是否存在。请参阅所附的GIF,其中显示了与https://googlechrome.github.io/samples/service-worker/basic/页的交互
推荐答案
使服务工作人员即使在硬重新加载后也能工作的解决方案是通过以下代码片段取消注册和注册服务工作人员脚本。
if ('serviceWorker' in navigator) {
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.getRegistration(navigator.serviceWorker.controller.scriptURL).then(function (sw) {
if (sw) {
sw.unregister().then(() => {
navigator.serviceWorker.register('service-worker.js');
});
}
});
} else {
const url = window.location.protocol + '//' + window.location.host + '/service-worker.js';
navigator.serviceWorker.getRegistration(url).then(function (sw) {
if (sw) {
sw.unregister().then(() => {
navigator.serviceWorker.register('service-worker.js');
});
}
});
}
}
这篇关于硬刷新后注册服务工作者的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
编程基础网
本文标题为:硬刷新后注册服务工作者
基础教程推荐
猜你喜欢
- 带角度的选项卡:仅使用 $http 在单击时加载选项卡 2022-01-01
- 从快速中间件中排除路由 2022-01-01
- 最佳动态 JavaScript/JQuery 网格 2022-01-01
- 在 Javascript 中使用 Fetch API 上传文件并显示进度 2022-01-01
- 当木偶师打开Chrome时,不能使用Chrome扩展 2022-01-01
- 即使每次插入第一个输入的值不同,第二个输入仍显示相同的输入值 2022-01-01
- 使用 jQuery 在悬停时交换 DIV 类 2022-01-01
- CORS:当凭据标志为真时,无法在 Access-Control-Allow-Origin 中使用通配符 2022-01-01
- 逻辑运算符 ||在 javascript 中,0 代表 Boolean false? 2022-01-01
- HTML5 画布调整为父级 2022-01-01
