关于前端: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"
      }
    }
  ]
}

装置 Angular Service Worker 就像蕴含一个 NgModule 一样简略。除了向浏览器注册 Angular Service Worker 之外，这还使得一些服务可用于注入，这些服务与 Service Worker 交互并能够用来管制它。例如，应用程序能够要求在有新更新可用时失去告诉，或者应用程序能够要求 Service Worker 查看服务器是否有可用更新。