序言
今天的故事，要从几个大家熟悉的app说起。
少年，你刷过微博吧？你受得了微博那
混乱的时间线和烦人的广告吗？少女，你逛过淘宝天猫吧？你受得了客户端的种种
权限劫持和那无处不在的卡顿吗？
…
…谜之沉默………
……
那，孩子，你总点过外卖吧？那饿了吗客户端你觉得好用吗？
相信很多朋友们都经历过「app 太难用」这种体验，也都抱怨过为什么服务商就不能做一个好用一点的 app 出来，哪怕只有一点点都好啊！特别是新浪微博，在这里我要点名批评：
我没开会员，给我推送那些烦人的广告也就算了吧，可以理解付费用户就是比我等普通用户高人一等，可时间线混乱什么时候能给我解决？
我就不信邪，今天我就来给大家解决一下这个世纪难题：曲线救国，改善体验，以新浪微博为例。
正当我卸载新浪微博客户端，准备启用国际版的时候，我还发现了一个问题：
好像直接换 微博国际版 还是挺好用的……
（全文完）
（然而…）
（并没有…）
面对这种情况，我们可以使用 饿了吗 和 微博 的 PWA 版本，以解决那些 app 中令人深恶痛绝的问题。其中饿了吗还是国内第一个支持 PWA 的。
头抬起，请坐和放宽。2015年 Google I/O 大会的一声炮响，PWA 给我们带来了胜利的曙光。其实我们已经有了一个解决该问题的办法：利用 app 的 王爷版 网页版本，来获得独立 app 一般的体验。
PWA简介
PWA （ Progressive Web Apps ）是 Google 最近在提的一种 Web App 形态 ，或者如 Wikipedia 所称的「软件开发方法」。
Progressive Web App 翻译过来就是渐进式增强的网页应用。渐进式增强是 PWA 的开发宗旨，它的好处之一就是让 PWA 能够兼容所有的浏览器。通俗的说，PWA 就是一种将「网页」封装成「应用」的技术。
例如，你用手机浏览器访问我的博客
https://taohongmaxwell.github.io,如果浏览器有是否添加到主屏幕之类的弹窗，只要点击是，那么恭喜你，你的手机完了，你就可以体验我博客的 PWA 版本了！
上述操作 iPhone 和 iPad 可以直接通过 safari 体验。如果你的安卓手机默认浏览器没有出现想要的效果，也没关系，说明你的浏览器不支持自动添加，手动添加其就行。如果手动添加也找不到，那就使用 chrome 来访问。
值得注意的是，PWA 是一项 Web 技术，如果你对 PWA 感兴趣的话，可以了解一下有关 Web 方面的内容，如果你是 Web 开发者，尤其是前端开发，我认为你应该了解一下这项技术。
特性和优点
它比原生应用更轻量，但是却比现有的 Web APP 的功能更加丰富。最大也是最关键的区别是：
-
它能够脱离浏览器的「束缚」（虽然依然是基于浏览器的技术），能够把 PWA 网站添加到你的桌面上，类似于一个原生应用一样，并且拥有媲美原生应用的体验，不管是 PC 操作系统还是手机操作系统。
-
加载 PWA 的进程依旧是浏览器进程，因为要实现全平台的兼容，PWA 不能包含原生 OS 相关代码。其内核其实就是浏览器的内核，本质仍然是网站，只是在缓存、通知、后台功能等方面表现更好。
-
它也能拥有原生 APP 应用一般的启动闪屏，它也能像原生 APP 应用一般能有消息推送——不过要知道，它源自 Web，通常只有传统 APP 的体积的十分之一甚至更小。
-
它不用等待下载安装的时间，打开网页的时候就已经「下载」并且「安装」完毕。
利用 Web 的技术给移动端的设备提供 App 的体验，这是 PWA 的目的。因此，PWA 经过 Google Chrome 团队的开发在可靠性、响应速度、用户体验三方面，升级了原来 Web App 的体验。所以，PWA 应用有以下的优点：
- 离线或者网络环境较差的情况下也能工作
- 响应的加载速度和原生应用没有区别
- 界面布局和原生应用相一致
- 拥有后台运行和推送通知的能力
- ……
现在，以 Chrome，Safari 和 Edge 为代表的主流浏览器已经支持了 PWA 技术，你使用手机浏览器浏览一些网站的时候，浏览器也可能会弹出提示「是否添加到主屏幕」——这就是支持 PWA 的站点。在 Windows，iOS，Android 和 Mac OS 上都可以体验这项新技术，可以说它是全平台都支持的了。
实现过程
关于其实现过程，其实就是以下步骤：
A[用户] -->|上传数据| B{浏览器内核}
B --> |上传数据| C[服务器]
B --> |返回数据| A
C --> |返回数据| B
可是，有人说：
“今夜我不关心人类，我只想你 “
我不关心原理，我只关心怎么用！
OK No problem 没问题，
Let me tell you how to use it.
准备工作
-
支持 PWA 的浏览器
这里我们以 Chrome 为例 -
支持 PWA 的运行环境
这里我们分别用 Windows 和 Android 示范 -
支持 PWA 的网站
这里我们分别举以下例子：
添加步骤
当你准备好上述条件以后，就可以顺畅 zhuangbi 使用了~！
-
打开目标网址，以微博为例，在
Chrome浏览器地址栏中输入https://m.weibo.cn/beta，打开页面 -
打开页面后，点击右上角，呼出菜单，选择
添加到主屏幕，即可！ -
*值得注意的是：部分安卓手机厂商会在添加到著屏幕上有一个
确认选项，需要你确认了才能够允许浏览器将快捷方式添加到主屏幕上。
示例：微博
目前，新浪微博已经拥有常规版、极速版、国际版的客户端，其原生 Apps 种类繁多，应用内的广告问题一直为人诟病。
令人对微博 重新感到希望 的是，去年 12 月，微博推出了 PWA 版本。
微博常规版客户端多年来问题不断，被人诟病。PWA 应用用起来则舒心很多。
微博客户端的广告众多，质量还不高，或许这事儿买了会员就能够解决。可是时间线错乱这事儿是你无论如何都解决不了的。
多数情况下，看到基于时间线的应用（例如QQ空间和朋友圈）我们都会不自觉地想到，我一直往下翻，肯定是按照时间线排布，越往前翻应该是越早的内容。可是试想一下，在你刷微博的时候，一直往下看，前一秒看的还是几分钟前的微博，后一秒就到了昨天的，然后到了前几天的热门微博，最后才看到几个小时前的动态，甚至还很难看见几个小时之前的动态！这种体验是多么的糟糕！
微博客户端的这种时间线混乱的体验，放在一个基于时间线上的操作过程中，虽然能将访问流量带上去，但是无论如何都不符合我们人类漫长进化中形成的直觉的。
顺带说一下，如果你看不惯 PWA 或者不想折腾，那么换用微博国际版方可解决时间线混乱和广告众多的问题。
示例：饿了吗
我没有加载饿了吗的 PWA 版本，所以给各位来个云测评：
饿了吗这个在 Nexus 6P 上使用，添加到主屏幕后，打开后我甚至都没意识到这是一个网页，操作特别流畅。
其他就没什么，有种「不知不觉」就已经是 PWA 的感觉。
示例：我的博客
我的博客也是 PWA 的，可以添加 PWA 版本的应用在主屏幕上，不知道我说之前有没有同学们发现了？
然而并没有
在此我用我的安卓平板进行演示：
安装了 PWA 应用，并将其添加到桌面之后，就可以开始使用了。
点开图标后会加载一个过场动画，如下图所示：
打开界面：没有一点浏览器的痕迹，地址栏和底栏都隐藏了，仿佛就是一个「独立的 app 」
来自社会底层程序员的呼唤：
好像我发现没几个人访问我的博客诶，不知道我把这篇文章发到公众号上，访问量会不会增加一下。
PC桌面版的 PWA 应用
桌面版的 Chrome 也支持 PWA 应用的生成和运行，不过需要手动配置一下 Chrome 才能体验这项技术。鉴于我不是土豪，所以各位用 Mac 的老爷们你们就将就着看吧，我相信你用得起 Mac 应该也会知道我在讲什么，区区 PWA 也值得你水文……
下面我们以 Windows 平台为例子：首先保证你的 Chrome 版本到 64 或以上
-
然后在地址栏输入
chrome://flags，找到Desktop PWAs的选项将其Enabled了，然后 Chrome 会提示你重启浏览器。重启浏览器后，PWA 添加到桌面的特性就已经具备了。 -
打开网页，点击右上角菜单，找到
添加到桌面这个按钮，点击，然后会出现一个确认框，点击确认即可将快捷方式添加到桌面 -
在桌面上双击打开该快捷方式，即可体验 PWA 版本的「网页」。
-
目前
Desktop PWAs还是实验性的功能，所以有可能出现不稳定的情况，依照自己的情况作出决定~
你会发现打开了一个没有浏览器的外形的网页，或者说是个应用——这就是 PWA 了。PWA 支持离线启动技术，即使在没网的情况下也能启动应用。不过在需要网络条件下才能发送的请求依然需要网络环境。
看看效果：左边为PWA ，右边为网页版
不过说实话，在 PC 或者 Mac 上，我觉得网页弄成 PWA 没有什么实际的用处，如果将一个基于 HTML 5 的游戏做成 PWA 版本，或许在桌面版才会大显身手。
最后说两句……
就目前来说，我能想到的比较理想的使用条件是：
在一些功能性网站支持 PWA 的情况下，而且你还不担心它的稳定性，并且你不爱用其客户端，那么是可以不用再去下它们的桌面客户端了，直接通过 PWA 添加到桌面，就能像使用原生应用一样使用它们啦。
并且，PWA 有一个好的特性，就是能将网站独立出浏览器来，以便于你更快更直接地浏览常用的那个网站。我就添加了我的博客和GitHub这两个网站到桌面上，也算是弥补了GitHub和我的博客没有客户端的不足了吧~！
知乎上有个小众的列表， 点击访问 可以了解国内有那些应用有 PWA 版本。
参考资料：
