ServiceWorker

native app 可以做到离线使用、消息推送、后台自动更新，service worker 的出现正是为了使得 web app 也可以具有类似的能力。

Service Worker 可以：

后台消息传递
网络代理，转发请求，伪造响应
离线缓存
消息推送
...

生命周期

一个 service worker 要经历以下历程：

安装
激活，激活成功之后，打开chrome://inspect/#service-workers 可以查看当前运行的 service worker
监听 fetch 和 message 事件，下面两种事件会进行简要描述
销毁，是否销毁有浏览器决定，如果一个 service worker 长期不使用或者机器内存有限，则可能会销毁 worker

fetch 事件

在页面发起 http 请求时， service worker 可以通过 fetch 事件拦截请求，并且给出自己的响应。

W3C提供了一个新的 fetch api，用于取代 XMLHttpRequest ，与XMLHttpRequest 最大的不同有两点：

fetch() 方法返回的是 Promise 对象，通过then 方法进行连续调用，减少嵌套。 ES6 的 Promise 在成为标准之后，会越来越方便开发人员。
提供了 Request、Response 对象，如果做过后端开发，对 Request 、Response 应该比较熟悉。前端要发起请求可以通过 url 发起，也可以使用 Request 对象发起，而且 Request 可以复用。但是 Response 用在哪里呢？在service worker 出现之前，前端确实不会自己给自己发消息，但是有了 service worker，就可以在拦截请求之后根据需要返回自己的响应，对页面而言，这个普通的请求结果并没有区别，这是 Response 的一处应用。

/* 由于是get请求，直接把参数作为query string传递了 */
var URL = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=your_api_key&format=json&nojsoncallback=1&tags=penguins';

function fetchDemo() {
  // fetch(url, option)支持两个参数，option中可以设置header、body、method信息
  fetch(URL).then(function(response) {
    // 通过promise 对象获得相应内容，并且将响应内容按照json格式转成对象，json()方法调用之后返回的依然是promise对象
    // 也可以把内容转化成arraybuffer、blob对象
    return response.json();
  }).then(function(json) {
    // 渲染页面
    insertPhotos(json);
  });
}

fetchDemo();

fetch api 与 XMLHttpRequest 相比，更加简洁，并且提供的功能更全面，资源获取方式比ajax更优雅。兼容性方面：chrome 42开始支持，对于旧浏览器，可以通过官方维护的polyfill支持。

message 事件

页面和 service worker 之间可以通过posetMessage() 方法发送消息，发送的消息可以通过 message事件接收到。

这是一个双向的过程，页面可以发消息给service worker，service worker也可以发送消息给页面，由于这个特性，可以将service worker作为中间纽带，使得一个域名或者子域名下的多个页面可以自由通信。

这里是一个小的页面之间通信demo

问题1. 运行时间

service worker并不是一直在后台运行的。在页面关闭后，浏览器可以继续保持service worker运行，也可以关闭service worker，这取决与浏览器自己的行为。所以不要定义一些全局变量，

var hitCounter = 0;

this.addEventListener('fetch', function(event) {
  hitCounter++;
  event.respondWith(
    new Response('Hit number ' + hitCounter)
  );
});

返回的结果可能是没有规律的：1,2,1,2,1,1,2….，原因是hitCounter并没有一直存在，如果浏览器关闭了它，下次启动的时候hitCounter就赋值为0了

这样的事情导致调试代码困难，当你更新一个service worker以后，只有在打开新页面以后才可能使用新的service worker，在调试过程中经常等上一两分钟才会使用新的，比较抓狂。

问题2. 权限太大

当service worker监听fetch事件以后，对应的请求都会经过service worker。通过chrome的network工具，可以看到此类请求会标注：from service worker。如果service worker中出现了问题，会导致所有请求失败，包括普通的html文件。所以service worker的代码质量、容错性一定要很好才能保证web app正常运行。

PreviousAST抽象语法树 NextWebSocket

Last updated 4 years ago