service worker在新闻红包活动中的应用

首先声明下我们组的技术负担：前端没有自己的服务器，是依托于新闻 CMS 发布系统的。在这种情况下如何将 service worker 应用在新闻红包活动中呢？

1. 技术支持程度

活动页面大多是单页面应用，加载 js 后，再通过 js 进行页面的渲染，因此 js 的加载速度直接影响了页面呈现的速度。这里是想通过 service worker 缓存静态资源，期望能直接从缓存中加载静态资源，加载页面的呈现速度！

在news.qq.com域名全面支持 https 后，service worker 就可以提上日程了。首先进行技术支持程度的检测，使用'serviceWorker' in navigator检测功能的支持。在 iOS12.0 中，微信、QQ 和新闻客户端，均不支持 service worker，safari 支持；在 Android 中，微信、QQ 和新闻客户端都是支持的。

因此我们着重于 Android 下 service worker 的使用。同时，Android 测试版新闻客户端，可是使用 USB 进行调试，调试 service worker 的工作状态。

2. 活动中的使用

2.1 尝试缓存相对路径的静态资源

刚开始在缓存资源时，因为知识储备的不足，钻了牛角尖，只想着缓存相对路径的资源，毕竟 cms 静态服务也是支持静态资源的相对路径的，可是在实验时发现，无论字段iscdn是否为 true，图片类型的资源都会自动上传到 CDN，那么就会造成 js/css 的地址和图片资源的地址不一致，毕竟 baseUrl 只能指定一个值，要么是 js/css 地址，要么是图片资源的地址。

刚开始想的是改造脚手架，用两个值分别来表示 js/css 地址和图片资源地址，但是脚手架的改造成本也是很高的！

2.2 缓存 CDN 中的资源

代码架构中的资源都上传到 CDN，那么 js/css/img 都会在mat1.gtimg.com的 CDN 目录下，如果要加载并缓存 CDN 中的资源，CDN 资源服务器的 response 中 Access-Control-Allow-Origin 中包含当前的页面所在域或者为*；幸运的是，mat1.gtimg.com 服务器是支持的：

response:

COPYSHELL
access-control-allow-origin: https://news.qq.com
access-control-expose-headers: X-Client-Ip,X-Server-Ip,X-Upstream-Ip
cache-control: max-age=60
content-encoding: gzip
content-length: 50356
content-type: application/javascript; charset=utf-8
date: Tue, 15 Jan 2019 09:02:29 GMT
expires: Tue, 15 Jan 2019 09:03:29 GMT
last-modified: Tue, 15 Jan 2019 02:53:58 GMT
server: NWSs
status: 200
vary: Origin

因此我们可以在 install 中首先这个 CDN 下的静态资源进行离线缓存，然后在 fetch 中拦截请求，如果命中缓存则直接返回，如果没有命中，则去请求！在请求可控的跨域资源时，需要在请求头中加入{mode: 'cors'}

在 install 中，对首页和首页中一定会用到的静态资源进行缓存：

COPYJAVASCRIPT
const version = 'welfare-1.0.0';
const fileList = [
  '/a/b/index.htm',
  'https://mat1.gtimg.com/news/chunk-vendors.f9bab06e.js',
  'https://mat1.gtimg.com/news/app.2677f99a.css',
  'https://mat1.gtimg.com/news/app.af990eeb.js',
];

this.addEventListener('install', (event) => {
  this.skipWaiting();
  event.waitUntil(
    caches.open(version).then((cache) => {
      return cache.addAll(fileList);
    }),
  );
});

然后在 fetch 中拦截：

COPYJAVASCRIPT
// 检测当前请求是否应当被缓存
const checkHttpCanCache = (request, response) => {
  // 数据统计、请求的接口不缓存
  // 同时若请求失败或者请求的资源无法控制，也不缓存
  if (
    request.url.indexOf('btrace.qq.com/kvcollect') > -1 ||
    !response ||
    response.status !== 200 ||
    (response.type !== 'basic' && response.type !== 'cors')
  ) {
    return false;
  }
  return true;
};
this.addEventListener('fetch', event => {
  let url = event.request.url;
  let req;
  if (url.indexOf('mat1.gtimg.com') > -1) {
      req = new Request(url, { mode: 'cors' });
  } else {
      req = event.request.clone();
  }

  event.respondWith(
    caches.match(event.request).then(response => {
      // 缓存中存在则直接返回
      if (response) {
        return response;
      }

      // 否则进行请求并返回，这里还可以再多一步，如果可以缓存的资源，也进行缓存
      let request = req.clone();
      return fetch(request).then(httpRes => {
        if (!checkHttpCanCache(request, httpRes)) {
          return httpRes;
        }

        // 请求成功的话，将请求缓存起来
        let responseClone = httpRes.clone();
        caches.open(version).then(cache => {
          cache.put(request, responseClone);
        });

        return httpRes;
      });
    });
  );
});

不过上面的 fetch 事件还不完整，如果页面中有的跨域资源的Access-Control-Allow-Origin不支持时，请求资源就会报错，会被浏览器阻止。比如展示列表中的图片，产品经理那边是把图片上传到img1.gtimg.com域名上，但是这个域名的 Access-Control-Allow-Origin 不支持。

关于这个域名下的请求，是这样处理的，需要在 mode 中加上no-cors：

COPYJAVASCRIPT
if (url.indexOf('mat1.gtimg.com') > -1) {
  req = new Request(url, { mode: 'cors' });
} else if (url.indexOf('img1.gtimg.com') > -1) {
  req = new Request(url, { mode: 'no-cors' });
} else {
  req = event.request.clone();
}

2.3 验证 service woker 是否起作用

有时候会遇到这种情况，Cache Storage 中明明已经有缓存了，但是每次刷新时，缓存不起作用，还是每次都走网络请求。针对这种情况，应当检查下当前页面是否是https链接，同时检查 sw.js 所在的路径是否跟当前页面地址在同一个目录中，比如页面路径为https://news.qq.com/a/b/index.htm，那么 sw.js 的路径也最好是/a/b/sw.js。

service worker 是否已生效，可以在 chrome 的 network 面板中查看，强刷缓存后，如果 Size 标识为(from ServiceWorker)，则说明 sw 已生效；将网络设置为offline时，页面也依然能访问，service worker 中缓存的数据能把首页的大致框架撑起来，只是没有接口数据了而已！

3. 总结

service worker 能做的工作除了缓存资源，还有更多的功能可以使用，比如使用 service worker 模拟接口数据，在接口没有开发完成时，可以利用这个进行正常的对接接口开发等。