Web 技术研究所

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

Service Worker 之 —— 概念与基本用法

  从 Firefox 33 开始就已经引入了 Service Worker,但它在 Firefox 上的具体的实现一直都是残废的。而 IE 呢我只想说「呵呵」。直到目前最新的稳定版 Chrome(40)才真正支持 Service Worker(其实也还有一堆坑没填)。总之我们是时候来摸一摸这玩意儿了!

Service Worker 是什么?

  我觉得 Service Worker 就是利用 Shared Worker 的概念来实现了个 HTTP 拦截器。HTTP 拦截器对于规范而言确实是个比较新的概念,但听名字就知道它是干什么用的了。Service Worker 类似提供了一个前端的 HTTP 服务器,我们可以注册一些 URL 让这些请求在 Service Worker 中处理并响应。

Service Worker 如何使用?

  它的接口对象是 navigator.serviceWorker,从这个对象上调用 register 就可以将一个 URL Scope 注册到一个 Service Worker 中。现在我有一个 worker.js 和一个 demo.html // worker.js
addEventListener("fetch",function(event){
  event.respondWith(new Response("Hello World"));
});
<!-- demo.html -->
<script>
navigator.serviceWorker.register("worker.js",{scope:"/xx/a.html"}).then(function(){
  // 注册成功执行下面代码
  var iframe=document.createElement("iframe");
  iframe.src="/xx/a.html";
  document.body.appendChild(iframe);
});
</script>

  服务器上并没有 /xx/a.html 这个文件,但 iframe 确实可以加载到,这是因为我们已经将这个 URL 注册下来让 worker.js 处理了。在 worker.js 中,当 fetch 事件触发时表示客户端在请求一个注册的资源,我们可以通过其事件对象的 respondWith 方法来响应一个资源。

Service Worker 的 API 设计理念

  Service Worker 是「 Promise 友好」的设计。比如上面例子中的 register 方法,它是一个异步方法,返回一个 Promise 对象,于是后续程序放在 then 的回调中执行。还有上面的 respondWith 方法,由于是演示同步返回,所以直接传入它需要的参数。然而它也能接受 Promise 对象,比如可以这么用 // worker.js
addEventListener("fetch",function(event){
  var promise=new Promise(function(resolve){
    setTimeout(function(){
      resolve(new Response("Hello World"));
    },1000);
  });
  event.respondWith(promise);
});
  这样一来,访问 /xx/a.html 将陷入等待,直到 1 秒钟后才响应内容。

用途?我不想说用途!

  很多文章中的介绍都把 Service Worker 和资源缓存关联上了,但它的用途显然远不止眼前看到的这些!比如它可以注册 URL 的话是不是就可以替代 History API 的部分功能呢?还有它是跨页面共享的,是不是可以替代 Shared Worker 的部分功能呢?这些都只是冰山一角,更多的用途还有待大家慢慢挖掘!那么说到了挖掘,究竟挖掘机技术哪家强呢?

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