Angular 里的 Service Worker

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

从 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 检查服务器是否有可用更新。



相关文章
|
2月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
|
10月前
|
Web App开发 缓存 安全
Angular 应用要启用 Service Worker 所需满足的一些前提条件
Angular 应用要启用 Service Worker 所需满足的一些前提条件
|
10月前
|
存储 JavaScript API
如何使用 Angular 服务器端渲染的 Transfer State Service
如何使用 Angular 服务器端渲染的 Transfer State Service
|
资源调度 前端开发 Java
使用Angular CDK实现一个Service弹出Toast组件
使用Angular CDK实现一个Service弹出Toast组件
103 0
|
Web App开发 缓存 安全
Angular 应用要启用 Service Worker 所需满足的一些前提条件
Angular 应用要启用 Service Worker 所需满足的一些前提条件
91 0
Angular 应用要启用 Service Worker 所需满足的一些前提条件
为 Angular service 注册 provider 的三种方式
为 Angular service 注册 provider 的三种方式
217 0
为 Angular service 注册 provider 的三种方式
|
测试技术
对具有外部依赖的Angular服务类(service class)进行单元测试的几种方式
对具有外部依赖的Angular服务类(service class)进行单元测试的几种方式
132 0
对具有外部依赖的Angular服务类(service class)进行单元测试的几种方式
|
JavaScript
Angular Service依赖注入的一个具体例子
Angular Service依赖注入的一个具体例子
115 0
Angular Service依赖注入的一个具体例子
|
2月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
2月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
40 0