PWA 应用 Service Worker 缓存的一些可选策略和使用场景

简介: PWA 应用 Service Worker 缓存的一些可选策略和使用场景

SAP 电商云 Spartacus UI 提供了将站点作为 PWA 运行的功能。 这提高了用户性能,改善了用户体验,因为它添加了另一个缓存层,并减少了服务器端渲染 (SSR) 服务的负载。


PWA 的工作方式是,对于定义的应用程序文件列表,它会根据文件的内容生成文件哈希。 此哈希用于在客户端浏览器中决定文件是否已更改。比如重新部署的情况下,这些文件应该重新加载。


Network only:内容必须始终是最新的,适用于电商的付款和结帐,余额报表等场景。

Network falling back to cache:优先提供最新的内容。 但是,如果网络出现故障或不稳定,则可以提供稍旧的内容。适用场景有及时的数据,价格和费率(需要免责声明),订单状态等。

Stale-while-revalidate:可以立即提供缓存内容,但以后应该使用更新的缓存内容。适用场景有新闻提要,产品列表页面,留言等。

Cache first, fall back to network:内容是非关键的,可以从缓存中提供以提高性能,但 Service Worker 应偶尔检查更新。适用于 App shells 和 Common resources.

Cache only: 适用于内容极少发生变化的静态资源。

下面是 SAP 电商云 Spartacus UI 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"
      }
    }
  ]
}


ngsw-config.json 配置文件指定 Angular Service Worker 应该缓存哪些文件和数据 URL,以及它应该如何更新缓存的文件和数据。Angular CLI 在 ng build 期间会读取这个配置文件。


./node_modules/.bin/ngsw-config ./dist/<project-name> ./ngsw-config.json [/base/href]


该配置文件使用 JSON 格式。 所有文件路径都必须以 / 开头,它对应于部署目录——通常是 CLI 项目中的 dist/<project-name>。


文件里允许出现的特殊符号(通配符)的含义:


  • **: 匹配 0 个或多个路径段


  • *: 匹配 0 个或多个字符,不包括 /


  • ?: 只匹配一个字符,不包括 /


  • !:prefix 将模式标记为否定,这意味着只包含与模式不匹配的文件


一些例子:


  • /**/*.html: 匹配所有 HTML 文件


  • /*.html:匹配根目录下的 HTML 文件


  • !/**/*.map: 排除所有的 sourcemaps



相关文章
|
1月前
|
存储 缓存 算法
缓存淘汰策略
缓存淘汰策略
31 0
|
1月前
|
存储 缓存 NoSQL
后端开发中的缓存策略:提升应用性能的关键
后端开发中的缓存策略:提升应用性能的关键
26 0
|
1月前
|
缓存 监控 NoSQL
解析Redis缓存雪崩及应对策略
解析Redis缓存雪崩及应对策略
|
2月前
|
存储 缓存 UED
缓存策略与Apollo:优化网络请求性能
缓存策略与Apollo:优化网络请求性能
|
5天前
|
存储 缓存 安全
基于iOS平台的高效图片缓存策略实现
【4月更文挑战第22天】 在移动应用开发中,图片资源的加载与缓存是影响用户体验的重要因素之一。尤其对于iOS平台,由于设备存储空间的限制以及用户对流畅性的高要求,设计一种合理的图片缓存策略显得尤为关键。本文将探讨在iOS环境下,如何通过使用先进的图片缓存技术,包括内存缓存、磁盘缓存以及网络请求的优化,来提高应用的性能和响应速度。我们将重点分析多级缓存机制的设计与实现,并对可能出现的问题及其解决方案进行讨论。
|
5天前
|
存储 缓存 算法
实现iOS平台的高效图片缓存策略
【4月更文挑战第22天】在移动应用开发中,图片资源的处理是影响用户体验的重要因素之一。特别是对于图像资源密集型的iOS应用,如何有效地缓存图片以减少内存占用和提升加载速度,是开发者们面临的关键挑战。本文将探讨一种针对iOS平台的图片缓存策略,该策略通过结合内存缓存与磁盘缓存的机制,并采用先进的图片解码和异步加载技术,旨在实现快速加载的同时,保持应用的内存效率。
|
24天前
|
缓存 关系型数据库 MySQL
MySQL 查询优化:提速查询效率的13大秘籍(索引设计、查询优化、缓存策略、子查询优化以及定期表分析和优化)(中)
MySQL 查询优化:提速查询效率的13大秘籍(索引设计、查询优化、缓存策略、子查询优化以及定期表分析和优化)(中)
|
2月前
|
缓存 Java 数据库
优化您的Spring应用程序:缓存注解的精要指南
优化您的Spring应用程序:缓存注解的精要指南
45 0
|
11天前
|
缓存 NoSQL Java
使用Redis进行Java缓存策略设计
【4月更文挑战第16天】在高并发Java应用中,Redis作为缓存中间件提升性能。本文探讨如何使用Redis设计缓存策略。Redis是开源内存数据结构存储系统,支持多种数据结构。Java中常用Redis客户端有Jedis和Lettuce。缓存设计遵循一致性、失效、雪崩、穿透和预热原则。常见缓存模式包括Cache-Aside、Read-Through、Write-Through和Write-Behind。示例展示了使用Jedis实现Cache-Aside模式。优化策略包括分布式锁、缓存预热、随机过期时间、限流和降级,以应对缓存挑战。
|
14天前
|
存储 缓存 自动驾驶
缓存策略与Apollo:优化网络请求性能
缓存策略与Apollo:优化网络请求性能

热门文章

最新文章