浅谈一下我了解的PWA

Progressive Web Apps,简称PWA，中文翻译过来就是渐进式网页应用，我的以为它能够算是Web应用的下一个进化方向之一， 毕竟技术的发展有时候是不可预估的，谁也没法预料技术的走向，但至少它表明了一种可能性，下面咱们就一块儿来了解下这种新兴技术。

如下仅表明我的看法和认知，有结合其余大神的文章的分析，若有不足之处欢迎指正！

 1、什么是Progressive Web Apps? 

Progressive Web Apps，简称PWA，中文直译过来就是渐进式Web应用，一个合格的PWA，应该具备但不限于如下特色：

 渐进式：针对不一样版本不一样内核的浏览器，它的功能可以渐进式的加强，随着用户与应用之间的联系加深，若是用户须要，网页能够渐进式地变成App，好比被添加到主屏幕、全屏方式运行、离线工做、推送通知消息等。但它还是 Web 而非放到 App Store 里。

响应式：适应多种运行环境，不管是移动端、web端仍是平板电脑等等。

对网络环境的弱依赖： 得益于谷歌的service worker技术，使PWA极大下降对网络环境的依赖，可以在离线或者网络极差的环境下工做。

持续更新：一样因为service worker的存在，应用可以轻松实现持续更新。

类原生体验：有像原生应用般的交互和导航给用户原生应用般的体验，若是用户愿意，特闷能够选择将PWA应用添加到手机主屏幕，一样得益于service worker，它甚至可让PWA应用像原生应用同样接收消息推送。

安全：经过 HTTPS 来提供服务来防止网络窥探，保证内容不被篡改。

2、我我的对PWA的一些认知

以上对PWA的一些定义，都是一些官方的定义或者一些大神的认知，下面来谈谈我我的对PWA的一些认知，以及它和目前的Hybrid App、小程序、快应用的区别。

目前市场上主流的Hybrid App无非两种作法：

1.相似React Native这种，经过JavaScript语言进行开发，视觉上经过标签转义，将RN标签转化为手机原生图形界面；操做上经过js调用手机底层硬件和SDK；这种作法的优势是APP体验好，缺点是开发周期几乎和原生APP差很少

2.国内外不少中小企业比较青睐的H5页面套APP外壳的作法，例如国内的APICloud、H5plus等等，其本质上只是一个能够访问特定H5页面的浏览器；这种作法的优势是开发周期短，缺点是体验和性能都较差。

而小程序和快应用，我的认为更多的是借鉴React Native的思路进行实现的，尤为是微信小程序，基本上就是沿用了RN的那一套。

那么PWA和以上几种应用的区别在哪里呢？有些人可能会以为PWA和小程序以及快应用几乎没什么区别，但在我看来，PWA和小程序、快应用、混合APP这些东西天生就不同！

还记得PWA的全名吗？Progressive Web Apps，这里已经写得很明确了，它是Web App啊，React Native、小程序、快应用一直在致力于去HTML化，虽然他们都是使用JavaScript做为开发语言进行编写的，可是你要知道，JavaScript本就不是只为HTML而生的，若是你有阅读过相关书籍你就会知道，JavaScript其实能够在浏览器之外的环境下运行！

以上其它应用，基本都已经摒弃了HTML中除了JS之外的其它内容，可是PWA不同，它从骨子里仍然是一个Web页面！说到Web App,有些同窗可能会嗤之以鼻，确实，当前市场下，Web App也就是移动端Web页面的份额已经极大化的萎缩（下图是google发布的移动Web和App使用时长占比），或者说Web App可能历来没有辉煌过，从传统电脑端转移到智能手机时代，中间的过渡其实很是短，相信这点你们都是感同身受的，可是如今，谁也说不许Web App是否来到了一个风口位置 -- 由于有了PWA，你访问的Web页面已经有了可以媲美原生App的体验！

3、PWA将如何改变咱们的移动体验？

当你在手机浏览器中打开一些Web网页时，常常会看到如下的页面:

这些Web App会推荐你打开它们的原生应用，若是你的手机没有下载则会跳转到相应的下载页面，可是对于用户来说，在没有WIFI的状况下可能并不想为了一个不经常使用到的App消耗流量和系统内存，或者手机容量比较吃紧的用户，可能有时候会为了删除哪些应用保留哪些应用而犹豫不决，如今有了PWA，一切都能迎刃而解！而这些，还不是所有！

在2016年11月google团队已经在尝试并初步实现把「添加至主屏」重命名为「安装」，被安装的 PWA 再也不仅以 widget 的形式显示在桌面上，而是真正作到与全部原生应用平级，同样被收纳进应用抽屉（App Drawer）里，同样出如今系统设置中。

PWA可以得到和原生APP同级的权限，也可以像原生APP同样实时获取推送消息，即便你在之后想要删掉这个PWA应用，你也依然能够在浏览器中得到高质量高体验的Web页面，在Web端，甚至Mac环境下也能享受到这种体验！

4、案例欣赏

国内外有一些优秀的技术团队已经开始尝试并推出了一些不错的PWA应用，我这里简单介绍下两个已知的

FlipKart(印度)

离线状况下的视觉差别

豆瓣(中国)