什么是PWA应用

PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。

PWA不能包含原生OS相关代码。PWA仍然是网站，只是在缓存、通知、后台功能等方面表现更好。所以 PWA 不是指一项技术，而是引用一系列的新技术进行改进web。

核心技术清单

1、web app mainfest
一个程序清单的JSON文件（即项目中引入的manifest.json）， 实现在移动端可以将网站像app一样添加到主屏幕上

2、service worker
pwa的核心技术，可以让网页在离线或者网速比较慢的情况下依然可以访问

3、Cache storage
用来做缓存，service worker 能够实现离线访问主要就是依赖于缓存策略，缓存资源

4、常见的缓存策略
确定哪些资源需要走缓存，那些资源需要走网络

5、notification
用来做通知的，在网页下面也可以实现消息通知

如何添加PWA应用到手机

苹果手机:

使用 Safari 打开相应app网页，点击:凸，然后选择+添加到主屏幕按钮。

比如：使用 Safari 打开微博网页，点击底部导航的 凸 按钮，选择添加到主屏幕，你的主屏幕上就会得到一个微博的 APP

安卓手机:

使用Chrome浏览器打开相应app网页，点击右上角:按钮，然后选择“添加到主屏幕"。

目前百度，QQ， UC浏览器均不(完全)支持添加到主屏幕功能。

如果没能成功添加到手机屏幕，请检查并确保开启了相应浏览器的“桌面快捷方式"和"安装应用未知来源”权限。某些网站的添加速度可能会比其它网站稍慢，您可以尝试多添加几次。

小米手机(MIUI10) 修改chrome权限:打开任务管理器，长按chrome图标，选择设置按钮;进入系统设置界面，选择"权限管理”，查找并开启"桌面快捷方式";返回，选择"安装应用未知来源”，点击允许。

PWA应用VS微信小程序

微信小程序源于PWA应用标准，此标准是Google提出并实现的。目前"现代”的浏览器都支持这一标准。然而微信小程序确没有完全支持这一标准，再加上微信对于小程序的各种权限限制。从而导致小程序无法构建一些复杂的功能，在功能性上无法与原生app相比。而PWA应用却几乎具有与原生app一样全面的功能。

参考资料

https://blog.csdn.net/studentenglish/article/details/103174770

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps