PWA 和 Magento:打造下一代移动购物体验

已发表: 2019-08-01

这是 Scandiweb 的内容主管 Viesturs Abelis 的客座帖子。

渐进式 Web 应用程序。 每个人都在谈论它们,即使您不确定它们到底是什么,您也可能已经在使用该技术。 Twitter、星巴克、全球速卖通和无数其他公司已成功实施 PWA,每天有数百万人使用。

结果就出来了。Twitter 看到每个会话的页面增加了 65%,发送的推文增加了 75%,跳出率降低了 20%。 AliExpress 将每个会话访问的页面数量翻了一番,转化率提高了 104%。 谷歌积累了令人震惊的 PWA 成功案例组合。

几年前,由于开发成本高和定制解决方案不可避免,主要由数字巨头利用的技术,如今正变得越来越民主化和易于使用。 由于新兴的 PWA 解决方案和 PWA 的广泛接受,该技术现在可供所有人使用。

PWA 看起来像是改变游戏规则的东西,随着越来越多的商家加入潮流,了解正在发生的事情以及这项新技术对您意味着什么很重要。

目录

  • 什么是渐进式 Web 应用程序?
  • PWA:炒作还是未来?
  • PWA 对几乎所有营销 KPI 都有积极影响
  • Magento 张开双臂欢迎 PWA
  • Magento 的 3 个 PWA 解决方案
    • Magento PWA 工作室
    • ScandiPWA
    • Vue店面
  • Magento-First PWA 解决方案的优势
    • 没有中间件
    • 熟悉 Magento 和节省时间
    • 轻松且低成本的迁移
  • 结论

什么是渐进式 Web 应用程序?

渐进式 Web 应用程序是一种新型的 Web 开发技术(尽管这个想法已经存在了一段时间),它结合了最好的 Web 和本地应用程序,并在用户的浏览器中创建了类似于应用程序的卓越数字体验。 因此,当您听到 PWA 时,请想一想——具有原生应用程序的特性和全部功能的移动网站。

我们到底在谈论什么功能? 首先,PWA 速度很快。 由于页面加载速度提高了 300%,高度优化的页面达到了近乎瞬时的加载时间,使它们与原生应用程序一样响应迅速且使用愉快。

其他功能包括全屏 UI、主屏幕保存、推送通知、硬件可访问性,甚至离线模式。 奇妙的 Service Worker 使之成为可能,您可以在 Google 开发者社区的这次演讲中了解更多信息,PWA 捆绑了各种现代数字开发,以提供真正类似于应用程序的体验。

如果您愿意,它们甚至可以部署到应用商店。 然而,与受限于这些平台的本机应用程序不同,PWA 的功能与常规网站一样,并且可以在 Google 上进行索引,这使得它们不仅可以被发现,而且由于提供了更快的加载时间和更好的体验,还可以为您提供潜在的 SERP 提升。 这也意味着无需大量下载和自动更新,从而实现无摩擦的初始参与。

PWA 的日益流行可归因于原生应用程序和移动网络的使用方式之间出现的机会差距——移动网络获得了更多的访问者,但应用程序提供了更好的体验,并且在参与度方面优于网络。 PWA 在人们正在寻找的地方提供他们想要的体验。

PWA 和 Magento:创建下一代移动购物体验 | MageWorx Magento 博客

PWA:炒作还是未来?

与任何新兴技术一样,谨慎胜过采用。 PWA 高度依赖浏览器支持,处于起步阶段就不稳定,并且仍在不断发展中,PWA 还没有为万无一失的采用提供确定性和安心。 PWA 周围有一种神秘的气氛,因为商家正争先恐后地理解它们。

然而,有一件事是肯定的——这不仅仅是炒作。 该技术是健全的,早期采用者得到了极大的回报,并且随着知识的传播,采用也随之而来。

PWA 对几乎所有营销 KPI 都有积极影响

真实案例研究表明,PWA 能够对几乎所有营销 KPI 产生积极影响——绩效、参与度、在现场花费的时间、产生的潜在客户、重新参与、转化等。

