企业级项目基于PWA缓存的最佳实践

1、企业级项目基于PWA缓存的最佳实践技术创新，变革未来业务现状01 |CURRENT SOLUTIONPWA 缓存策略02 |CACHE STRATEGIESSSR 方案03 |SERVER RENDER SOLUTIONCSR 方案04 |CLIENT RENDER SOLUTION更多场景05 |OTHER FEATURES业务现状业务现状800 ms1500 ms业务现状 手Q优化策略静态资源缓存方案首屏 HTML 缓存方案diff 更新800 ms业务现状 - 非手Q优化策略React 同构 SSRService Cache业务的使用场景复杂（手q, 微信, 浏览器, 微博）针对性优化成

2、本高1500 ms业务现状 - PWA场景覆盖并发限制更新机制储存空间PWA 缓存策略PWA SW 未安装状态PWA SW 已安装状态缓存策略 Cache-first：有缓存的时候返回缓存，没有缓存才会去请求并且把请求结果缓存 Stale-while-revalidate：如果有可用的缓存版本，则使用该版本，但下次会获取更新。 Network-first：现网超时后返回缓存 Cache-only：只读取缓存，没有就失败了 Network-only：只请求线上，不读写缓存 有缓存的时候返回缓存，没有缓存时请求现网SW Strategies (Cache-first)SW Strategies (

3、Stale-While-Revalidate)先走缓存，走完缓存发请求，请求的结果会用来更新缓存SW Strategies (Network-first)优先走现网，现网超时时返回缓存SW Strategies (Cache-only)只走缓存SW Strategies (Network-only)只走现网PWA 业务接入情况 (Mobile) 基于离线包方案，缓存静态资源PWA 业务接入情况 (Mobile) 基于离线包方案，缓存静态资源 缓存静态资源 接入后：+80ms PWA 业务接入情况 (PC)PWA 业务接入情况 (PC)PWA 业务接入情况 (PC)PWA 业务接入情况 (PC)

4、 缓存静态资源 接入后：+80ms 优先返回 SW Cache (Chrome 71 前策略)PWA SW Cache(Cache-race) 在SW中同时发起online与SW Cache请求，哪个快返回哪个耗时没有变化PWA SW Cache(Cache-race)PWA 静态缓存策略移动端PC端APP 对 Browser Cache 处理方式不一致在我们的现网数据中Disk Cache 50-70msDisk Cache1-5msMemory Cache 0-1ms结论建议静态资源上 SW Cache非离线刚需，静态资源不建议上 SW CacheSSR 方案SSR HTML Cache

5、(Browser Cache)Browser Cache 有缓存情况SSR HTML Cache (Browser Cache)Browser CacheBrowser Cache 无缓存情况无法及时更新修复 BUG！Browser Cache with BUGSSR HTML Cache (Browser Cache)Search in CacheReturn HTMLUpdate HTMLpostMessagereturn stateSSR HTML Cache (SW Cache)SW Cache (The second time)SSR HTML Cache (SW Cache)SW

6、Cache with BUGSSR 缓存方案静态资源HTML策略使用 Cache-first使用 stale-while-revalidateSSR 方案数据SSR 缓存方案静态资源HTML策略使用 Cache-first使用 stale-while-revalidate思考如何快速新增/删除/修改需要缓存的资源？ 缓存了一个有 BUG 的 html，由于缓存问题，如何快速修复迭代？还有没有优化空间？PWA+ PlatformSW Cache 命中率提升命中率就可以降低首屏耗时？如何提升？ 一级入口、二级入口？23%如何提升命中率 ?二级页预缓存策略 预缓存静态资源 预缓存 HTML 资源二次

7、用户命中率二次用户未命中的原因？不支持 SWSW 没注册完成Cache 存储空间满了，无法进行缓存设置过期时间缓存空间满时，先删除缓存的图片，再重试首次用户如何覆盖？资源预缓存策略 一级入口预缓存二级页面资源CSSJS资源预缓存策略 思考页面资源变更，如何及时更新？一级页面关联的二级页面比较多？每次只能发布来进行Config修改？CSSJS 一级入口预缓存二级页面资源 构建打通 平台关联 业务可关联多个 ID 根据当前 ID，PWA+ 平台下发其绑定业务 ID 相对应的资源文件PWA+ 预缓存策略PWA+ 预缓存策略ID: 1ID: 3HTML,JS,CSSHTML,JS,CSSHTML,JS

8、,CSS二级页面 SW 预注册策略 SW可以跨页面注册 在一级页面预注册二级页面的 SW，第一次就能命中二级页面 SWPageOnline一级页面 - 头部注册方案一级页面 - 头部注册方案关键在于 HTML 主文档解析时间和 SW 注册+网络请求时间本地验证，html 主文档解析时间约为 600ms，而 sw 注册的平均时间在 1000ms 左右SW Cache 命中率71%23%PWA+ (SSR优化方案) 二级页面预注册方案 前置页面，提前注册二级页面的SW，同时通过下发配置， 预加载需要缓存的资源，如html、js、cssPWA+ (SSR优化方案) 一级页面预加载方案 （客户端支持）

9、进入APP打开空的webview，通过下发配置，预加载一级页面必须的资源空白 webview 二级页面预注册方案 前置页面，提前注册二级页面的SW，同时通过下发配置， 预加载需要缓存的资源，如html、js、cssPWA+ (SSR优化方案) 1.5s - 1.28s - 1s - 0.7s 一级页面预加载方案 （客户端支持）进入APP打开空的webview，通过下发配置，预加载一级页面必须的资源 二级页面预注册方案 前置页面，提前注册二级页面的SW，同时通过下发配置， 预加载需要缓存的资源，如html、js、cssCSR 方案CSR HTML Cache (SW Cache)在渲染完成后，我们将页面的 outerHTML 取出，并通过 postmessage 方法将其传给 SWFirst Time VisitSearch in CacheReturn HTMLCSR- (HTML Cache)Second Time Visit二次进入优先显示缓存HTML更新HTML模板再次进入先显示原始HTML模板缓存带数据的HTML第三次访问会白屏一下，如何解决？CSR- (HTML Cache Update) Puppeteer 能做什么？ 如