Uber PWA:渐进式 Web 应用的完美案例研究
已发表: 2022-06-22曾经对叫 Uber 出租车的简单快捷印象深刻吗? 你想知道优步是如何做到这一点的吗? 优步必须投资一些技术或其他东西才能给我们带来如此流畅的体验,但它到底是什么,我们如何了解它? 如果您曾经使用过 Uber PWA,您会注意到 Uber PWA 与其他原生应用程序之间的差异。 它像普通应用程序一样快速、强大且功能强大,但事实并非如此。 正如标题所示,您可能知道一些事情,所以让我们深入研究这个案例研究。
内容
优步概述
优步科技是21世纪成功的代表企业,利用科技的力量帮助人们。 这家有抱负的初创公司成立于 2009 年,其想法简单而绝妙,很快就取得了非凡的成就,颠覆了公共交通和出租车行业。
这个概念在许多国家并不新鲜。 然而,对于大多数西方人来说,允许乘客从独立司机那里叫车并支付车费是相当离谱的。
优步仅作为连接需求和供应的第三方,仍然见证了爆炸性增长,尽管被众多争议所包围,但它已成为最令人着迷的公司之一。
Uber 宣称“我们通过让世界运转来点燃机遇”,其使命是为世界各地的每个人提供专门且可靠的交通服务。
时至今日,优步目前在增长中占有超过 1.18 亿用户,超过 350 万活跃服务司机,2020 年其拼车业务的总预订收入为 266.1 亿美元。
PWA 如何帮助基于服务的公司蓬勃发展?
企业在这个数字时代生存的制胜法宝始于提供超越传统界限的精致用户体验。
随着科技公司的数量和质量不断提高,Uber、Tinder 和 Netflix 等数字商品或基于信息的服务必须在客户服务方面做得更好,而不仅仅是通过电子邮件或电话处理他们的投诉和查询。
这些数字平台最重要的共同点是依靠网站或移动应用程序与目标受众进行交流。 它是电商的血脉,是收益的源泉。
对创新者来说,最大的冲动是找到填补缺失部分的解决方案,即改善屏幕背后用户体验的技术答案。 2015 年,Google 工程师创造了 Progressive Web App 的名称,这是一种新的 Web 技术,它充分利用了 Web 和原生应用程序的特性。
考虑到 PWA 如何帮助基于服务的公司获得成功,有两个主要趋势。
首先,页面权重会随着数据库的增加而增加,但带宽也会增加。 因此,网站会变得更慢更重,所以我们有并发的优化过程。
PWA 可以中断服务工作者的网络请求,以最大限度地减少往返延迟和预缓存站点资源,以从第二次访问创建即时加载。 这种缓存允许开发人员专注于网站速度并优化加载时间,只需 3-5 秒。
其次,电子商务一直在为买卖双方提供便利。 在这些趋势中,移动商务似乎是最赚钱的类型,十年来用户增长了三倍。
由于 service worker 在后台运行,它可以响应来自操作系统的事件或进程。 此功能使 PWA 能够将弹出通知推送到 Android 移动设备。 另一方面,iOS 拒绝支持此功能,但随着 PWA 声誉的增长,我们认为 Apple 需要改变主意。
优步在 PWA 集成之前的挑战
优步希望通过紧跟其技术进步来继续创造一场革命并主导拼车经济。
他们希望为用户提供一个快速访问、最新且方便的机会,让他们可以随时使用他们的服务,尤其是在紧急情况下,无论他们不下载移动应用程序还是不随身携带智能手机。
这就是为什么他们正在寻找一种解决方案来快速流畅地执行,在浏览器中始终如一地运行良好,并且可以处理低 Internet 连接请求。
PWA 是一种具有成本效益且构建时间短的解决方案,以维持强大的在线状态,可以在连接不良的情况下严格工作并提供闪电般的加载速度。
优步 PWA 的成果
关于设计
与 PWA 网站设计的一个显着区别是 Uber PWA 不会移动活动标签的位置,不会留下“加载”动画,而是切换页面效果。 您可以使用桌面设备清楚地看到它。
通过将徽标保留在顶部,即使在几秒钟内,这个闪屏也可以帮助加强对 Uber 用户的召回能力。
关于功能
- 导航
Uber PWA 或 m.uber 的设计具有清晰直观的布局,用于向下滚动交互。 它可以让眼睛朝着熟悉的方向移动并快速理解页面。
- 加载速度
Uber PWA 获得了令人难以置信的首页加载。 这些元素会立即整齐地出现在它们需要的位置。
导航的设计在一定程度上有助于简化加载速度。 它在您滚动时执行加载,因此使站点能够固定内容的外观,从而节省缓存剩余资源的时间。
负责的开发人员还声称,m.uber 通过渲染 Preact 来响应第一个浏览器请求,这发生在服务器上。 通过将内联标记作为字符串,服务器几乎可以立即交付内容。
- 页面和元素之间的过渡:响应迅速,连接流畅,高交付方式,交互时间迅速。
- 体验:我们只能将一切描述为一个平静而令人满意的预订旅程,让您放心。
结果
Uber 用户现在只需点击几下即可轻松预订行程,无论他们的网络连接、操作系统、数据库和使用 PWA 的设备类型如何。
Uber 在 PWA 推出后报告了一项重大变化,其中通过 Uber PWA 预订了更多的乘车服务,而不是之前的移动原生应用程序。 越来越多的人可能会继续在优步上预订。
从那时起,M.uber 就变得超级轻巧、流畅,并且与任何现代浏览器兼容。 该网络应用程序克服了使用低端设备的骑手在站点性能方面的问题,提供了一致的类似应用程序的体验,只要他们需要打车就可以轻松满足。
优步 PWA 有什么令人兴奋的地方?
以下是 Uber 开发人员能够通过转型 PWA 项目携带的一些有趣的技术事实。
- Uber PWA 速度惊人
考虑到市场需求,他们使用 PWA 的意图是在移动设备上替代他们的原生应用程序。 开发人员处理了一个很小的 PWA,压缩后只有 50kB。
目标是让一切尽可能轻巧,避免不必要的组件,即使在 2G 网络下也能稳健运行。
没有什么比参加重要活动迟到、赶到外面兜风更糟糕的事情了,但最终却被加载缓慢的应用程序卡住了。 它带来了最大程度的挫败感,并可能有害地影响他们对优步的态度。
然而,Uber 已经成功推出了一款闪电网络应用,即使在 2G 上也只需不到 3 秒的时间即可显示出来。 这真的很快。 他们的所作所为令人印象深刻。
- Uber PWA 在不同情况下都是可靠的
凭借所取得的成绩,优步有信心进入全球市场。 他们总是找到一种精心策划的方法,将 Uber PWA 调整为针对每种情况和问题的快速简便的体验。
尽管覆盖范围和连接信号较差,但国际观众可以随时随地使用他们的服务。 此外,用户仍然可以离线、在优步网站上和在旅途中对他们的行程进行操作或调整。
这一切都是可能的,因为 Uber PWA 仍然可以加载以供后续访问并保存所有用户生成的内容以供以后与 Wi-Fi 同步。
关键要点
如果没有渐进式网络应用程序的帮助,最具活力的成长平台不可能成为现在的样子。 凭借更轻松、更快、更简单的体验,Uber PWA 让拼车预订流程变得更加轻松。 Lyft 被认为是 Uber 最大的竞争对手,但其市场份额无法与 Uber 相比。
因此,如果您想了解有关 PWA 如何帮助您的在线业务的更多信息,请访问 Tigren 的博客以查看更多我们经常发布的出版物。
自 2015 年以来,Tigren 一直是 Magento PWA 开发服务值得信赖且可靠的名称。我们已帮助全球 800 多家中小型企业提高投资回报率。
我们优质的 Magento PWA 集成解决方案具有世界知名的品质,但对于有抱负的所有者来说,在他们的预算范围内建立他们理想的在线形象仍然是合理的。
如果您希望通过一对一咨询尽快解决您的问题,请发送邮件至 [email protected] 并获取报价,如果我们不匹配,则无需承诺。