由H5逼近App——PWA技术泛谈
App开发模式概览：
原生App开发(native App)；
Android App开发(java 、Kotlin)
IOS App开发(Objective-C、Swift)
web App开发(Web App)；
普通H5应用开发
PWA应用开发
混合App开发（hybrid App）:
微信-小程序
快应用
超级App-H5应用
跨平台开发框架(一套代码，多端运行)：
Flutter
React Native
Uni-App
Weex
H5开发与原生开发的对比：
| 场景 | Web App开发 | Native App开发 |
|---|---|---|
| 应用运行环境 | 浏览器；类webView的沙箱环境 | 操作系统 |
| 语言标准制定者 | W3C组织及ECMA协会（标准化组织） | Google/App/Huawei（商业公司） |
| 开发语言 | js/h5/css | Java/kotlin/Object-C/Swift |
| 兼容性考虑 | 需要在不同浏览器版本及不同浏览器应用中兼容。此外，在小程序、快应用、鸿蒙场景，需要使用个性化的APi能力 | Android和IOS间无法兼容；同一操作系统中需要对系统版本兼容； |
综上：Web App开发受制于浏览器能力；Native App开发受制于手机系统的能力 大家之所以认为h5开发天然具有出端能力，是因为浏览器在基础的W3C标准上屏蔽了Android和IOS手机系统的差异。 但这仅局限于H5标准特性能力，这部分依托于浏览器提供的能力落后于操作系统提供的能力。在与系统能力的交互上，难以达到原生App的水平。
PWA解决H5 App的痛点：
Web App 足以满足大多数 App 的需求，但是三大缺陷阻碍它的推广。
- 不能从手机的首屏直接进入。——入口深入
- 不支持脱机访问（即断网也能使用）。——网络要求高
- 缺乏手机状态栏和锁屏时的通知推送能力。——主动通知
"渐进式 Web App"（Progressive Web App，缩写 PWA）。它可以把网站缓存在手机里面，供离线时使用，还能在手机首屏生成图标，直接点击进入，并且有通知推送能力，也不带有浏览器的地址栏和状态栏，跟原生 App 的使用体验非常接近。
PWA应用特性演示：
PWA、快应用/小程序、鸿蒙应用的异同：
| 场景 | 相同点 | 异——PWA | 异——快应用 | 异——鸿蒙应用 |
|---|---|---|---|---|
| 语言开发 | 本质都是使用js/html/css语言进行开发 | PWA需要浏览器支持对应的语言特性，开发语言遵循ECMA规范 | 自己封装了js/html/css，开发语言属于自己生态构建中自定义语言。 | 同快应用 |
| 运行环境 | / | PWA运行在原生浏览器上 | 快应用运行在各大手机厂商的快应用容器中 | 鸿蒙应用运行在鸿蒙系统操作系统中 |
| 应用入口 | 都允许桌面图标进入 | 允许url访问 | 不允许url直接访问 | 同快应用 |
| 系统能力 | 都支持消息推送和系统提醒 | 云侧依赖的浏览器厂商的推送中心；端侧依赖浏览器厂商集成的push service | 各手机厂商形成快应用联盟，支持跨端推送。提供统一的推送中心；不支持快应用自己捕获消息处理通知 | HMS-Push kit能力 |
| 应用资源存储位置 | / | 浏览器将web资源及数据长期缓存本地 | 由快应用容器控制，一般不缓存本地。 | 安装在本地 |
PWA开发的关键技术点——service Worker：
缓存精细控制：
普通H5页面访问后，静态资源无法在客户端长期保存，接口数据不会缓存。
PWA访问一次后，所有的请求都由sw代理，所有资源可以长期缓存在浏览器客户端，也可以对每一个请求进行精细话控制。因此可以做到断网仍能使用。
前台单线程与后台多线程:
普通H5页面加载，都在单个线程上完成，对于阻塞耗时的操作，使用异步回调的形式来处理； PWA内可以通过sw，允许允许主线程创建Worker 线程，将一些任务分配给后者运行。即使前台主线程被关闭了，后台线程依旧可以继续运行。
PWA与App出端思考：
PWA它不是一门技术，而是一个概念，他的意思就是使用多种技术来增强 Web App 的功能，逐渐逼近原生App的能力。
但H5 App本质是运行在沙盒里的脚本/标记语言开发，它的效果实现是依赖浏览器与手机系统的打通。而目前PWA各标准规范并没有在各大浏览器得到全面兼容
目前，小程序、快应用、鸿蒙应用等，多个生态也都秉持着PWA的理念在构建自己的生态。以泛H5的开发语言，实现自有生态里的多场景入口构建。
PWA目前还只是一项探索性质的技术，旨在以浏览器承载App能力。是出端手段的一种。对于各轻量级的H5应用，是一个不错的尝试。
但也正是目前这混战的现状，虽然各场景入口的H5 App体验在逐渐逼近原生App，但如果一个App希望全面出端，成本也格外的高昂。
等到市场和技术趋于终态时，大家希望的全场景出端方案，是什么？鸿蒙/PWA/快应用？
参考：
《H5 手机 App 开发入门：概念篇》：https://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html
MDN Web Docs关于渐进式 Web 应用程序 (PWA)的介绍和开发文档：https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
《PWA 应用实战》：https://lavas-project.github.io/pwa-book/
演示的pwa能力的h5代码库：https://github.com/alienzhou/learning-pwa/tree/master