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

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

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”，在结果中配置禁用即可。

前端也可以使用 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();
          }
      }
  });
}

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

以上，希望对大家有用！

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

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