Progressive Web Apps,简称PWA,中文翻译过来就是渐进式网页应用,个人觉得它可以算是Web应用的下一个进化方向之一, 毕竟技术的发展有时候是不可预估的,谁也无法预料技术的走向,但至少它代表了一种可能性,下面我们就一起来了解下这种新兴技术。
以下仅代表个人见解和认知,有结合其他大神的文章的分析,如有不足之处欢迎指正!
一、什么是Progressive Web Apps?
Progressive Web Apps,简称PWA,中文直译过来就是渐进式Web应用,一个合格的PWA,应该具有但不限于以下特点:
渐进式:针对不同版本不同内核的浏览器,它的功能能够渐进式的增强,随着用户与应用之间的联系加深,如果用户需要,网页可以渐进式地变成App,比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。但它仍是 Web 而非放到 App Store 里。
响应式:适应多种运行环境,无论是移动端、web端还是平板电脑等等。
对网络环境的弱依赖: 得益于谷歌的service worker技术,使PWA极大降低对网络环境的依赖,能够在离线或者网络极差的环境下工作。
持续更新:同样由于service worker的存在,应用能够轻松实现持续更新。
类原生体验:有像原生应用般的交互和导航给用户原生应用般的体验,如果用户愿意,特闷可以选择将PWA应用添加到手机主屏幕,同样得益于service worker,它甚至可以让PWA应用像原生应用一样接收消息推送。
安全:通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改。
二、我个人对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的体验!
三、PWA将如何改变我们的移动体验?
当你在手机浏览器中打开一些Web网页时,经常会看到以下的页面:
这些Web App会推荐你打开它们的原生应用,如果你的手机没有下载则会跳转到相应的下载页面,但是对于用户来讲,在没有WIFI的情况下可能并不想为了一个不常用到的App消耗流量和系统内存,或者手机容量比较吃紧的用户,可能有时候会为了删除哪些应用保留哪些应用而犹豫不决,现在有了PWA,一切都能迎刃而解!而这些,还不是全部!
在2016年11月google团队已经在尝试并初步实现把「添加至主屏」重命名为「安装」,被安装的 PWA 不再仅以 widget 的形式显示在桌面上,而是真正做到与所有原生应用平级,一样被收纳进应用抽屉(App Drawer)里,一样出现在系统设置中。
PWA能够获得和原生APP同级的权限,也能够像原生APP一样实时获取推送消息,即使你在以后想要删掉这个PWA应用,你也依然可以在浏览器中获得高质量高体验的Web页面,在Web端,甚至Mac环境下也能享受到这种体验!
四、案例欣赏
国内外有一些优秀的技术团队已经开始尝试并推出了一些不错的PWA应用,我这里简单介绍下两个已知的
FlipKart(印度)
离线情况下的视觉差异
豆瓣(中国)
更多专业前端知识,请上 【猿2048】www.mk2048.com