共计 2261 个字符，预计需要花费 6 分钟才能阅读完成。
简介
关于 service worker，网络上已经有了较多的文章。总的来说它依靠缓存资源，拦截 http 请求，来帮助我们达到离线使用网站的效果。
而 angular cli 为了让使用 service worker 更加便利，为开发者提供了一个配置窗口（ngsw-config.json）和一个与 service worker 通讯的服务（SwUpdate）。
启用
新建项目后在项目根目录下键入 ng add @angular/pwa。
会为你的项目添加一些文件，其中包括上文提到的 ngsw-config.json，为了即刻感受离线应用的魅力，现暂不需配置。
安装 http-server npm install http-server -g
将用 http-server 启用的服务器来加载应用，这么做是为了模拟真实的生产环境，因为 ng serve 环境下无法启用 service worker。
键入 ng build –prod 进行打包。打包完成后进入 dist 下的项目根目录下，键入 http-server -p <port> 将打包后的应用部署在 http-server 指定的端口上。
打开浏览器进入控制台，以 chrome 为例，在 network 选项卡上勾选 offline 模拟离线使用。此时重新刷新网页发现页面依然能够在离线状态下显示，说明 service worker 已经工作了。
配置
以上并没有手动配置 ngsw-config.json，然而初始的配置还有许多不足，比如无法拦截缓存 api 请求。因此需要对该文件的配置参数做一个大概了解（点击浏览官方配置说明）。
参考官方的说明，我们了解到可以配置静态资源的缓存策略（配置项中的 assetGroups）以及动态资源的缓存策略（配置项中的 dataGroups）。
静态资源配置（assetGroups）
interface AssetGroup {
name: string;
installMode?: ‘prefetch’ | ‘lazy’;
updateMode?: ‘prefetch’ | ‘lazy’;
resources: {
files?: string[];
/** @deprecated As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead. */
versionedFiles?: string[];
urls?: string[];
};
}
这是该配置项的接口，下面对各个属性做一个简要的说明：
resources 属性下可配置本地的静态资源（resources.files）和通过 cdn 来的静态资源（resources.urls）
name 是需要编写的该资源集合的唯一的名字
installMode 配置的是你的网站应用第一次在当前浏览器加载后，service worker 应该进行的缓存策略。
选择 ’prefetch’ 会将 resources 列出的资源一股脑儿的预先缓存起来，不管当前是否有访问到。选择 ’lazy’ 则不会预先缓存，而是在用到时才会进行缓存。
updateMode 配置的是当检测到资源的版本改变之后，所进行的资源缓存策略。
如何得知资源的版本发生了变化呢？angular service worker 会对比资源内容的 hash 值。如果 hash 值不同则版本不同。选择 ’prefetch’ 会立即缓存更新的资源，选择 ’lazy’ 会在用到时在进行缓存。不过，这里要注意如果在 installMode 的配置中没有选择 ’lazy’ 模式，则这里的 ’lazy’ 模式也不会生效。
动态资源配置（dataGroups）
export interface DataGroup {
name: string;
urls: string[];
version?: number;
cacheConfig: {
maxSize: number;
maxAge: string;
timeout?: string;
strategy?: ‘freshness’ | ‘performance’;
};
}
这是缓存动态资源的配置项，其实就是缓存的 ajax、fetch 的 response，将这些 api 请求的响应体进行缓存后，就可以在离线状态下使用。其中：
urls 配置 api 的 url
cacheConfig 配置具体的缓存策略：
maxSize 缓存的最大条目数或响应数，太多则会暂用系统资源
maxAge 过期时间，该项与下面提到的 strategy 策略配合，如果设置过长，容易呈现老资源给用户。
timeout 是指的应用发起真实网络请求后的等待时间，如果超时将会配合下面提到的 strategy 进行动作
strategy 策略，选择 ’performance’ 会直接拦截网络请求，返回缓存（前提是有缓存，并且没有超过 maxAge 的时间），选择 ’freshness’ 会在 timeout 超时的时候返回缓存。
与 service worker 通讯
与 service worker 通讯可以让我们主动做很多事情，而不是仅仅依赖于 ngsw-config.json 配置，通过依赖注入一个 SwUpdate* 服务，我们可以主动要求查询、更新、激活应用的版本，（这部分内容笔者还未投入应用，详见官网描述）
总结
这篇文章我们分享了如何在 angular 里面使用 service worker 进行离线场景的增强，其中包括
引入 @angular/pwa
安装 http-server，模拟生产环境
配置 ngsw-config.json 缓存策略
简单描述了与 service worker 通讯的概念
相信今后 angular 框架能够在 pwa 应用方便给我们更多的方便。
