ServiceWorker

什么是ServiceWorker

ServiceWorker是H5的新API，是一段运行在浏览器后台的JavaScript脚本，独立于当前页面，因此不能和网页交互，它可以拦截和处理网络请求，实现缓存资源并可在离线时响应用户的请求。

ServiceWorker生命周期

• 安装
• 激活，激活成功后可进入chrome://inspect/#service-workers查看当前的serviceworker，这个阶段对资源进行缓存
• 监听，处理请求，若请求的资源被缓存过直接使用，否则向用户展示缓存的404页面。

• 销毁

  • 只支持https协议或者localhost
  • 生命周期独立于web页面

一般断网后，页面会直接出现无法访问网站这样的提示，用chrome -> 开发者工具 -> New Work -> offline 可模拟断网，

ServiceWorker生命周期中的重要事件

install

页面加载时触发，此过程完成后，资源将被缓存

fetch

• fetch用于拦截用户请求，并响应，返回Promise对象
• 提供Request和Response对象，前端可以用Request对象发起请求，在serviceworker中可用Response对象响应请求。

关键代码解析：

if ('serviceWorker' in navigator) {//serviceworker是navigator上面的属性
        navigator.serviceWorker.register('./service-worker.js').then(function(registration) {//注册serviceworker，service-worker.js和HTML页面在同级目录下，serviceworker大量依赖于promise，这里添加resolve或reject回调
        //resolve， 注册成功
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
        // reject，注册失败
        console.log('ServiceWorker registration failed: ', err);
       });
    }

下面便是缓存资源和离线响应资源的代码：

'use strict';

var cacheVersion = 0;
var currentCache = {
  offline: 'offline-cache' + cacheVersion
};
const offlineUrl = 'offline.html';

this.addEventListener('install', event => {//开始安装serviceworker

  event.waitUntil(//caches.open打开的是一个自己命名的缓存名称

    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([//这里便是待缓存的资源
          './offline.svg',
          offlineUrl
      ]);
    })
  );
});//只有当所有资源都被缓存成功后install才算完成，因此要慎重考虑哪些资源应该被缓存

this.addEventListener('fetch', event => {
//fetch事件在安装成功后，离线请求时响应，在线时，若请求的资源再serviceworker中，则走200 OK (from ServiceWorker)，离线时也是这个状态码

  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              return caches.match(offlineUrl);
        })
     );
  }
  else{
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

具体请点击这里

双向通信

浏览器有3中worker：

• dedicated worker：专用worker
• shared worker：共享worker
• service worker

他们都可以通过postmessage和onmessage进行通信

特点

serviceworker相比于XMLHTTPRequest请求优势：

• 返回promise对象，减少回调嵌套。
• 可利用Request和Response对象，响应用户请求
  serviceworker的存储是异步的，localStorage和sessionStorage的存储是同步的。
  获取更多serviceworker内容