当前位置: 首页 > Web前端 > HTML

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

时间:2023-03-28 10:39:35 HTML

PWA应用程序ServiceWorker缓存的一些可选策略和使用场景这增加了用户性能并改善了用户体验,因为它增加了另一层缓存并减少了服务器端渲染(SSR)服务的负载。PWA的工作方式是,对于一个已定义的应用程序文件列表,它会根据文件的内容生成一个文件哈希。此哈希在客户端浏览器中用于确定文件是否已更改。例如,在重新部署的情况下,应重新加载这些文件。Networkonly:内容必须始终是最新的,适用于电商支付结账、余额报表等场景。网络回退缓存:最新内容优先。但是,如果网络出现故障或不稳定,则可能会提供稍旧的内容。适用场景包括及时的数据、价格和费率(需要免责声明)、订单状态等。Stale-while-revalidate:缓存的内容可以立即提供,但稍后应该使用更新的缓存内容。适用场景包括新闻提要、产品列表页面、消息等。先缓存,回退到网络:内容是非关键的,可以从缓存中提供以提高性能,但ServiceWorker应该偶尔检查更新。适用于Appshell和Commonresources.Cacheonly:适用于内容很少变化的静态资源。下面是SAP电商云SpartacusUIngsw-config.json文件的内容:{"index":"/index.html","assetGroups":[{"name":"app","installMode":"prefetch","资源":{"文件":["/favicon.ico","/index.html","/*.css","/*.js","/manifest.webmanifest"]}}],“dataGroups”:[{“name”:“basesites”,“urls”:[“*/basesites?fields=baseSites\\(uid,defaultLanguage\\(isocode\\),urlEncodingAttributes,urlPatterns,stores\\(货币\\(isocode\\),默认货币\\(isocode\\),语言\\(isocode\\),defaultLanguage\\(isocode\\)\\),主题,defaultPreviewCatalogId,defaultPreviewCategoryCode,defaultPreviewProductCode\\)*"],"cacheConfig":{"最大尺寸":1,"maxAge":"1d","strategy":"performance"}}]}ngsw-config.json配置文件指定AngularServiceWorker应该缓存哪些文件和数据URL,以及它应该如何更新缓存文件和数据AngularCLI在ng构建期间读取此配置文件。./node_modules/.bin/ngsw-config./dist/./ngsw-config.json[/base/href]这个配置文件是JSON格式的。所有文件路径都必须以/开头,它对应于部署目录-在CLI项目中通常是dist/。文件中允许的特殊符号(通配符)的含义:**:匹配0个或多个路径段*:匹配0个或多个字符,不包括/?:只匹配一个字符,不包括/!:前缀将模式标记为负数,表示只包含不符合模式的文件一些例子:/**/*.html:匹配所有HTML文件/*.html:匹配根目录中的HTML文件!/**/*.map:排除所有源地图