Angular Service Worker配置
前提条件
对下列知识有基本的了解：
配置文件 ngsw-config.json 指定了 Angular Service Worker 应该缓存哪些文件和数据的 URL，以及如何更新缓存的文件和数据。Angular CLI 会在 ng build 期间处理配置文件。如果想手动处理，可以用 ngsw-config 工具（这里的 <project-name> 就是要构建的项目名）：
./node_modules/.bin/ngsw-config ./dist/<project-name> ./ngsw-config.json [/base/href]该配置文件使用 JSON 格式。所有文件路径都必须以 / 开头，也就是相应的部署目录 —— 在 CLI 项目中的它通常是 dist/<project-name>。
除非另有注释，否则模式使用limited* glob 格式，该格式将在内部转换为正则表达式：
|
GLOB 格式 |
详情 |
|---|---|
**
|
匹配 0 个或多个路径段 |
*
|
匹配不包括 |
?
|
正好匹配不包括 |
|
|
将模式标记为负数，这意味着仅包含与模式不匹配的文件 |
请注意，在内部 glob 到正则表达式的转换中，正则表达式中某些具有特殊含义的字符不会被转义，并且模式不会用 ^ / $ 包装。
-
$ 是正则表达式中的一个特殊字符，它与字符串的结尾匹配，在将 glob 模式转换为正则表达式时不会自动转义。如果你想从字面上匹配 $ 字符，则必须自己对它进行转译（使用 \\$）。例如，glob 模式
/foo/bar/$value 会导致出现无法匹配的表达式，因为字符串不可能在结尾后有任何字符。- 将模式转换为正则表达式时，不会自动用
^ 和 $ 包装。因此，这些模式将部分匹配请求 URL。如果你希望你的模式匹配 URL 的开头和/或结尾，可以自己添加 ^ / $。例如，glob 模式
/foo/bar/*.js 将匹配 .js 和 .json 文件。如果你想仅匹配 .js 文件，请使用 /foo/bar/*.js$。
范例模式：
|
模式 |
详情 |
|---|---|
/**/*.html
|
指定所有 HTML 文件 |
/*.html
|
仅指定根中的 HTML 文件 |
!/**/*.map
|
排除所有源映射 |
下面讲讲配置文件中的每个属性。
appData
本节允许你传递用来描述这个特定应用版本的任何数据。SwUpdate 服务会在更新通知中包含这些数据。许多应用会使用本节来提供 UI 弹窗时要显示的附加信息，以通知用户有可用的更新。
index
指定用来充当索引页的文件以满足导航请求。通常是 /index.html。
assetGroups
资产（Assets）是与应用一起更新的应用版本的一部分。它们可以包含从页面的同源地址加载的资源以及从 CDN 和其它外部 URL 加载的第三方资源。由于在构建时可能没法提前知道所有这些外部 URL，因此也可以指定 URL 的模式。
该字段包含一个资产组的数组，每个资产组中会定义一组资产资源和它们的缓存策略。
{
"assetGroups": [
{
…
},
{
…
}
]
}当 ServiceWorker 处理请求时，它将按照资源组在 ngsw-config.json 中出现的顺序对其进行检查。与所请求的资源匹配的第一个资源组将处理该请求。
建议将更具体的资源组放在列表中较高的位置。比如，与 /foo.js 匹配的资源组应出现在与 *.js 匹配的资源组之前。
每个资产组都会指定一组资源和一个管理它们的策略。此策略用来决定何时获取资源以及当检测到更改时该怎么做。
这些资产组会遵循下面的 Typescript 接口：
interface AssetGroup {
name: string;
installMode?: 'prefetch' | 'lazy';
updateMode?: 'prefetch' | 'lazy';
resources: {
files?: string[];
urls?: string[];
};
cacheQueryOptions?: {
ignoreSearch?: boolean;
};
}name
name 是强制性的。它用来标识该配置文件版本中这个特定的资产组。
installMode
installMode 决定了这些资源最初的缓存方式。installMode 可以取如下两个值之一：
|
值 |
详情 |
|---|---|
prefetch
|
要求 Angular Service Worker 在缓存当前版本的应用时要获取每一个列出的资源。这是个带宽密集型的模式，但可以确保这些资源在请求时可用，即使浏览器正处于离线状态。 |
lazy
|
|
默认为 prefetch。
updateMode
对于已经存在于缓存中的资源，updateMode 会决定在发现了新版本应用后的缓存行为。 自上一版本以来更改过的所有组中资源都会根据 updateMode 进行更新。
|
值 |
详情 |
|---|---|
prefetch
|
要求 Service Worker 立即下载并缓存更新过的资源。 |
lazy
|
|
其默认值为 installMode 的值。
resources
本节描述要缓存的资源，分为如下几组：
|
资源组 |
详情 |
|---|---|
files
|
|
urls
|
包括要在运行时进行匹配的 URL 和 URL 模式。这些资源不是直接获取的，也没有内容散列，但它们会根据 HTTP 标头进行缓存。 这对于像 Google Fonts 服务这样的 CDN 非常有用。
|
cacheQueryOptions
这些选项用来修改对请求进行匹配的行为。它们会传给浏览器的 Cache#match 函数。详情参阅 MDN。目前，只支持下列选项：
|
选项 |
详情 |
|---|---|
ignoreSearch
|
忽略查询参数。默认为 |
dataGroups
与这些资产性（asset）资源不同，数据请求不会随应用一起版本化。它们会根据手动配置的策略进行缓存，这些策略对 API 请求和所依赖的其它数据等情况会更有用。
本字段包含一个数据组的数组，其中的每一个条目都定义了一组数据资源以及对它们的缓存策略。
{
"dataGroups": [
{
…
},
{
…
}
]
}当 ServiceWorker 处理请求时，它将按照数据组在 ngsw-config.json 中出现的顺序对其进行检查。与所请求的资源匹配的第一个数据组将处理该请求。
建议将更具体的数据组放在列表中较高的位置。比如，与 /api/foo.json 匹配的数据组应出现在与 /api/*.json 匹配的数据组之前。
数据组遵循下列 TypeScript 接口：
export interface DataGroup {
name: string;
urls: string[];
version?: number;
cacheConfig: {
maxSize: number;
maxAge: string;
timeout?: string;
strategy?: 'freshness' | 'performance';
};
cacheQueryOptions?: {
ignoreSearch?: boolean;
};
}name
和 assetGroups 下类似，每个数据组也都有一个 name，用作它的唯一标识。
urls
一个 URL 模式的列表。匹配这些模式的 URL 将会根据该数据组的策略进行缓存。只有非修改型的请求（GET 和 HEAD）才会进行缓存。
- 不支持 glob 中的否定模式
-
? 只做字面匹配，也就是说，它只能匹配 ? 字符。
version
API 有时可能会以不向后兼容的方式更改格式。新版本的应用可能与旧的 API 格式不兼容，因此也就与该 API 中目前已缓存的资源不兼容。
version 提供了一种机制，用于指出这些被缓存的资源已经通过不向后兼容的方式进行了更新，并且旧的缓存条目（即来自以前版本的缓存条目）应该被丢弃。
version 是个整型字段，默认为 0。
cacheConfig
本节定义了对匹配上的请求进行缓存时的策略。
maxSize
（必需）缓存的最大条目数或响应数。开放式缓存可以无限增长，并最终超过存储配额，建议适时清理。
maxAge
（必需）maxAge 参数表示在响应因失效而要清除之前允许在缓存中留存的时间。maxAge 是一个表示持续时间的字符串，可使用以下单位作为后缀：
|
后缀 |
详情 |
|---|---|
d
|
天 |
h
|
小时 |
m
|
分钟 |
s
|
秒 |
u
|
毫秒 |
比如，字符串 3d12h 规定此内容最多缓存三天半。
timeout
这个表示持续时间的字符串用于指定网络超时时间。 如果配置了网络超时时间，Angular Service Worker 就会先等待这么长时间再使用缓存。timeout 是一个表示持续时间的字符串，使用下列后缀单位：
|
后缀 |
详情 |
|---|---|
d
|
天 |
h
|
小时 |
m
|
分钟 |
s
|
秒 |
u
|
毫秒 |
比如，字符串 5s30u 将会被翻译成 5 秒零 30 毫秒的网络超时。
strategy
Angular Service Worker 可以使用两种缓存策略之一来获取数据资源。
|
缓存策略 |
详情 |
|---|---|
performance
|
|
freshness
|
|
你还可以模拟第三种策略 staleWhileRevalidate，它会返回缓存的数据（如果可用），但是也会在后台从网络上获取新数据，以供下次使用。要使用本策略，请在 cacheConfig中把 strategy设置为 freshness，并且把 timeout设置为 0u。
本质上说，它会做如下工作：
- 首先尝试从网络上获取。
- 如果网络请求没有在 0ms 内（也就是立刻）完成，就用缓存做为后备（忽略缓存有效期）。
- 一旦网络请求完成，就更新缓存，以供将来的请求使用。
- 如果指定的资源在缓存中不存在，总是等待网络请求。
cacheOpaqueResponses
Angular 服务工作者是否应该缓存不透明的响应。
如果未指定，则默认值取决于数据组的配置策略：
| STRATEGIES |
详情 |
|---|---|
|
使用 |
默认值为 |
|
具有 |
默认值为 |
评论不透明的响应
如果你不熟悉，不透明响应是请求不同来源的不返回 CORS 标头的资源时返回的一种特殊类型的响应。不透明响应的特性之一是不允许服务工作者读取其状态，这意味着它无法检查请求是否成功。有关更多详细信息，请参阅fetch()介绍。
如果你无法实现 CORS（例如，如果你不控制来源），更愿意对会导致不透明响应的资源使用 freshness 策略。
navigationUrls
这个可选节让你可以指定一个自定义的 URL 列表，它们都会被重定向到索引文件。
处理导航请求
对于没有匹配上任何 asset 或 data 组的导航请求，ServiceWorker 会把它们重定向到指定的索引文件。下列请求将会视为导航请求：
- 它的模式是
navigation - 它接受
text/html 响应（根据 Accept 头的值决定） - 它的 URL 符合特定的条件
默认情况下，这些条件是：
- URL 的最后一段路径中不能包含文件扩展名（比如
.） - URL 中不能包含
__
匹配导航请求的 URL
虽然这些默认条件在大多数情况下都挺好用，不过有时还是要配置一些不同的规则。比如，你可能希望忽略一些特定的路由（它们可能不是 Angular 应用的一部分），而是把它们透传给服务器。
该字段包含一个将要在运行期间匹配的 URL 和 类似 glob 的 URL 模式。 它既可以包含正向模式也可以包含反向模式（比如用 ! 开头的模式）。
只有那些能匹配任意正向 URL 或 URL 模式并且不匹配任何一个反向模式的 URL 才会视为导航请求。当匹配时，这些 URL 查询将会被忽略。
如果省略了该字段，它的默认值是：
[
'/**', // Include all URLs.
'!/**/*.*', // Exclude URLs to files.
'!/**/*__*', // Exclude URLs containing `__` in the last segment.
'!/**/*__*/**', // Exclude URLs containing `__` in any other segment.
]navigationRequestStrategy
通过此可选属性，你可以配置服务工作者如何处理导航请求：
{
"navigationRequestStrategy": "freshness"
}|
可能的值 |
详情 |
|---|---|
'performance'
|
默认设置。提供指定的索引文件，它通常会被缓存。 |
'freshness'
|
将请求透传到网络，并在脱机时回退到
|
freshness策略通常会导致向服务器发送更多请求，这可能会增加响应延迟。建议你尽可能使用默认的性能策略。