小程序的鼻祖在国内就这么消亡了!(一)

简介: 互联网发展了这么久,我们记住了“Native App”、“小程序”、“快应用”、“App clips”、“Hybrid App”、“Web App”,似乎独独没有 PWA,但 PWA 及其理念却一直在推动着前端领域前进。

PWA 是什么?


似乎 PWA 对很多人来说是如此陌生,PWA 对前端开发者来说却又是无处不在。


身边的 PWA


Lighthouse


对前端开发者来说,Lighthouse 是一个很熟悉的网站性能诊断工具,在这里,我们总是可以看到 PWA(Progressive Web App)的身影:


cb9aafa2d7953bd9f6cf1b57bc58b592.png


PWA 书籍


又或者,你曾无意间看到这些书籍或者资料:


2aa3c5a92761da6634b39db148cb562e.png


  • 《PWA 应用实战》[1]


开发者相关


啊哈,这些,都没看到过?那你总是访问过Google Developers[2]吧,或者总看见过这样一个图标:


6a85290e629ff0f3270f94d0df0b7244.png


可以认为这个图标在哪里,一个 PWA 应用就在哪里,点击这个按钮,可以将 PWA 应用安装到桌面。于是,在线 IDE StackBlitz.com[3]出现了,字节内部使用的Goofy Studio PWA[4]出现了:


1e8c24c3b4f56a95bbe47a8bdb17196a.png


谷歌的探索


但是,动不动就讲开发,真的太卷了,说说那些更有意思的 PWA 应用吧。


2018 Google Chrome 开发者峰会上,Google 发布了Squoosh[5],这是一个开源的图片压缩渐进式 Web 应用(PWA),它同时也是现代 Web 技术的一个实际展示,谷歌实验室发布 Squoosh[6] 的主要目标是演示高级 web 应用程序如何利用现代技术在 web 浏览器中提供高性能的体验。


63d75d669d8468d64026b29f377fefe3.png


PROXX[7]是谷歌 Chrome 团队推出的一款 JavaScript 游戏。该项目展示了如何开发快速平滑的 Web 应用,这些应用在多种平台和输入设备上提供了相近的用户体验。Proxx 项目的独到之处在于它主要针对的是智能功能机


智能功能机是低价智能机替代设备,在印度和非洲广为使用。相对于智能机,智能功能机的硬件非常简单。它不支持触控,屏幕相对较小,大多采用 240x320 分辨率的 QVGA 屏,CPU 的处理能力也相对较弱。


80fca9ee8383272cec358bfcdec5390c.png


这是一款 JavaScript 游戏扫雷游戏,摸鱼时可以玩儿玩儿,如果不幸被老板撞见,你就说在研究 PWA 嘛


微博 Lite


微博 Lite[8],我相信,这,应该是 PWA 离你最近的一次:


1023d27f50ce2b6d87c70edf45faab4b.png


我猜你一定不会问:既然 PWA 应用还是蛮广泛的,那,它一定很强大吧?


蒽,强不强大看看数据就知道了。


强大的生产力


  • 2017 年的一篇技术博文[9]显示,堪称图片版的 Twitter 的 Pinterest 将他们的移动网站重建为 PWA,核心参与度增加了 60%,用户产生的广告收入增加了 44%,花费的时间也增加了 40%;


03e3e14d277b7da15de85cd182d4290f.png

f3a01d0d5fda51f363f5e24f26f572e2.png


  • 2016 年初 AliExpress 开始与 Google 团队合作,推动 PWA 技术在 AliExpress 上的落地;结果是非常令人惊奇和满意的。AliExpress 发现新用户的转换率增加了 104%[10]。在 Safari 的转化率也上升了 82%。现在用户每次访问的页面数量是原先的两倍,也大大提升了用户浏览页面的时间;


  • 类似这样的成功案例数不胜数,为了方便你直接丢到老板脸上,我梳理了这个图 😂:


6576eea954945ee7d259cfa7161abc06.png


我觉得你可以告诉他:这些不仅仅是数字,这些都是 PWA 的成功案例


老板说:这些和墙内的你我,距离能有多近?没事,离我们最近的 PWA 应用将在你的手上诞生。


PWA 诞生的条件


我们应该都深有体会,Native app 体验确实很好,下载到手机上之后入口也方便。但它的优缺点很明显:


edaf54d071c3560794dc425afc14902c.png


而 web 网页开发成本低,网站更新时上传最新的资源到服务器即可,用手机带的浏览器打开就可以使用。但是除了体验上比 Native app 还是差一些,还有一些明显的缺点


225c8730bb0f28a313847589e05f4aeb.png


在这些因素的推动下,Web 应用渐进式接近原生 App的概念 —— PWA 诞生了。

相关文章
|
Web App开发 人工智能 小程序
|
Web App开发 缓存 前端开发
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
14 6
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
13 3
|
1天前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
8 1
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
22 4
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的答题小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的答题小程序的详细设计和实现(源码+lw+部署文档+讲解等)