跨容器高性能的离线化方案在美团的实践和探索

所属专题:PWA专场

嘉宾 : 于秋 | 美团点评智能支付部前端负责人

讲师介绍

专题演讲嘉宾:于秋

美团点评智能支付部前端负责人

美团点评前端技术专家,曾先后负责部门基础技术服务和整个智能支付部门前端团队,对前端工程化以及架构有自己独特的认识。乐于尝试各种新技术,结合业务场景,探索落地方案。业余时间喜欢在知乎上写写文章,潜水看看海底世界。

议题介绍

演讲:跨容器高性能的离线化方案在美团的实践和探索

为了提升部门业务的页面性能,我们需要在多个不同的移动App容器里面实现自己的离线化方案,同时由于App不是自家的,所以不能借用目前流行的离线包之类的想法,只能从纯Web来思考。最终我们自己基于 Service Worker 的 PWA 方案在离线化上起到了核心作用,针对目前能够支持 Service Worker 的设备较为有限的环境背景,我们在踩过PWA无数坑之后,实现了结合 Service-Worker + JS loader 的兼容性 Web 资源离线化方案。在实现资源的离线化缓存之后,我们还尝试了降低资源的更新开销,提升了资源加载速度,节省用户流量。

提纲: 

1、项目背景

(1) 多容器 美团 X5 UC  SW 兼容性

(2) 用户场景,缓存周期取决于使用周期,缓存利用率

2、离线化思考

(1) 一般离线化方案

(2) App端的离线化方案

3、PWA破局思路 

(1) PWA核心能力SW

4、缓存策略方案

(1) 使用不同的缓存策略

(2) 合理的缓存周期与缓存回收控制

5、资源更新优化方案

(1) 更小的成本实现资源更新,流量节省

6、前端延伸 – 基于Golang的Diff服务

7、容错方案

8、成果总结

 

听众收益:

提供基于PWA的离线化新思路,并在字符级更新,场景策略结合方面加入了新的想法,同时在技术细节上能有以下收获:

(1) 熟悉 Service Worker 的生命周期

(2) 熟悉 Progressive Web App 的离线存储,以及缓存回收机制的最佳实践

(3) 熟悉如何进行 Service Worker 调试

(4) Service Worker 实现 Web 静态资源离线化

(5) Lighthouse 页面加载性能的审计工具的使用

(6) 熟悉资源字符级更新实现原理

本网站图片存储由七牛云独家支持
扫码关注前端之巅,即可获取GMTC PPT