前言

    我们在用VUE-CLI创建项目的时候，有个"Progressive Web App (PWA) Support"选项，勾选上之后就会在src目录里生成registerServiceWorker.js的文件，代码如下：

/* eslint-disable no-console */
import { register } from "register-service-worker";
if (process.env.NODE_ENV === "production") {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        "App is being served from cache by a service worker.\n" +
          "For more details, visit https://goo.gl/AFskqB"
      );
    },
    registered() {
      console.log("Service worker has been registered.");
    },
    cached() {
      console.log("Content has been cached for offline use.");
    },
    updatefound() {
      console.log("New content is downloading.");
    },
    updated() {
      console.log("New content is available; please refresh.");
    },
    offline() {
      console.log(
        "No internet connection found. App is running in offline mode."
      );
    },
    error(error) {
      console.error("Error during service worker registration:", error);
    }
  });
}

    2015年互联网+时代的到来，让Native App的安卓开发和IOS开发火了一把，当热潮消退之后，Native APP的缺点也慢慢的暴露出来：

• 开发成本高，因为这个行业刚刚兴起，人才很紧缺，不仅薪资高，而且真正的经验也有限。

• 一个APP要上传到不同的应用商店，大大小小的不下20个。

• 版本上线需要各个应用商店的审核，尤其遇到大版本迭代和搞活动。时间上的控制会让公司疯掉

    所以，很多公司又把目光转移到web端的H5上，但是web的缺点依旧是有的，至少体验上没有Native APP好，没有网路就不能打开，不具备离线的能力。所以慢慢的，PWA渐进式WEB应用诞生了，PWA的离线功能就是用Service Worker来实现的。

什么是Service Worker

    Service worker是一个注册在指定源和路径下的事件驱动woker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。你可以完全控制应用在特定情形（最常见的情形是网络不可用）下的表现。(官方描述)；

    如果熟悉Web Worker，了解Service Worker就简单了。JS是单线程的，但是单线程已经满足不了快节奏的趋势，如何解决这个弊端，Web Worker 和 Service Worker就创造出来了，他们是在主线程之外独立运行的线程。通过postMessage和onMessage和主线程相互通信。Service Worker具备以下特点：

• 独立的线程，在web worker的基础上增加了离线缓存的能力

• 无法操作DOM

• 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（可以拦截全站的请求，并作出相应的动作->由开发者指定的动作）

• 只能使用HTTPS以及localhost（测试环境修改host文件绑定）

• 由事件驱动的,具有生命周期

• 可以访问cache和indexDB

• 一旦被 install，就永远存在，除非被 uninstall或者dev模式手动删除

• 支持推送

• 并且可以让开发者自己控制管理缓存的内容以及版本

兼容性

    Service worker大部分应用在H5手机web端，所以市面上的大部分手机浏览器应用都支持了。如果不支持，JS里加上判断，对整个程序完全没有任何影响。

生命周期

1. 注册事件由主线程发起，注册一个serviceWorker,如文章最顶部VUE脚手架自带的文件，用户打开页面时，开始注册Service Workder.

2. installing 注册中会触发 install 事件，serviceWorker都是事件触发的方式进行的逻辑调用，如果事件里有 event.waitUntil() 则会等待传入的 Promise 完成才会成功

3. 注册完成，如果之前有就的Service Worker脚本控制，直接通过self.waitUntil()跳过等待

4. 安装完成后，开始进入激活activating,

5. 等待event.waitUntil()完成后，出发activated

6. 当用户再次刷新页面或者再次进入后，先读取serviceWorker存的版本资源，如果有变化，会重新触发生命周期。

实战

1、先创建一个主程序用于加载独立的线程js文件（当然这边的方式有很多种，可以是blob流，也可以用script的方式写）。

核心代码如下：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js');
}

vue脚手架会自动在src里建立registerServiceWorker.js，核心代码文章顶部。下面就以vue-cli脚手架为实战练习

2、根据代码${process.env.BASE_URL}service-worker.js，需要在public目录下新建一个service-worker.js文件。

编辑代码如下：

var CACHE_VERSION = "app-v1"; // 缓存文件的版本
var CACHE_FILES = [
  // 需要缓存的页面文件
  "/"
];
self.addEventListener("install", function(event) {
  // 监听worker的install事件
  event.waitUntil(
    // 延迟install事件直到缓存初始化完成

    caches.open(CACHE_VERSION).then(function(cache) {
      console.log("Opened cache");
      return cache.addAll(CACHE_FILES);
    })
  );
});

self.addEventListener("activate", function(event) {
  // 监听worker的activate事件
  event.waitUntil(
    // 延迟activate事件直到
    caches.keys().then(function(keys) {
      return Promise.all(
        keys.map(function(key, i) {
          // 清除旧版本缓存
          if (key !== CACHE_VERSION) {
            return caches.delete(keys[i]);
          }
        })
      );
    })
  );
});

self.addEventListener("fetch", function(event) {
  // 截取页面的资源请求
  event.respondWith(
    // 返回页面的资源请求
    caches.match(event.request).then(function(res) {
      // 判断缓存是否命中
      if (res) {
        // 返回缓存中的资源
        return res;
      }
      requestBackend(event); // 执行请求备份操作
    })
  );
});

function requestBackend(event) {
  // 请求备份操作
  var url = event.request.clone();
  return fetch(url).then(function(res) {
    // 请求线上资源
    //if not a valid response send the error
    if (!res || res.status !== 200 || res.type !== "basic") {
      return res;
    }

    var response = res.clone();

    caches.open(CACHE_VERSION).then(function(cache) {
      // 缓存从线上获取的资源
      cache.put(event.request, response);
    });
    return res;
  });
}

注意：service-worker.js 不能出现任何操作dom的事件，如果真想触发，可以通过postMessage事件让主程序执行。

3、本地调试的时候，要把registerServiceWorker.js文件中判断生成环境的代码去掉，方便我们测试，后期上线可以再还原，npm run serve运行。

打开Chrome开发者工具，先情况所有缓存，然后刷新页面，发现Cache Storage存放了值

4、几次刷新的情况下，我们发现,页面资源都通过ServiceWorer缓存抓取了

5、然后我们关闭网络如下图，再次刷新，页面依旧能够访问。实现了离线缓存的方式。

拓展

ServiceWorer是PWA核心功能之一，PWA有还有消息推送等其他模拟Native APP的功能。我们在做离线缓存时要考虑项目的必要性，如果很多资源都是需要后端接口返回的实时数据，不建议离线缓存。而且要控制好缓存的机制，不然上线后发现页面没有更新。