在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

创作场景

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