Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Service Worker 之 —— 注销与调试

  早期的版本中在 navigator.serviceWorker 是有 unregister 方法的,后来由于一些设计逻辑的问题移除了。现在若想要取消一个 Service Worker 的注册可以通过 registration 对象上的 unregister 方法来注销。而 registration 对象可以通过 getRegistration 方法取得。

如何注销一个 Service Worker?

  虽然这个过程有点绕,但这么做确实是有效的。下面是一个示例 <!-- demo.html -->
<button id="register">register</button>
<button id="unregister">unregister</button>
<hr/>
<iframe id="iframe" src="/xx/a.html"></iframe>
<script>
register.onclick=function(){
  navigator.serviceWorker.register("/worker.js",{scope:"/xx/a.html"}).then(function(){
    iframe.src=iframe.src;
  });
};
unregister.onclick=function(){
  navigator.serviceWorker.getRegistration("/xx/a.html").then(function(e){
    e.unregister();
    iframe.src=iframe.src;
  });
};
</script>
// worker.js
addEventListener("fetch",function(event){
  event.respondWith(new Response("Hello World"));
});

Service Worker 调试工具

  其实关于调试工具很多文章都有介绍,那就是 Chrome 自带的 chrome://inspect/#service-workers

  在上面可以看到运行中的 Service Worker,并且可以在某个 Service Worker 的 inspect 中浏览甚至操作其控制台。

  但它也有很多坑!比如虽然这个工具页面上写着 terminate,可是点击并不会真正关闭这个 Service Worker(重现环境 Chrome40@Yosemite10.10)。调试的时候总是需要自己手动关闭 Service Worker,所以我才在此篇中把注销的代码都搬出来了。另外还有一个隐身模式的坑,隐身模式下 chrome://inspect/#service-workers 页面看到的东西依然是非隐身模式的,这应该也是个 BUG。

调试与悲伤

  这个工具实在是难用到爆了,不过确实目前也找不到更好的,就凑合着用吧。其实这也挺正常的,毕竟整套 Service Worker 规范还处于 WD 的状态。现在的注销方式是上面的代码中那样没错,可也许过半年就完全变样了。突然感觉比追新番还累。。

网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^