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