在移动为先的时代,这种变革性技术的表现优于更传统的数字渠道也就不足为奇了,优先考虑移动体验的重要性仍在上升。 移动购物越来越主导电子商务; 谷歌最近宣布了移动优先索引,自 2019 年 7 月 1 日起,所有新网站都默认启用该索引; 大量新的互联网用户在移动设备上开始了他们的数字之旅。

因此,提供高于标准的移动体验受到张开双臂的欢迎,它们日益增长的重要性可能会推动世界各地的营销人员更加关注这样做,以保持竞争力。

这不仅仅是为您的客户提供更好的数字体验,而是接触新客户,因为 PWA 在可访问性方面发挥着重要作用。 借助 PWA 的轻量级数据需求,可以为网络覆盖欠佳的用户提供可访问的数字体验,而不会影响用户体验。 例如,Uber 的扩张计划与 PWA 齐头并进,以确保连接速度较慢的农村和其他地区仍能体验到引人入胜且响应迅速的体验。

而且,随着全球 PWA 的采用正在进行中,现在世界各地的商家都可以为他们当前和未来的客户做同样的事情。

Magento 张开双臂欢迎 PWA

Magento 关注 PWA 已有一段时间了。 早在 2017 年 9 月就介绍了 PWA 工作室,它终于在 2019 年 1 月看到了曙光,到 5 月 Magento Imagine 2019 推出时,PWA 已经成为每个人的心头好,当然也是会议的热门话题。

虽然 Magento 率先涉足 PWA,并且已经开发了许多其他解决方案来展示 PWA 的功能,但社区有点不愿意效仿,因为没有明确的解决方案商家和扩展构建者可以团结起来。 反过来,这会导致定制开发尝试,最终成本高昂且不可持续,特别是在涉及大量修改和高度定制的店面时,会贬低采用率。

尽管如此,目前正在为大量 Magento 商家开发 PWA 店面。 Magento 正在大力投资 PWA,世界其他地区也是如此。

对于 Magento 商家来说,这不是 PWA 会发生什么的问题吗? PWA 来了。 问题是——如何开始?

Magento 的 3 个 PWA 解决方案

PWA 和 Magento:创建下一代移动购物体验 | MageWorx Magento 博客

Magento 是市场上最强大的电子商务解决方案之一——它为互联网上 12% 的电子商务商店提供支持,并且采用率逐年增长。 有了这样的市场份额,成为 PWA 平台可以帮助 Magento 从根本上重新定义互联网,他们正在这样做,确保任何有兴趣为其商店获得 PWA 的商家都可以这样做。

如果您希望为您的 Magento 商店获取 PWA,您可以使用多种选择。 这里有三个值得你关注的。

Magento PWA 工作室

Magento PWA Studio 是 Magento 对新热潮的回应,并且已经投入使用了几年。 它与 Magento 2.3 一起发布,是一套用于为 Magento 构建 PWA 前端的开发人员工具。 Magento PWA studio 为您的开发人员提供开发、部署和维护所需的一切,并辅以丰富的文档,很可能成为希望将其商店带入未来的 Magento 商家的首选工具。

看看这个由 Incho 使用 Magento PWA 工作室工具开发的演示商店(注意:请在移动设备上进行),以展示可以实现的目标。

ScandiPWA

与 Magento PWA Studio 不同,ScandiPWA(由 Scandiweb 开发)是一个开源的 Magento 优先主题,而不是一组工具或一个店面。 这意味着它可以直接安装在您的 Magento 2.3 商店中,而无需对基础架构进行任何更改,并且可以以任何 Magento 开发人员都熟悉的方式进行扩展以满足您的需求。 ScandiPWA 的即用型主题广受社区好评,因其无忧无虑且为寻求高性能现成 PWA 解决方案的人提供了出色的解决方案而引起了广泛关注。

探索 ScandiPWA 演示商店(注意:请在移动设备上进行)或 GitHub 存储库。

Vue店面

