本次分享将围绕以下几方面展开，希望能给大家带来对PWA的进一步思考：

1. PWA的核心能力

   (1) Service Worker，独立的JS线程，与文档无关的生命周期，离线更新资源的能力。
   (2) Reliable 
   SW Cache、Fetch、Push、Navigation Preload、Background Fetch、Background Synchronization、   CompositorWorker 这些能力如何让Web变得更可靠？

2. PWA的优秀实践

很多页面用上PWA之后，效果并没有想象的那么好，和重构之前基本持平，那么，如何才能发挥PWA的真正效果？怎么才能在国内环境下玩转ServiceWorker Push预加载？

（1）从内核的角度分析，为何普通的用法无法带来性能的大幅提升。
    SW的启动耗时分析
    SWCache与HttpCache的关系和优劣
（2）SW缓存主文档的实现和效果
（3）SW Push预加载的实现和效果
（4）SW独立线程的应用

3. PWA带来的影响

（1）逐步给前端开放浏览器内核基础能力，甚至是操作系统能力，比如缓存、推送、添加桌面图标、下载、图片解码、渲染等等
（2）前端正变得无所不能，很多事情都可在Web实现，比如SW、WebGL、WebRTC、WebAR/VR等等

听众受益：

1.了解PWA的核心能力和关键优势。
2.了解PWA相关的优秀实践，了解PWA可以做什么和如何做得更好。
3.了解PWA对Web和前端产生的影响。
 

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

在构建 PWA 应用时，使用 App Shell 模型能够在视觉和首屏加载速度方面带来用户体验的提升。另外，在配合 Service Worker 离线缓存之后，用户在后续访问中将得到快速可靠的浏览体验。在实践过程中，借助流行框架与构建工具提供的众多特性，我们能够在项目中便捷地实现 App Shell 模型及其缓存方案。最后，在常见的 SPA 项目中，我们试图使用 Skeleton 方案进一步提升用户的感知体验。

演讲提纲：

1. App Shell 模型

在 PWA 中，使用 App Shell 模型将通用的资源与动态内容分离，可以实现对于用户的快速响应。配合 Service Worker 实现 App Shell 的预缓存之后，在弱网甚至离线环境依然能给予用户可靠的浏览体验。另外，借助流行框架与构建工具的先进特性，开发者不必从头实现 App Shell 的全部细节。

(1) 介绍 PRPL 模式和 App Shell 模型思想

(2) 介绍应用该模型后，在用户体验上带来的提升效果

    用户浏览站点时，带来近似 Native App 的视觉效果

    提升首屏加载速度

(3) 介绍在实际项目开发中，如何借助框架和构建工具实现该模型

(4) 介绍在不同架构（SPA、MPA、SSR）下的 Service Worker 通用预缓存方案

2. Skeleton 方案

为了进一步提升用户感知体验，在 SPA 中可以使用 Skeleton (骨架屏)减少白屏时间。我们将介绍两种生成方案的实现思路，以及在灵活可用性、展现速度上的优化方式。

(1) 构建阶段的生成方案，包含以下两种：

    额外编写组件，使用框架的 SSR (服务端渲染)功能

    自动化生成，使用 Headless Chrome 渲染真实页面内容，随后使用占位符进行替换

(2) 解决 SPA 中多页面差异性问题。根据不同页面路由展现不同内容

(3) 优化展现速度。异步加载样式，避免阻塞以进一步减少白屏时间

 

听众收益

1. 了解 App Shell 模型的思想，感受应用该模型后对于用户体验的提升效果

2. 了解使用已有流行框架工具实现 App Shell 的推荐方式

3. 了解不同项目架构下使用 Service Worker 缓存 App Shell 的通用方案

4. 了解 SPA 中的 Skeleton 方案，能够使用现有生成工具在项目中应用