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

在GMTC北京2018大会上，于秋讲师做了《跨容器高性能的离线化方案在美团的实践和探索》主题演讲，主要内容如下。

演讲简介：

为了提升部门业务的页面性能，我们需要在多个不同的移动 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） 熟悉资源字符级更新实现原理

讲师介绍：

于秋

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

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

完整演讲 PPT 下载链接：

https://gmtc.infoq.cn/2018/beijing/schedule