作为市场上最受欢迎的 PWA 解决方案之一,Vue Storefront 是一个开源平台无关的渐进式 Web 应用程序,用于电子商务,用 Vue.js 编写。 随着社区的蓬勃发展,它是最大的 PWA 中心之一。 鉴于其规模庞大,这是一个相当复杂的解决方案。 与平台无关,而不是 Magento 优先意味着缺少一些 Magento 功能,但是,随着开发的继续,人们可以期待这个问题得到解决。

探索 Vue Storefront 演示商店(注意:请在移动设备上进行)或蓬勃发展的 GitHub 存储库。

Magento-First PWA 解决方案的优势

PWA 和 Magento:创建下一代移动购物体验 | MageWorx Magento 博客

如果您是 Magento 平台上的商家,Magento-first PWA 解决方案可能是加入 PWA 竞赛的最简单方法。 此类解决方案具有熟悉、降低开发成本和提高性能等额外好处,让商家和开发人员满意。

以下是 Magento 优先 PWA 解决方案 ScandiPWA 如何利用 Magento 堆栈提供壮观的 PWA 体验的三个示例。

没有中间件

ScandiPWA 是 Magento 优先的 PWA 主题,这意味着它可以直接安装在您的 Magento 商店之上,这反过来又具有与您的 Magento 后端建立直接关系的好处。 这为商家节省了很多麻烦,因为任何中间件都增加了额外的复杂性——必须重建功能,额外的数据结构——开发、定制——适应。

这是一个示例:构建为单独的 PWA 店面的解决方案仅与网站的数据库通信。 这会影响处理重定向等常见问题。 与其点击 Magento 核心安装,然后按照后端指定的方式进行重定向,不同的店面必须开发一种解决方案来确保用户到达他们应该去的地方。

中间件对于更通用的 PWA 解决方案(例如 Vue Storefront)具有相当多的优势,因为它允许将单个强大的解决方案链接到多个平台,但是,缺点是它需要广泛的适应,并且通常需要重新发明轮子,所以说话。 Magento 优先解决方案通过利用现成的 Magento 功能来规避这一问题,从而为您的企业节省开发成本。

熟悉 Magento 和节省时间

Magento 优先 PWA 解决方案的一个显着优势是熟悉度。 继续使用开发人员熟悉的环境将使他们和您更容易采用,从而简化开发过程。

Magento 已经证明自己是世界上最先进的电子商务平台之一,围绕该平台发展起来的社区就是证明。 这意味着您可以在世界的每个角落找到 Magento 专家,尽管 PWA 很新颖,但与在全新环境中工作相比,入职应该更加顺畅。 Magento 的工具为开发人员和商家所熟知,并拥有成功的历史。

因此,选择 Magento 优先 PWA 解决方案的商家可以期待更低的成本,并且更了解正在发生的事情。

轻松且低成本的迁移

ScandiPWA 是 Magento 的即用型主题。 在实施方面,任何 Magento 优先解决方案都会带来显着优势。 即插即用的 Magento 解决方案无需完全重新设计和重新创建您的前端,而是让您可以利用 PWA 的优势,而无需承担危及您的业务的风险。

如前所述,添加中间件并拥有一个完全自定义的前端会引入 Magento-first 解决方案中通常不存在的复杂性。 这需要额外的开销、维护和支持成本。

结论

渐进式 Web 应用程序将继续存在。 尽管对采用的前景持谨慎态度,但世界各地的商家仍在密切关注正在发生的事情,寻找适合他们的解决方案,并寻求复制 PWA 先驱者的许多成功。

对于希望尽快进入市场的 Magento 商家,有多种选择——使用 Magento PWA 工作室开发自己的解决方案,选择与平台无关的 PWA 解决方案,例如 Vue Storefront,或者先使用 Magento主题,例如 ScandiPWA。 最简单且最具成本效益的入门方式是后者,因为它使您的企业能够充分利用 PWA 的全部优势,而不会偏离 Magento 的熟悉程度。


Viesturs Abelis 是 Scandiweb 的内容主管和充满活力的 ScandiPWA 传播者,Viesturs 始终着眼于未来,热衷于让每个人都能接触到最新的数字化发展。