禁用 service-workers.js 浏览器离线缓存教程

HTML5 herman 618浏览
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:codedq,发送下载链接帮助你免费下载!
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:codedq,之前的微信号好友位已满,备注:返现
饿了么大量招人,我内推!Java 方向!薪资不设上限,工作年龄不限!工作地点限魔都,可电话面试!简历,发我微信:codedq
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

service worker 是现代浏览器的一个高级特性,Firefox、Chrome、Opera 都支持它。

service worker 只支持 https,能够让我们进行离线浏览网页。如果使用不当,用户会有非常糟糕的体验。

最近我们公司的前端,由于学艺不精,使用 serviceWorker 导致了大量用户的吐槽。所以,我这里分享一下,如何通过浏览器禁用 serviceWorker。

  • Firefox Nightly: 访问 about:config 并设置 dom.serviceWorkers.enabled 的值为 false; 重启浏览器;
  • Chrome Canary: 访问 chrome://flags 并禁用 experimental-web-platform-features; 重启浏览器 (注意:有些特性在Chrome中没有默认开放支持);
  • Opera: 访问 opera://flags 并关闭 ServiceWorker 的支持; 重启浏览器。

以 Chrome 为例,打开 chrome://flags/,搜索”web-platform”,在结果中配置禁用即可。

禁用 ServiceWorker

前端也可以使用 registration.unregister(); 函数把当前网页的网站剔除 serviceWorker。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations()
    .then(function(registrations) {
  		for(let registration of registrations) {
          //安装在网页的service worker不止一个,找到我们的那个并删除
          if(registration && registration.scope === 'https://www.xttblog.com/'){
              registration.unregister();
          }
      }
  });
}

也可以通过开发者模式禁用。

开发者模式禁用 ServiceWorker

以上,希望对大家有用!

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号1:xmtxtt(5000人已满),微信号2:xttblog(5000人已满),微信号3:codedq(超3800)。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

本文原文出处:业余草: » 禁用 service-workers.js 浏览器离线缓存教程