（Progressive Web Apps）PWA 入门分享

1. Progressive Web Apps
入门分享

2. PWA 是什么？

3. – Shelwon
“利用现代 Web 新技术以尝试在移动设备上提供
接近 Native App 体验的 Web Apps”

4. 线上例子

5. Flipkart

7. 离线？

9. PWA 的特性

10. • 体验流畅 - 接近 Native App 的交互和体验
• 安全 - 强制使用 HTTPS 来通信
• 利于 SEO - manifest 可以让搜索引擎更好地发现应
用
• 便于分享 - 通过 Url 就可以轻松分享

11. • 可安装 - 添加图标到主屏幕
• 离线运行 - 没有网络和网速差的条件仍然可以提供访
问
• 推送消息 - 像 Native App 那样收到消息推送
• 持续更新- 可以悄悄地在后台更新应用数据

12. 如何升级到 PWA

13. 早在 Chrome 31 的时候

15. 没有网络的时候

17. 半成品

18. The Web App Manifest

20. • short_name：PWA 图标被添加到主屏幕时候显示的名字（类似主屏幕上
Native App 的名字）
• name： PWA 启动时的标题。
• icons：PWA 图标
• start_url：定义了 PWA 的入口页面。比如开发者把这个属性设为 Flipkart
Lite 的商品列表页，那么从主屏打开就是 Flipkart Lite 的商品列表页。
• theme_color/background_color：主题色与背景色，用于配置一些可定制的
操作系统 UI 以提高用户体验，比如 Android 的状态栏、任务栏等。
• display：设置你的 PWA 启动时是全屏还是像在浏览器那样有顶部导航栏。
• orientation：设置 PWA 启动时候是横屏还是竖屏。

21. Service Worker

22. – MDN CN
“充当位于 Web 应用程序之间，以及浏览器和网
络的代理服务器。它的存在是为了能够创建有效
的离线体验，拦截网络请求并且可以根据网络是
否可用以及是否去服务器获取页面更新而做出不
同的响应。”

23. SW初次安装的生命周期

27. • 假如这个 SW 已经注册过，上面代码会被忽略
• sw.js 根据需要放在不同层级的目录（./sw.js 和
./demo/sw.js 作用域不一样）
• chrome://inspect/#service-workers 检查是否生效

28. Web Push &
Notification API

30. Web Storage

31. • Cache API - PWA 页面所需的静态文件比如
JavaScript、CSS 和 HTML
• IndexedDB - 存储页面数据，比如电商 PWA 的列表
页或者商品详情页的数据。

32. More Amazing Web
API

33. • Payment Request API
• Geolocation API
• Device Orientation & Motion API
• getUserMedia

34. 展望 PWA 的未来

35. 黯淡的现状

36. • iOS (safari) 不支持 PWA
• 国内 Android 设备支持程度堪忧
• 国产移动浏览器厂商支持欲望不足
• Chrome 浏览器只认自家的 GCM
• 国内 webview 环境复杂，比如微信

37. 进步的现在

38. • Webkit 内核：API 开发在「五年计划」中
• EdgeHTML 内核：关键技术都在「正在开发中」
• Blink 内核和 Gecko 内核：全部实现

39. 想了解更多？

40. 参考链接
• PWA 官网：
https://developers.google.com/web/fundamentals/g
etting-started/codelabs/your-first-pwapp/?hl=zh-cn
• 一系列 PWA 应用集合展示：https://pwa.rocks/
• 介绍 PWA 的精品文章：
https://zhuanlan.zhihu.com/p/25167289

41. Q&A