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

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

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

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

下面是 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/ ./ngsw-config.json [/base/href]​​

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

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

​​**​​: 匹配 0 个或多个路径段​​*​​: 匹配 0 个或多个字符，不包括 /​​?​​: 只匹配一个字符，不包括 /​​!​​：prefix 将模式标记为否定，这意味着只包含与模式不匹配的文件

一些例子：

​​/**/*.html​​: 匹配所有 HTML 文件​​/*.html​​：匹配根目录下的 HTML 文件​​!/**/*.map​​: 排除所有的 sourcemaps

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。