介绍 PWA 的技术概念，体验了市场上少有的几个 PWA 应用，并尝试为项目加上简单的 PWA 配置
前言
在开发个人项目的时候，app 开发成本高，小程序也比较累赘，web端是作为客户端是一个理想的选择，在思考怎样让 web 更加好用的时候，我就想到了PWA。但是为什么国内前端开发很少有使用PWA的案例呢？
要搞懂这个问题，先要了解 PWA 是什么，以及怎样开发一个 PWA。事实上开发一个 PWA 只需要在 web 的基础上添油加醋即可，非常推荐一本书(Progressive Web Apps (PWA) 中文版)[https://papahot.gitbooks.io/-pwa/content/]，这本书详细介绍了 PWA 的一切。
关于 PWA 的一些讨论
(小程序鼻祖 —— 在国内逐渐消亡的 PWA 可以带给我们哪些启示？)[https://segmentfault.com/a/1190000041729491]
google 服务无法在国内使用，是 PWA 无法占有安卓市场的重要原因。国产手机一般不自带 Chrome，一般用户也不会专门去下载 Chrome，其他国产浏览器对 PWA 的支持有限，这些情况都造成了 PWA 在国内流行不起来。而小程序则成为了中国特色 PWA 实现方式。
体验现有的 PWA
以下使用安卓的 Chrome 浏览器，ios 的 safari 来体验市场上的一些 pwa 应用。
微博实现了 PWA，在安卓 chrome 上打开微博，点击菜单栏，可以看到 “安装应用” 的选项，而不是 “添加到主屏幕”。然而点击安装应用之后，没有任何反应，也没有添加到主屏幕。在 ios 上的百度搜索点开微博，强行跳转到app了。手动输入域名m.weibo.com，同样可以 “添加到主屏幕”，体验非常好。
web.dev在安卓上同样有 “安装应用” 的选项，点击后过了一段时间（不知道为啥要这么久）之后安装成功了，虽然看起来和普通网站 “添加到主屏幕” 后的结果没有太大区别，而且安装花费更多时间。
squoosh.app 提供了一个install按钮，点击可以唤起安装应用面板，甚至还有图文介绍。在 ios 上则没有按钮，应该是 ios 不提供类似的功能。但是在安卓上安装需要耗费很多时间，进行莫名其妙的 “安装”，还经常安装不成功并且静默失败，而在 ios 上手动添加则是瞬间完成。
体验了以上3个 pwa 网站之后，我发现在安卓上安装往往需要长时间的等待，还会静默失败，不知道是不是我手机的原因；其中一个网站提供了安装按钮，可以唤起 PWA 安装界面。而在 ios 手机上，手动 “添加到主屏幕” 是瞬间完成，安装完成后的体验和安卓基本一致；但那个在安卓上提供了安装按钮的网站，在safari中则没有提供安装按钮，估计是 ios 不支持了。
怀着对 Chrome 浏览器安装 pwa 应用时需要耗费大量时间的疑惑，我还尝试了华为自带浏览器打开 squoosh.app，出乎意料的是，点击install按钮同样能够添加到主屏幕，并且也是瞬间完成。不得不怀疑我那个刚升级到最新版本的 Chrome 究竟有什么大病？
简单配置 pwa 图标和标题
下面的代码写在 html 里面，可以配置 “添加到主屏幕” 的图标和标题，还可以配置一些简单的样式。这也是我用在个人数据后台的代码。
<!-- 手机适配标识 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- 配置主题颜色 -->
<meta name="theme-color" content="#ffffff">
<!-- 配置添加到主屏幕时的标题 -->
<meta name="apple-mobile-web-app-title" content="admin">
<!-- 配置添加到主屏幕时的icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/test.jpg">
<link rel="apple-touch-icon" sizes="120x120" href="/test.jpg">更为复杂的 pwa 配置
更复杂的 pwa 配置包含以下内容，此处不在赘述，需要的时候再深入了解
menifest.json一个配置文件，是对 PWA 应用的描述，苹果系统对其支持度非常糟糕。- ServerWorker 一种前端技术，可以代理网站所有的网络请求，实现离线应用。
总结
由于国内极低的支持度和普及率，PWA技术不适用于生产环境。
但对于个人项目（自用），PWA则是最方便的解决方案，比如我自己开发的数据后台，就以PWA的形式添加到了手机主屏幕，方便使用。