---
title: 探索下一代移动电商的新技术 - Magento PWA Studio
date: 2020-08-16T16:00:00Z
modified: 2024-06-20T03:19:05Z
permalink: "https://www.tmogroup.com.cn/insights/magento-2-45285/"
type: post
status: publish
excerpt: ""
wpid: 100497
categories:
  - Magento 2 开发
  - 中国电商
tags:
  - Magento 2 开发
  - 中国电商
  - magento
featured_image: "https://www.tmogroup.com.cn/wp-content/uploads/2024/06/Magento-PWA-Studio-and-How-It-Can-Help-Your-eCommerce-Store-1.png"
timestamp: 2024-06-20T03:19:05Z
---

从全球的电商趋势来说，移动将是商家最重要的数字接触点。Forrester Consulting2019年的一份调查报告指出，流量从桌面端流向移动端，在全球范围内增长到52％。消费者对于移动手机的使用愈精通，期望也愈高，商家必须专注不断更新和投入新技术，尤其是那些可以产生长期商业价值，又赋能竞争优势的新技术。

为此，Magento在2019年1月发布了Magento PWA studio, 这是一套用于构建具有类似APP体验的在线商店的工具，来帮助商家提高移动转换率以及应对跨渠道构建和优化体验的复杂性。TMO作为Magento 中国区合作伙伴，就来为大家做一个全面的介绍。

关于PWA和无头电商的概念和趋势，TMO早在2017年就开始了探讨，这里就不再复述，有兴趣的朋友可以参考以下链接进行阅读：

