Service Worker 配置

Service Worker 配置

前提条件

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

配置文件 src/ngsw-config.json 指定了 Angular Service Worker 应该缓存哪些文件和数据的 URL，以及如何更新缓存的文件和数据。 CLI 会在 ng build --prod 期间处理配置文件。 如果想手动处理，你可以使用 ngsw-config 工具：

content_copyngsw-config dist src/ngsw-config.json /base/href

该配置文件使用 JSON 格式。 所有文件路径都必须以 / 开头，也就是部署目录 —— 在 CLI 项目中的它通常是 dist。

如无特别说明，这些模式都使用受限的 glob 格式：

  • ** 匹配 0 到多段路径。

范例模式：

  • /**/*.html 指定所有 HTML 文件。

下面讲讲配置文件中的每一节。

appData

本节允许你传递用来描述这个特定应用版本的任何数据。 SwUpdate 服务会在更新通知中包含这些数据。 许多应用会使用本节来提供 UI 弹窗时要显示的附加信息，以通知用户有可用的更新。

index

指定用来充当索引页的文件以满足导航请求。通常是/index.html。

assetGroups

资产（Assets）是与应用一起更新的应用版本的一部分。 它们可以包含从页面的同源地址加载的资源以及从 CDN 和其它外部 URL 加载的第三方资源。 由于在构建时可能没法提前知道所有这些外部 URL，因此也可以指定 URL 的模式。

该字段包含一个资产组的数组，每个资产组中会定义一组资产资源和它们的缓存策略。

content_copy{
  "assetGroups": [{
    ...
  }, {
    ...
  }]
}

每个资产组都会指定一组资源和一个管理它们的策略。 此策略用来决定何时获取资源以及当检测到更改时该怎么做。

这些资产组会遵循下面的 Typescript 接口：

content_copyinterface 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[];
  };
}

name

name 是强制性的。它用来标识该配置文件版本中这个特定的资产组。

installMode

installMode 决定了这些资源最初的缓存方式。installMode 可以取如下两个值之一：

  • prefetch 告诉 Angular Service Worker 在缓存当前版本的应用时要获取每一个列出的资源。 这是个带宽密集型的模式，但可以确保这些资源在请求时可用，即使浏览器正处于离线状态。

updateMode

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

  • prefetch 会告诉 Service Worker 立即下载并缓存更新过的资源。

resources

本节描述要缓存的资源，分为三组。

  • files 列出了与 dist 目录中的文件相匹配的模式。它们可以是单个文件也可以是能匹配多个文件的类似 glob 的模式。

dataGroups

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

数据组遵循下列 TypeScript 接口：

content_copyexport interface DataGroup {
  name: string;
  urls: string[];
  version?: number;
  cacheConfig: {
    maxSize: number;
    maxAge: string;
    timeout?: string;
    strategy?: 'freshness' | 'performance';
  };
}

name

和 assetGroups 下类似，每个数据组也都有一个 name ，用作它的唯一标识。

urls

一个 URL 模式的列表。匹配这些模式的 URL 将会根据该数据组的策略进行缓存。 （不支持 glob 中的逆模式）

version

API 有时可能会以不向后兼容的方式更改格式。 新版本的应用可能与旧的 API 格式不兼容，因此也就与该 API 中目前已缓存的资源不兼容。

version 提供了一种机制，用于指出这些被缓存的资源已经通过不向后兼容的方式进行了更新，并且旧的缓存条目（即来自以前版本的缓存条目）应该被丢弃。

version 是个整型字段，默认为 0。

cacheConfig

本节定义了对匹配上的请求进行缓存时的策略。

maxSize

（必需）缓存的最大条目数或响应数。开放式缓存可以无限增长，并最终超过存储配额，建议适时清理。

maxAge

（必需）maxAge 参数表示在响应因失效而要清除之前允许在缓存中留存的时间。maxAge 是一个表示持续时间的字符串，可使用以下单位作为后缀：

  • d：天数

比如，字符串 3d12h 规定此内容最多缓存三天半。

timeout

这个表示持续时间的字符串用于指定网络超时时间。 如果配置了它，Angular Service Worker 在开始使用缓存之前就会先等待网络给出响应，这个等待时间就是网络超时时间。

strategy

Angular Service Worker 可以使用两种缓存策略之一来获取数据资源。

  • performance，默认值，为尽快给出响应而优化。如果缓存中存在某个资源，则使用这个缓存版本。 它允许资源有一定的陈旧性（取决于 maxAge）以换取更好的性能。适用于那些不经常改变的资源，例如用户头像。

navigationUrls

这个可选节让你可以指定一个自定义的 URL 列表，它们都会被重定向到索引文件。

处理导航请求

对于没有匹配上任何 asset 或 data 组的导航请求，ServiceWorker 会把它们重定向到指定的索引文件。下列请求将会视为导航请求：

  • 它的模式是 navigation。

默认情况下，这些条件是：

  • URL 的最后一段路径中不能包含文件扩展名（比如 .）。

匹配导航请求的 URL

虽然这些默认条件在大多数情况下都挺好用，不过有时还是要配置一些不同的规则。比如，你可能希望忽略一些特定的路由（它们可能不是 Angular 应用的一部分），而是把它们透传给服务器。

该字段包含一个将要在运行期间匹配的 URL 和 类似 glob 的 URL模式。 它既可以包含正向模式也可以包含反向模式（比如用 ! 开头的模式）。

只有那些能匹配任意正向 URL 或 URL 模式并且不匹配任何一个反向模式的 URL 才会视为导航请求。当匹配时，这些 URL 查询将会被忽略。

如果省略了该字段，它的默认值是：

content_copy[
  '/**',           // Include all URLs.
  '!/**/*.*',      // Exclude URLs to files.
  '!/**/*__*',     // Exclude URLs containing `__` in the last segment.
  '!/**/*__*/**',  // Exclude URLs containing `__` in any other segment.
]