若想将一个站点做成一个完整的 Progressive Web App(PWA)，离线缓存功能是少不了的。其中 Service Worker 是完成离线缓存的重要组成模块。但是，手动编写一个 Service Worker 并非易事，尤其在项目复杂的情况下，所需要编写的代码就更加复杂和繁琐。
于是 sw-build 应运而生，它是 Google Workbox 的一部分，提供了一种非常方便编写、构建和配置 Service Worker 的方式。
安装
确认 npm 已经安装好，执行以下命令：
npm install --global sw-build
基本使用
sw-build --input=sw.js --swDest=sw.js
将会把当前目录下的 sw.js 编译成增量更新能用的 Service Worker，并将结果保存到 sw.js 中。
详细使用
sw-build 提供了许多复杂的功能和配置。下面我们一一介绍：
第一步：配置 Service Worker
首先，需要在一个 JavaScript 文件中定义 Service Worker。通常，这个文件被命名为 sw.js，而下面我们就以 sw.js 为例子：
-- -------------------- ---- -------
-------------------------------- ----- -- -
----------------
------------------------------------- -- -
------ --------------
--------------
-----------------
-------------
---
--
--
---
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---Service Worker 通常有两个事件需要处理：
install：在 Service Worker 第一次安装时触发，通常在这里建立一个缓存并将必要的文件缓存下来。fetch：每当页面尝试请求一个资源时触发，通常在这里检查缓存并提供离线缓存。
第二步：运行 sw-build
sw-build --input=sw.js --swDest=sw.js
--input 表示输入文件的路径，这里是 sw.js。--swDest 表示输出文件的路径，这里也是 sw.js。这将会生成一个增量更新的 Service Worker。
第三步：使用 Service Worker
在 HTML 文件中引用 Service Worker 脚本：
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
</script>之后，所有的资源请求都会经过 Service Worker，实现离线缓存效果。
增量更新
sw-build 还提供增量更新的功能。在 Service Worker 代码中加入如下代码即可完成增量更新的配置：
self.addEventListener('install', event => {
// ...
self.skipWaiting();
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});当有新版本的 Service Worker 准备好时，浏览器会检测到新版本，等待所有已经打开的页面关闭后，会自动安装并代替旧版本。
缓存过期
sw-build 还提供了处理返回数据缓存时间的方式，具体如下：
-- -------------------- ---- -------
------ - ----------- ----------------- - ---- ---------------------
------ - --------------------- - ---- ---------------------
--------------
--- ------------------
--- ------------
---------- ------------
-------- -
--- -----------------------
----------- ---
-------------- -- - -- -- - ----
---
--- -------------------
--------- --- ----
--
-
--
--上述代码存储了一个名称为 api-cache 的缓存，并且顺便设置了超时机制（如果缓存数量超过 10 个或者缓存过期时间超过 1 小时，则将旧的缓存删除）。
结论
sw-build 是一个强大的 npm 包，提供了非常方便的 Service Worker 配置功能，能让我们更加便捷的实现离线缓存功能。同时上述功能示例的运用也能够为大家提供更加深入的 Service Worker 基础教学和实际运用的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597881e8991b448d7000