PWA 是什么?
似乎 PWA 对很多人来说是如此陌生,PWA 对前端开发者来说却又是无处不在。
身边的 PWA
Lighthouse
对前端开发者来说,Lighthouse 是一个很熟悉的网站性能诊断工具,在这里,我们总是可以看到 PWA(Progressive Web App)的身影:
PWA 书籍
又或者,你曾无意间看到这些书籍或者资料:
- 《PWA 应用实战》[1]
开发者相关
啊哈,这些,都没看到过?那你总是访问过Google Developers[2]吧,或者总看见过这样一个图标:
可以认为这个图标在哪里,一个 PWA 应用就在哪里,点击这个按钮,可以将 PWA 应用安装到桌面。于是,在线 IDE StackBlitz.com[3]出现了,字节内部使用的Goofy Studio PWA[4]出现了:
谷歌的探索
但是,动不动就讲开发,真的太卷了,说说那些更有意思的 PWA 应用吧。
2018 Google Chrome 开发者峰会上,Google 发布了Squoosh[5],这是一个开源的图片压缩渐进式 Web 应用(PWA),它同时也是现代 Web 技术的一个实际展示,谷歌实验室发布 Squoosh[6] 的主要目标是演示高级 web 应用程序如何利用现代技术在 web 浏览器中提供高性能的体验。
PROXX[7]是谷歌 Chrome 团队推出的一款 JavaScript 游戏。该项目展示了如何开发快速平滑的 Web 应用,这些应用在多种平台和输入设备上提供了相近的用户体验。Proxx 项目的独到之处在于它主要针对的是智能功能机。
智能功能机是低价智能机替代设备,在印度和非洲广为使用。相对于智能机,智能功能机的硬件非常简单。它不支持触控,屏幕相对较小,大多采用 240x320 分辨率的 QVGA 屏,CPU 的处理能力也相对较弱。
这是一款 JavaScript 游戏扫雷游戏,摸鱼时可以玩儿玩儿,如果不幸被老板撞见,你就说在研究 PWA 嘛。
微博 Lite
微博 Lite[8],我相信,这,应该是 PWA 离你最近的一次:
我猜你一定不会问:既然 PWA 应用还是蛮广泛的,那,它一定很强大吧?
蒽,强不强大看看数据就知道了。
强大的生产力
- 2017 年的一篇技术博文[9]显示,堪称图片版的 Twitter 的 Pinterest 将他们的移动网站重建为 PWA,核心参与度增加了 60%,用户产生的广告收入增加了 44%,花费的时间也增加了 40%;
- 2016 年初 AliExpress 开始与 Google 团队合作,推动 PWA 技术在 AliExpress 上的落地;结果是非常令人惊奇和满意的。AliExpress 发现新用户的转换率增加了 104%[10]。在 Safari 的转化率也上升了 82%。现在用户每次访问的页面数量是原先的两倍,也大大提升了用户浏览页面的时间;
- 类似这样的成功案例数不胜数,为了方便你直接丢到老板脸上,我梳理了这个图 😂:
我觉得你可以告诉他:这些不仅仅是数字,这些都是 PWA 的成功案例。
老板说:这些和墙内的你我,距离能有多近?没事,离我们最近的 PWA 应用将在你的手上诞生。
PWA 诞生的条件
我们应该都深有体会,Native app 体验确实很好,下载到手机上之后入口也方便。但它的优缺点很明显:
而 web 网页开发成本低,网站更新时上传最新的资源到服务器即可,用手机带的浏览器打开就可以使用。但是除了体验上比 Native app 还是差一些,还有一些明显的缺点
在这些因素的推动下,Web 应用渐进式接近原生 App的概念 —— PWA 诞生了。