angular service worker搭配workbox使

原文链接
略过前言直接进入主题

什么是 Service Worker？

Service Worker是一个相对较新的技术，用于在应用中运行执行Javascript代码，即使用户还没有打开页面。通过它我们可以在浏览器中注册代码片段、对某些事件进行处理，甚至在我们的例子中，可以对请求进行缓存生成离线应用。

service worker可以设想成浏览器域名下的一个代理，流量通过Service Worker分发，Worker决定数据是从缓存还是从网络获取。缓存是通过service worker API接口定义的，我们可以通过service worker定制自己的缓存策略。

今天我们不打算这样做，事实上，自己实现缓存非常麻烦。幸运的是我们不需要自己造轮子，已经有可用的库提供高级的接口来实现我们需求。本文中我们使用谷歌的Workbox

不是所有的浏览器都支持service worker，但是它们都宣称未来会支持

为什么选择 Workbox?

angular-cli集成了service worker，在angular-cli配置service worker非常容易

新建 angular 项目

ng new angular-service-worker

使用npm i加载依赖

下一步，下载Workbox build API

npm i workbox-build --save-dev

环境以及搭建完成。

为 angular 项目搭建一个 Service Worker 缓存

我们以及下载了Workbox build API，接下来我们就可以去生成angular service worker，为什么我们要生成一个，而不是通过代码配置？

要缓存静态文件，service worker需要知道其文件名，使用 angular-cli 构建项目的时候，目标文件名每次都会改变，angular-cli 在文件名上加了hash值，浏览器可以为新文件作缓存又避免就文件缓存影响

目标文件名每次都会改变，我们无法在 worker-script 去配置，那样每次构建完都要去更改配置，所以我们使用Workbox build API 接口实现。

Workbox build API 允许我们通过 node.js 脚本文件扫描目标文件目录生成 service worker 脚本文件，目标文件大概这样：
dist/sw.js

...
const fileManifest = [
  {
    "url": "index.html",
    "revision": "2a59e6e03216061ad8eebe5d302b63be"
  },
  {
    "url": "inline.5f8f26e0d9e0b566019d.bundle.js",
    "revision": "590f7d098ab30195f9f4761bf79ec18c"
  },
  {
    "url": "main.c0c528c8c7636a1ce8fc.bundle.js",
    "revision": "f1646bf6ca91be91e46d35a173846e5b"
  },
  {
    "url": "polyfills.67d068662b88f84493d2.bundle.js",
    "revision": "ad4076ac41e8c08e5b5f872136081192"
  },
  {
    "url": "styles.d41d8cd98f00b204e980.bundle.css",
    "revision": "d41d8cd98f00b204e9800998ecf8427e"
  },
  {
    "url": "vendor.dd97be8fb65ee0109dba.bundle.js",
    "revision": "dad8873f5866215d28f6a9d07764de3b"
  }
];
workboxSW.precache(fileManifest);
...

缓存静态内容

现在我们开始写脚本文件，我们在项目根目录下新建一个 generate-service-worker.js 文件

const build = require("workbox-build");
const SRC_DIR = "./";
const BUILD_DIR = "dist";

const options = {
  swDest: `${BUILD_DIR}/sw.js`, // target directory
  globDirectory: BUILD_DIR,
  navigateFallback: "/index.html", // redirect all reqest to the fallback, if no explicit route matches
  clientsClaim: true
};

build.generateSW(options).then(() => {
  console.log("Generated service worker with static cache");
});

这段脚本代码中，我们定义了一些变量并将其传递给 builder 的 generateSW 方法，然后 builder 在 BUILD_DIR 指定的目录下创建 service worker 文件

基本就是这样，依靠 angular 生成的 service worker 会缓存所有静态文件。然而，大多数应用程序依赖动态内容，动态内容此时还没被缓存

缓存动态内容

要缓存动态内容，我们需要告诉 Workbox 内容来源，比如说我们有一个接口地址，它提供与应用程序同域下的内容，缓存这类内容，我们需要使用 Workbox builder 的 runtimeCaching 方法，举例说明：
generate-service-worker.js

const options = {
  swDest: `${BUILD_DIR}/sw.js`,
  globDirectory: BUILD_DIR,
  navigateFallback: "/index.html",
  clientsClaim: true,
  runtimeCaching: [
    {
      urlPattern: //api/(.*)/, // reg ex
      handler: "networkFirst" // caching strategy
    }
  ],
  handleFetch: true
};

现在，所有/api/* 下的数据都会被缓存

缓存策略

你还可以定义不同的缓存策略，这是缓存策略

拓展 Service Worker

更多时候，builder 提供的选项不满足我们的应用场景， 比如推送通知缓存到 service worker. 好在service worker 提供用户自定义选项，builder 会通过swSource属性合并两份文件成一个 service worker.
generate-service-worker.js

const options = {
  swSource: `${SRC_DIR}/service-worker.js`,
  swDest: `${BUILD_DIR}/sw.js`,
  globDirectory: BUILD_DIR,
  navigateFallback: "/index.html",
  clientsClaim: true,
  runtimeCaching: [
    {
      urlPattern: //api/(.*)/, // reg ex
      handler: "networkFirst" // caching strategy
    }
  ],
  handleFetch: true
};

同时我们将方法名从generateSW() 改为 injectManifest()
generate-service-worker.js

build.injectManifest(options).then(() => {
    
});

为 Service Worker 配置构建脚本

到这一步，使用 Workbox 不会比 使用 angular-cli service worker 复杂

要想在构建时自动生成 generate-service-worker.js ，我们需要手动在构建脚本关联 service worker。

有一个办法是定制angular-cli 使用 Workbox Webpack pluign，这个可以让 generate-service-worker.js 运行良好，但会破坏angular-cli结构

我们可以在运行 "npm start" 启动项目的时候，通过 express 运行 node.js 脚本，这两个都不算是最佳方案，如果你更好的方案，请联系我
这是 npm package.json

...
"scripts": {
    "ng": "ng",
    "start": "ng build --prod && npm run gn-sw && node server/server.js",
    "build": "ng build --prod && npm run gn-sw",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "gn-sw": "node generate-service-worker.js"
  },
...

const express = require("express");
const app = express();

app.use(express.static(__dirname + "/../dist/"));

app.listen(process.env.PORT || 8080, () => {});