Angular 里的 Service Worker

从 5.0.0 版本开始，Angular 附带了一个 Service Worker 实现。 Angular 开发人员可以利用这个 service worker 并从其提供的更高的可靠性和性能中受益，而无需针对低级 API 编写代码。

这个实现就是 SAP 电商云 Spartacus UI package.json 中提到的依赖 @angular/pwa：

Angular 的 Service Worker 旨在优化最终用户在缓慢或不可靠的网络连接上使用应用程序的体验，同时最大限度地降低提供过时内容的风险。

为此，Angular Service Worker 遵循以下准则：

• 缓存应用程序就像安装本机应用程序。 应用程序被缓存为一个单元，所有文件一起更新。

• 正在运行的应用程序继续使用所有文件的相同版本运行。 它不会突然开始从可能不兼容的较新版本接收缓存文件。

• 当用户刷新应用程序时，他们会看到最新的完全缓存版本。 新选项卡加载最新的缓存代码。

• 更新发生在后台，在发布更改后相对较快。 在安装并准备好更新之前，会提供应用程序的先前版本。

• Service Worker 会尽可能节省带宽。 仅当资源发生更改时才会下载资源。

为了支持这些行为，Angular Service Worker 从服务器加载一个清单文件。 该文件名为 ngsw.json，描述要缓存的资源并包含每个文件内容的哈希值。 当部署应用程序更新时，清单的内容会发生变化，通知 Service Worker 应该下载并缓存应用程序的新版本。 此清单是从名为 ngsw-config.json 的 CLI 生成的配置文件生成的。

Spartacus 的 ngsw-config.json 文件的内容如下：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js",
          "/manifest.webmanifest"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "basesites",
      "urls": [
        "*/basesites?fields=baseSites\\(uid,defaultLanguage\\(isocode\\),urlEncodingAttributes,urlPatterns,stores\\(currencies\\(isocode\\),defaultCurrency\\(isocode\\),languages\\(isocode\\),defaultLanguage\\(isocode\\)\\),theme,defaultPreviewCatalogId,defaultPreviewCategoryCode,defaultPreviewProductCode\\)*"
      ],
      "cacheConfig": {
        "maxSize": 1,
        "maxAge": "1d",
        "strategy": "performance"
      }
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

安装 Angular Service Worker 就像包含一个 NgModule 一样简单。 除了向浏览器注册 Angular Service Worker 之外，这还使得一些服务可用于注入，这些服务与 Service Worker 交互并可以用来控制它。 例如，应用程序可以要求在有新更新可用时得到通知，或者应用程序可以要求 Service Worker 检查服务器是否有可用更新。