浅谈一下我了解的PWA

 一、什么是Progressive Web Apps? 

Progressive Web Apps&＃xff0c;简称PWA&＃xff0c;中文直译过来就是渐进式Web应用&＃xff0c;一个合格的PWA&＃xff0c;应该具有但不限于以下特点&＃xff1a;

 渐进式&＃xff1a;针对不同版本不同内核的浏览器&＃xff0c;它的功能能够渐进式的增强&＃xff0c;随着用户与应用之间的联系加深&＃xff0c;如果用户需要&＃xff0c;网页可以渐进式地变成App&＃xff0c;比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。但它仍是 Web 而非放到 App Store 里。

响应式&＃xff1a;适应多种运行环境&＃xff0c;无论是移动端、web端还是平板电脑等等。

对网络环境的弱依赖&＃xff1a; 得益于谷歌的service worker技术&＃xff0c;使PWA极大降低对网络环境的依赖&＃xff0c;能够在离线或者网络极差的环境下工作。

持续更新&＃xff1a;同样由于service worker的存在&＃xff0c;应用能够轻松实现持续更新。

类原生体验&＃xff1a;有像原生应用般的交互和导航给用户原生应用般的体验&＃xff0c;如果用户愿意&＃xff0c;特闷可以选择将PWA应用添加到手机主屏幕&＃xff0c;同样得益于service worker&＃xff0c;它甚至可以让PWA应用像原生应用一样接收消息推送。

安全&＃xff1a;通过 HTTPS 来提供服务来防止网络窥探&＃xff0c;保证内容不被篡改。

二、我个人对PWA的一些认知

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

目前市场上主流的Hybrid App无非两种做法&＃xff1a;

1.类似React Native这种&＃xff0c;通过Javascript语言进行开发&＃xff0c;视觉上通过标签转义&＃xff0c;将RN标签转化为手机原生图形界面&＃xff1b;操作上通过js调用手机底层硬件和SDK&＃xff1b;这种做法的优点是APP体验好&＃xff0c;缺点是开发周期几乎和原生APP差不多

2.国内外很多中小企业比较青睐的H5页面套APP外壳的做法&＃xff0c;例如国内的APICloud、H5plus等等&＃xff0c;其本质上只是一个可以访问特定H5页面的浏览器&＃xff1b;这种做法的优点是开发周期短&＃xff0c;缺点是体验和性能都较差。

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

那么PWA和以上几种应用的区别在哪里呢&＃xff1f;有些人可能会觉得PWA和小程序以及快应用几乎没什么区别&＃xff0c;但在我看来&＃xff0c;PWA和小程序、快应用、混合APP这些东西天生就不一样&＃xff01;

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

以上其它应用&＃xff0c;基本都已经摒弃了HTML中除了JS以外的其它内容&＃xff0c;但是PWA不一样&＃xff0c;它从骨子里仍然是一个Web页面&＃xff01;说到Web App,有些同学可能会嗤之以鼻&＃xff0c;确实&＃xff0c;当前市场下&＃xff0c;Web App也就是移动端Web页面的份额已经极大化的萎缩&＃xff08;下图是google发布的移动Web和App使用时长占比&＃xff09;&＃xff0c;或者说Web App可能从来没有辉煌过&＃xff0c;从传统电脑端转移到智能手机时代&＃xff0c;中间的过渡其实非常短&＃xff0c;相信这点大家都是感同身受的&＃xff0c;但是现在&＃xff0c;谁也说不准Web App是否来到了一个风口位置 -- 因为有了PWA&＃xff0c;你访问的Web页面已经有了能够媲美原生App的体验&＃xff01;

三、PWA将如何改变我们的移动体验&＃xff1f;

当你在手机浏览器中打开一些Web网页时&＃xff0c;经常会看到以下的页面: