angular service worker Angular Service Worker配置

前提条件

对下列知识有基本的了解：

• 生产环境下的 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 到正则表达式的转换中，正则表达式中某些具有特殊含义的字符不会被转义，并且模式不会用 ​^​ / ​$​ 包装。

• ​$​ 是正则表达式中的一个特殊字符，它与字符串的结尾匹配，在将 glob 模式转换为正则表达式时不会自动转义。如果你想从字面上匹配 ​$​ 字符，则必须自己对它进行转译（使用 ​$​）。

例如，glob 模式 ​/foo/bar/$value​ 会导致出现无法匹配的表达式，因为字符串不可能在结尾后有任何字符。

• 将模式转换为正则表达式时，不会自动用 ​^​ 和 ​$​ 包装。因此，这些模式将部分匹配请求 URL。如果你希望你的模式匹配 URL 的开头和/或结尾，可以自己添加 ​^​ / ​$​。

例如，glob 模式 ​/foo/bar*.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	lazy 不会预先缓存任何资源。相反，Angular Service Worker 只会缓存它收到请求的资源。这是一种按需缓存模式。永远不会请求的资源也永远不会被缓存。这对于像为不同分辨率提供的图片之类的资源很有用，那样 Service Worker 就只会为特定的屏幕和设备方向缓存正确的资源。

默认为 ​prefetch​。

updateMode

对于已经存在于缓存中的资源，​updateMode ​会决定在发现了新版本应用后的缓存行为。 自上一版本以来更改过的所有组中资源都会根据 ​updateMode ​进行更新。

值	详情
prefetch	要求 Service Worker 立即下载并缓存更新过的资源。
lazy	lazy 要求 Service Worker 不要缓存这些资源，而是先把它们看作未被请求的，等到它们再次被请求时才进行更新。lazy 这个 updateMode 只有在 installMode 也同样是 lazy 时才有效。

其默认值为 ​installMode ​的值。

resources

本节描述要缓存的资源，分为如下几组：

资源组	详情
files	files 列出了与 dist 目录中的文件相匹配的模式。它们可以是单个文件也可以是能匹配多个文件的类似 glob 的模式。
urls	包括要在运行时进行匹配的 URL 和 URL 模式。这些资源不是直接获取的，也没有内容散列，但它们会根据 HTTP 标头进行缓存。 这对于像 Google Fonts 服务这样的 CDN 非常有用。 （不支持 glob 的逆模式，? 将会按字面匹配；也就是说它不会匹配除了 ? 之外的任何字符。）

cacheQueryOptions

这些选项用来修改对请求进行匹配的行为。它们会传给浏览器的 ​Cache#match​ 函数。详情参阅 MDN。目前，只支持下列选项：

选项	详情
ignoreSearch	忽略查询参数。默认为 false。

dataGroups

与这些资产性（asset）资源不同，数据请求不会随应用一起版本化。它们会根据手动配置的策略进行缓存，这些策略对 API 请求和所依赖的其它数据等情况会更有用。

本字段包含一个数据组的数组，其中的每一个条目都定义了一组数据资源以及对它们的缓存策略。

{
  "dataGroups": [
    {
      …
    },
    {
      …
    }
  ]
}

当 ServiceWorker 处理请求时，它将按照数据组在 ​ngsw-config.json​ 中出现的顺序对其进行检查。与所请求的资源匹配的第一个数据组将处理该请求。
建议将更具体的数据组放在列表中较高的位置。比如，与 ​/api/foo.json​ 匹配的数据组应出现在与 ​/api*.*", // Exclude URLs to files. "!*__*", // Exclude URLs containing `__` in the last segment. "!*__*/**", // Exclude URLs containing `__` in any other segment. ]

navigationRequestStrategy

通过此可选属性，你可以配置服务工作者如何处理导航请求：

{
  "navigationRequestStrategy": "freshness"
}

可能的值	详情
"performance"	默认设置。提供指定的索引文件，它通常会被缓存。
"freshness"	将请求透传到网络，并在脱机时回退到 performance 模式。当服务器在用 HTTP 重定向（3xx 状态代码）将导航请求重定向到其他位置时，此值很有用。使用此值的原因包括： 当应用尚未处理身份验证时，重定向到身份验证网站。 重定向特定的 URL，以免在网站重新设计后破坏现有的链接/书签。 当页面暂时关闭时，重定向到其他网站，比如服务器状态页。

​freshness ​策略通常会导致向服务器发送更多请求，这可能会增加响应延迟。建议你尽可能使用默认的性能策略。