[应用开发向轻量级转化，PWA能代表连续APP趋势吗？ ](https://www.tmogroup.com.cn/more/appkaifa/30197/)

[电商前沿趋势：“无头电子商务”适合你的品牌么？](https://www.tmogroup.com.cn/ecommerce/39091/)

[做好这3步，轻松入门2019电商新零售下半场](https://www.tmogroup.com.cn/ecommerce/36847/)

[移动电子商务最新增长点：质感强，转化高的PWA移动商城怎么建？ ](https://www.tmogroup.com.cn/digital/31346/)

总结一下，PWA 的高亮在于：

- 更快更流畅的浏览体验
- 无需下载的“APP”使用满足感
- 推送通知
- 像APP一样保存在手机屏幕

你以为这就是PWA的全部优势了吗? 还远不止 ...

- 除了在移动设备，PWA 如今也越来越广泛的使用在桌面端的开发，以提高页面打开速度，给用户更舒畅的使用体验。
- 构建跨渠道电商体验，如连接线上与线下商店，调用顾客手机摄像头进行店内条纹码，二维码的扫描，进行产品查找，店内支付。
- 其轻量级的架构有望取代传统的POS系统和零售助理平台，为店内工作人员提供快速，高效和经济高效的方式进行在线和店内定位产品，提供自助结账，服务退货并保存销售，甚至直使用员工的智能手机便能做到。

 早在前几年就有零售商开始执行PWA的项目，Magento PWA studio的正式发布也大大推动了这一趋势，无头电商与PAW的应用也越来越普遍 ，越来越多的大型网站和知名网站进行了重构架。这里我们特地会大家搜罗了一些案例，以供大家参考和比对，获取灵感。

> ### **Magento PWA Studio 案例**

在Magento PWA Studio的官方网站中，我们能看到已经有部分先行者使用Magento PWA Studio建设了自己的电商网站。我们可以看到，这些使用了PWA电商网站在移动端的表现几乎和APP没有差别（甚至加载速度更快），开屏动画和数据储存也应有尽有。相较之前，这些网站在进行了PWA升级后的数据也有了明显提升。

- [Xercise4Less](https://www.xercise4less.co.uk/) 行业： 运动

 Xercise4Less的电商网站搭建完全由PWA技术驱动，在深度优化了Page Builder后，消费者每次登陆的浏览量从4页提升到了7页，大幅提升了消费者黏性。

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/2948a5d8b947-composite-1.jpg)

- [Selco](https://www.selcobw.com/) 行业：建筑与装饰

 Selco的PWA电商平台建设于2020年1月完成，上线后交易量提升94%，转化为交易额提升了82%。现版本的PWA电商平台相较之前速度提升了300%。

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/5f7481f0ac05-composite.jpg)

- [Eleganza](https://www.eleganza-shop.com/) 行业：建筑与装饰

 PWA电商平台上线后，Eleganza发现其服务器的相应速度相较之前提升了5倍,消费者每次的浏览量提升了50%（浏览时间提升了19%）。

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/Screenshot_20200812-102503_Chrome1-150x300.jpg)

- [ROECKL](https://www.roeckl.com/) 行业：时尚

 ROECKL的PWA电商平台为其带来了显著的提升，使用PWA搭建电商平台后订单量增加了198%（移动端增加172%），用户量提升150%（移动端提升175%）。

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/Screenshot_20200812-120953_Chrome1-150x300.jpg)

- [UK Meds](https://www.ukmeds.co.uk/) 行业：健康

 UK Meds在进行了PWA升级后，其响应速度比之前的电商平台提升了300%，随之而来的是订单量上涨30%。

 ![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/Screenshot_20200812-102835_Chrome1-150x300.jpg)

> ### **其他解决方案开发的Magento PWA案例**

尤其是针对时尚和生活方式行业，看看他们如何给予用户无与伦比和影响深刻的用户体验吧。

- [**Me + Em**](https://www.meandem.com/)

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/Screen-Shot-2020-08-17-at-4.02.03-PM1-1024x578.png)

- [**Zadig & Voltaire**](https://zadig-et-voltaire.com/eu/it/)

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/Screen-Shot-2020-08-17-at-4.00.44-PM1-1024x575.png)

- [**Oliver Bonas**](https://www.oliverbonas.com/)

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/Screen-Shot-2020-08-17-at-4.05.45-PM1-1024x537.png)

- [**Agent Provocateur**](https://www.agentprovocateur.com/)

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/Screen-Shot-2020-08-17-at-4.07.06-PM1-1024x578.png)

- [**les boys les girls**](https://lesgirlslesboys.com/)

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/Screen-Shot-2020-08-17-at-4.07.53-PM1-1024x585.png)

- **[made.com](https://www.made.com/)**

![](https://www.tmogroup.com.cn/wp-content/uploads/2020/08/Screen-Shot-2020-08-17-at-3.59.54-PM1-1024x579.png)

> ### **使用Magento PWA Studio 搭建电商平台**

Magento PWA Studio项目是一组开发人员工具，允许在Magento 2之上开发，部署和维护PWA店面。运用Magento PWA Studio可以快速的搭建独立品牌官方商城，搭建完成后可以简便的部署您的品牌风格特征或进行大促活动（无头电商的优势），相比APP电商商城和传统移动网页相比也有诸多优势。但鉴于不同公司业务的复杂程度和特殊的定制化需求，我们强烈建议您寻找专业的开发人员进行二次开发。

附：[Magento PWA Studio基础教程](https://magento.github.io/pwa-studio/tutorials/pwa-studio-fundamentals/)

Magento PWA Studio包括如下工具：

- pwa-buildpack CLI工具：使用Mangento PWA搭建电商平台的主要工具。
- Peregrine 组件：包含部分组件以及和REACT连接的挂钩。
- Venia 商城视觉组件：Venia组件包包括一个使用Magento PWA Studio搭建的概念性商店，以及一些视觉组件。
- UPWARD：构建PWA商城的文件规范。
- pwastudio.io：指导开发人员创建Magento PWA店面的指导性文档
- Magento云端服务器：开发人员可以访问云端的Magento应用程序，帮助快速搭建电商平台。该服务器包括精心维护的Sample DATA，并对所有PWA Studio人员开放。

如您有意向将自己的电商网站升级次世代的PWA网站亦或是想要搭建独立品牌官网电商网站，请[点击这里](https://www.tmogroup.com.cn/about/contact/)联系我们。作为Magento的官方合作伙伴，我们曾为服务品牌开发过数款高品质PWA电商平台，并致力于通过精妙的设计和快速响应的技术提高您的销售数据。