Angular 里的 Service Worker

2022-08-04 22:05:05 阅读：195 来源： 互联网

标签：缓存 Service Worker 应用程序 isocode Angular

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

标签：缓存,Service,Worker,应用程序,isocode,Angular
来源： https://www.cnblogs.com/sap-jerry/p/16552433.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Angular 里的 Service Worker