--- title: 移动电子商务最新增长点：质感强，转化高的PWA移动商城怎么建？ date: 2018-05-22T16:00:00Z modified: 2024-06-18T09:49:23Z permalink: "https://www.tmogroup.com.cn/insights/xhtml5-31346/" type: post status: publish excerpt: "" wpid: 100536 categories: - 企业移动化 - 电商开发 featured_image: "https://www.tmogroup.com.cn/wp-content/uploads/2018/05/progressive-webapps.png" featured_image_alt: 移动电子商务，移动电商，PWA，Progressive Web APP16 timestamp: 2024-06-18T09:49:23Z tags: - 企业移动化 - 电商开发 --- 网络发展中，“唯一的不变就是变化”！ Web环境瞬息万变，用户期望不断升级，内容需被随时访问，尤其是在移动端的访问。80％的互联网用户正在使用智能手机，据TechCrunch调查，用户在移动设备的平均时间逐年增长，且每天超过5小时...不言而喻，构建引人入胜、有趣直观的移动电子商务体验将比以往任何时候都更为重要！ 虽然响应式网站近年几乎成为各大品牌的强制性标配，但是用户有限的移动设备内存和不稳定的网络环境却向之不断提出艰巨挑战。 当下图情况超过3秒时，53%的用户就已经放弃您的网站了。 ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城1](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/001gif.gif) 错落的网页内容未经策略性的组织与设计，而仅仅适应性的向下堆砌，将致使大家浏览受累，体验降低。 ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城2](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/002gif.gif) 如今问题不再是“我们的网站是否适用于移动设备？”，而是“它将如何在移动设备上获得最佳的表现？” 早在2017，我们发布过一篇[**PWA (Progressive Web App)**](https://www.tmogroup.com.cn/appkaifa/30197/ "PWA")这种轻应用规范对于移动电子商务领域的影响，与在全球使用趋势，以及它与本地APP的区别。错过的小伙伴，可以[**点击这里**](https://www.tmogroup.com.cn/appkaifa/30197/ "PWA")进行深入了解。 如果说上篇只是基于理论分享的话，今天我们将向大家分享一下以React JS进行PWA开发的实例: **—1—** **从浏览器添加到主屏幕** **并感受身临其境的全屏体验** ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城3](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/PWA001.gif) **—2—** **通过预先缓存关键性内容** **用户可以减少对网络的依赖** **确保为用户提供即时和可靠的浏览体验** ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城4](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/PWA002.gif) **—3—** **针对移动优化又顺滑的交互** **无需无限滚动** ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城5](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/PWA003.gif) 移动用户不希望过于复杂的事情。他们渴望直观，并快速找到他们想要的东西，做他们想做事。杂乱越少越好，只有这样才能在您的移动电子商务网站上实现可用性和转化率。 上方的GIF动图演示来自于 **Escher - ShopNow Cloud**，一款基于React开发的PWA。 > ### **React 有哪些优点？** React 起源于 Facebook 的内部项目, 它的设计思想极其独特，属于革命性创新，性能出众，越来越多的人开始关注和使用，认为它是将来 Web 开发的主流工具。 附：ReactJS官网地址 [https://reactjs.org/](https://reactjs.org/ "React JS") **飞速运转：**React极简的代码逻辑可有效消解用户网络和CPU不佳带来的缓慢加载问题，甚至可轻松实现离线缓存，为用户带来更流畅的浏览体验。 **跨浏览器兼容：**它提供了标准化的API，甚至在IE8中都没有问题。 **模块化：**每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。代码的可维护性大幅提升。 **搜索引擎优化：**React可以在服务器上预渲染应用再发送到客户端。而搜索引擎的爬虫程序依赖服务端响应而非JavaScript的执行，所以预渲染你的应用有助于搜索引擎优化。 > ### **专业人员怎么评价React?** Jacky，一位来自TMO经验丰富的全栈工程师。听一听Jacky怎么评价React? **Q1:React开发难度如何？在中国有成熟的社区吗？** A1:React是非常成熟的前端技术，且已在国内形成良好的社区氛围。成熟的社区分享互助无疑为React带来了更为完善的技术支持，进而大大降低React的开发难度，并能不断提供更多前沿卓越的的技术解决方案。 **Q2:现在有哪些著名公司是使用React进行应用开发的呢？** A2:Facebook, Instagram, Airbnb这些国外公司都有在使用React。 **Q3:您本身对React 在中国的前景怎么看？** A3:React正凭借其优异特性逐渐被各大国内公司加以运用，比如阿里、滴滴、饿了么等。而且，React代码更加灵活轻便，可以快速响应商业决策带来的开发改动。对于快速迭代试错的中国互联网环境，提供了更轻便的试验成本。 **Q4:除了React, 还有那些框架可以用作PWA的开发？** A4:Angular和Vue等成熟的框架也可以用来开发PWA。 > ### **PWA成功案例** PWA好处多多，那么伴随着PWA的应用，品牌们又获得了何种程度的增长呢？ **兰蔻Lancôme PWA** 页面加载时间有效降低84%，移动端访问次数大幅提升51%，用户跳出率有效减少15%，最终销售转化率提升17%。 ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城6](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/lancome1.jpg) Lancôme PWA 实例 **Twitter Lite PWA** 平均用户停留时长增长 65%，Web 站点发推的数量增长 75%，跳出率降低 20%。 ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城7](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/twitter2.png) Twitter Lite PWA 实例 **Aliexpress PWA** 提供惊人的用户体验能力帮助AliExpress将所有浏览器中新用户的转化次数提高了104％，在iOS上提高了82％。 ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城8](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/ali3.png) Aliexpress PWA 实例 > ### **PWA的哪些优点将为品牌电商提供更多机遇？** PWA将如何为品牌自有化移动电子商务探索之路提供更多机遇？ **强交互（APP-Like）：**提供原生手机APP样式的导航和交互，减少加载和卡顿。 **即时更新：**基于Web端的更新让用户打开WebAPP即登陆最新版本，免除更新烦恼。 **拓展性：**运用React Native，即可将PWA轻松转换为手机原生APP。而通过PWA作为品牌自有化电商的初步探索，低成本验证商业模式会是不错的选择。 > ### **PWA在中国市场应用前景** PWA在中国市场环境之下，又可以被如何有效运用，并为品牌移动电子商务带来增长呢？ **品牌微信商城：**相比微信小程序和Html5，PWA构建的微商城加载更迅速，交互更丰富。并能向用户提供更革新的购物体验。 ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城9](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/微信-1024x964.jpg) PWA微信商城展示实例 **移动端信息流广告：**移动端信息广告与电商链接，并缩短购买流程逐渐成为未来趋势。将PWA作为广告的电商落地页，可以提供更快的加载速度，更丰富的交互体验，有效降低页面跳出率，提高转化率。 ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城10](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/微博-1024x934.jpg) PWA微博信息流广告落地页展示实例 ![移动电子商务,移动电商,PWA,Progressive Web APP,移动商城11](https://www.tmogroup.com.cn/wp-content/uploads/2018/05/知乎-1024x934.jpg) PWA知乎问答链接落地页展示实例 > ### **关于ShopNow 与 Escher** #### [**ShopNow**](https://shopnowcloud.cn/zh-hans/ "ShopNow") ShopNow Cloud是为中国市场设计和优化的基于云计算的电子商务系统。我们将行业领先的技术与电商生态系统的各个环节相连接，以移动为中心和全渠道电商创新相结合，必将赋予您融入中国电商生态新能量。 #### **Eshcer** Escher是ShopNow中一个创新的Theme。Escher 的灵感来自于知名荷兰版画艺术家[Maurits Cornelis Escher 艾雪](http://www.mcescher.com "艾雪")。 Escher 的创作探讨宇宙秩序奥密的渴望，他创造演绎了很多复杂奇幻的变形结构，颠覆了自然的规律。 Escher的作品常使用到几何的概念，对于“错视”艺术极为拿手。Escher也极大的启发了我们的UX设计师，将中国先进的移动用户体验设计与国际化的应用场景结合起来，无论国际品牌想在中国进一步优化移动用户体验，还是中国品牌想要走向海外, Escher都能助您在移动策略上占尽先机。 ### 更多方案： >>[微信电商解决方案](https://www.tmogroup.com.cn/weixin-dianshang/ "微信电商解决方案") >>[移动电商解决方案](https://www.tmogroup.com.cn/mcommerce/ "移动电商解决方案") ### 更多服务： >>[UI／UX设计](https://www.tmogroup.com.cn/ux-ui-design/ "UI／UX设计") >>[微信商城开发](https://www.tmogroup.com.cn/weixin-store-development/ "微信商城开发") >>[电子商务网站建设](https://www.tmogroup.com.cn/eckaifa/ "电子商务网站建设")