定义：

     Service worke 是一个浏览器提供的独立线程，独立于当前网页的进程，在js主线程注册完之后，，开发者可以用编程的方式自己控制关联的页面，拦截并修改访问和资源请求，不局限于图片，甚至是ajax请求等，细粒度地缓存资源

作用特点

    1.Sevice Worker是独立于页面的一个线程，独立的生命周期，不随着页面的销毁而销毁。

    2.劫持网页 http 请求，若 url 命中预设规则，则转发至 mock server，实现请求预加载。

 

调试 Service Worker

地址栏输入：chrome://inspect/#service-workers

　　

Service Worker 日志查看

地址栏输入：chrome://serviceworker-internals

　　

      

实践

   页面通信

// app.js

// 加载sw.js这个service worker
navigator.serviceWorker.register('./sw.js')
.then(reg => {
  console.log('SW registered!', reg)
})
.catch(err => console.log('Boo!', err));

// 监听service worker发送过来的消息
navigator.serviceWorker.addEventListener('message', function (event) {
	console.log('Client ' + clientId + ' says: ' + event.data.message)
});

// 页面上有一个按钮，点击之后向service worker发送hello的消息
button.addEventListener('click', function() {
  navigator.serviceWorker.controller.postMessage('hello');
});

　　

// sw.js
// 监听页面上发送过来的消息，然后发送给其他页面消息
self.addEventListener('message', function(event){
	var promise = self.clients.matchAll()
  .then(function(clientList) {
    // event.source.id contains the ID of the sender of the message.
    var senderID = event.source.id;

    clientList.forEach(function(client) {
      // Skip sending the message to the client that sent it.
      if (client.id === senderID) {
        return;
      }
      client.postMessage({
        client: senderID,
        message: event.data
      });
    });
  });

  // If event.waitUntil is defined, use it to extend the
  // lifetime of the Service Worker.
  if (event.waitUntil) {
    event.waitUntil(promise);
  }
});