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

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();
          }
      }
  });
}

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

以上，希望对大家有用！

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