Angular 里的 Service Worker

JerryWang_汪子熙 2023-09-28 原文

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

有关Angular 里的 Service Worker的更多相关文章

ruby-on-rails - Rails with angular 与 Rails pure(查看性能) - 2
我尝试在Internet上搜索有关使用angularJS进入RubyonRails项目与RubyonRailspure的View性能的信息。我的问题是因为2个月前我开始使用纯AngularJS，现在我需要将AngularJS集成到一个新项目中，但需要展示使用带有RubyonRails的AngularJS呈现View的性能如何，并消除对RubyonRails的负担.例如:带Rails的Angular:使用RubyonRails获取数据(从数据库或GET请求)，将信息发送到file.js.erb并使用AngularJS操作数据并显示带有解析数据的View。纯粹的Rails:(自然流程)使用
ruby-on-rails - 将 Angular JS 与 Rails 集成 - 2
我需要一些指导来了解如何将Angular整合到rails中。选择Rails的原因:我喜欢他们偏执的做事方式。还有迁移，gem真的很酷。使用angular的原因:我正在研究和寻找最适合SPA的框架。Backbone似乎太抽象了。我不得不在Angular和Ember之间做出选择。我首先开始阅读Angular，它对我来说很有意义。所以我从来没有去读过关于ember的文章。使用Angular和Rails的原因:我研究并尝试使用小型框架，例如grape、slim(是的，我也使用php)。但我觉得需要坚持项目的长期范围。我个人喜欢用Rails的方式做事。这就是我需要帮助的地方，我在Rails4中有
ruby - Prawn :有没有办法让一个盒子里的所有内容垂直对齐？ - 2
我正在尝试将一些内容垂直居中放置在bounding_box中。对于单个文本，这没问题:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"verticallyalignedinthesurroundingbox",:valign=>:centerend但是如果我的边界框中有多个元素，我该怎么办:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"vertic
与Angular 2集成时，Bootstrap下拉列表和Bootstrap TagSinput不起作用 - 2
Bootstrap下拉代码正常工作（无角2），但相同的代码与Angular2集成在一起，它无法按预期工作。HTML和CSS代码：[下拉活动正在工作。]YoucanLoginSignupHTML和具有角2的CSS[下拉行动不起作用。]YoucanLoginSignup看答案LoginSignup尝试此..使用最终版本，除非您有路径参数，否则RouterLink不应用作套餐。然后在路由器文件中RouterModule.forRoot([{path:"login",component:},{path:"signup",component:}])
Angular 4懒负载模块与名称的儿童插座无效 - 2
我正在尝试为模块实现懒惰加载。该模块有一堆儿童路线独特的出口名称。当我尝试访问路线时，这似乎不起作用。从我保存的这个示例中，这似乎可以：https://plnkr.co/edit/nnxaozitm00riixzemts?p=preview您可以看到我有孩子的路线{path:'list',component:HeroListComponent,outlet:'abc'},在hero-routing.module.ts和路由器出口：在hero.com.ponent.ts当我在本地运行时，我应该能够访问Localhost：3000/Heroes/（ABC：List），但似乎不起作用。注意：您可以通
如何在Angular应用中而不是Favicon.ico中提供favicon.png？ - 2
我创建了一个新的Angular应用程序：ngnew...我可以使用以下方式查看该应用程序ngserve--open我删除了默认值src/favicon.ico并替换为src/favicon.png。我也打开了src/index.html并更改了适当的行以阅读：这似乎没有起作用。发出GET请求/favicon.png只需返回内容src/index.html。重新启动ngserve没有区别。如何使该文件可以访问该应用程序？看答案制作具有相同名称的PNG图像（即favicon.png）并更改这些文件中的名称。index.htmlAngular.json"assets":["src/favicon.p
css - 将 SASS 用于 Ruby on Rails 时，如何使用 border-radius 属性删除导航栏圆 Angular ？ - 2
我是编程新手，通过一门名为OneMonthRails的类(class)学习bootstrap。我想删除反向导航栏上的圆Angular，但我很难。我已经查看了下面链接中的两个stackoverflow线程，但仍然遇到问题。目前我有一个名为“Bootstrap_and_customization.css.scss”的文件，它包含以下代码:$body-bg:#95a5a6;$border-radius:0px;@import'bootstrap';但是，边框半径仍然是圆的。我希望我提供了足够的信息，但我可能没有，所以请告诉我。谢谢=====链接:Gettingridofalltheround
javascript - 在 Angular js中用字符串 "null"替换空数据 - 2
我必须使用ng-repeat在html页面中显示表格。表中的大多数条目都有空数据，但我无法用空格或字符串null替换null。我试过{{行||'null'}}但它没有帮助。当它生成表时，如果行中有大量空值，它会把它完全搞砸。{{colname}}{{row||'null'}} 最佳答案旧的怎么样ng-show和ng-hide如果值为“null”，则显示某些内容。替换{{row||'null'}}与{{row}}/div>null 关于javascript-在Angularjs中用字符串
javascript - 结合 AngularJS、jQueryUI、Angular-Drag-Drop 排序列表 - 2
我遇到以下情况，我需要允许用户从列表中选择对象并将它们拖/放到某个插槽中:对象的大小可以是插槽的一到三倍。所以如果用户将Object1拖到Slot0，那么它只占用Slot0(startSlot=0和endSlot=0)。但是，如果用户将对象3拖动到插槽3，则它会占用插槽3、4和5(startSlot=3和endSlot=5)。将对象放入槽中后，用户可以通过在槽中单击并上下拖动对象来重新排序对象。对象不能相互重叠:我正在使用Angular，所以我正在从数据库中读取对象列表，并且我有一个槽数变量。我尝试了几种解决方案。我相信使用jQuery和jQueryUI可拖动、可放置和可排序是解决方案
javascript - 引用错误 : _ is not defined while using angular-google-maps - 2
我收到ReferenceError:_isnotdefinedangular-google-maps我真的不明白为什么我会收到这个错误，因为我完全按照网站上写的去做。我也搜索过类似的问题，但没有帮助。bundle.js$=window.$=window.jQuery=require('./lib/jquery');require('./lib/angular-simple-logger.js');require('./lib/angular-google-maps.js');require('./lib/lodash.js');我正在将bundle.js导入到index.html中。我

Angular 里的 Service Worker

有关Angular 里的 Service Worker的更多相关文章

随机推荐