移動(dòng)電商新增長(zhǎng)：更輕快，交互更豐富的PWA移動(dòng)商城來(lái)啦！

時(shí)間：2023-03-24 17:06:02 | 來(lái)源：電子商務(wù)

時(shí)間：2023-03-24 17:06:02 來(lái)源：電子商務(wù)

網(wǎng)絡(luò)發(fā)展中，“唯一的不變就是變化”！

Web環(huán)境瞬息萬(wàn)變，用戶期望不斷升級(jí)，內(nèi)容需被隨時(shí)訪問(wèn)，尤其是在移動(dòng)端的訪問(wèn)。80％的互聯(lián)網(wǎng)用戶正在使用智能手機(jī)，據(jù)TechCrunch調(diào)查，用戶在移動(dòng)設(shè)備的平均時(shí)間逐年增長(zhǎng)，且每天超過(guò)5小時(shí)...

不言而喻，構(gòu)建引人入勝、有趣直觀的數(shù)字瀏覽體驗(yàn)將比以往任何時(shí)候都更為重要！

雖然響應(yīng)式網(wǎng)站近年幾乎成為各大品牌的強(qiáng)制性標(biāo)配，但是用戶有限的移動(dòng)設(shè)備內(nèi)存和不穩(wěn)定的網(wǎng)絡(luò)環(huán)境卻向之不斷提出艱巨挑戰(zhàn)。

當(dāng)下圖情況超過(guò)3秒時(shí)，53%的用戶就已經(jīng)放棄您的網(wǎng)站了。

錯(cuò)落的網(wǎng)頁(yè)內(nèi)容未經(jīng)策略性的組織與設(shè)計(jì)，而僅僅適應(yīng)性的向下堆砌，將致使大家瀏覽受累，體驗(yàn)降低。

如今問(wèn)題不再是“我們的網(wǎng)站是否適用于移動(dòng)設(shè)備？”，而是“它將如何在移動(dòng)設(shè)備上獲得最佳的表現(xiàn)？”

早在2017，我們發(fā)布過(guò)一篇PWA (Progressive Web App)這種輕應(yīng)用規(guī)范對(duì)于移動(dòng)電商領(lǐng)域的影響，與在全球使用趨勢(shì)，以及它與本地APP的區(qū)別。錯(cuò)過(guò)的小伙伴，可以點(diǎn)擊這里進(jìn)行深入了解。

如果說(shuō)上篇只是基于理論分享的話，今天我們將向大家分享一下以React JS進(jìn)行PWA開發(fā)的實(shí)例:

從瀏覽器添加到主屏幕
并感受身臨其境的全屏體驗(yàn)

通過(guò)預(yù)先緩存關(guān)鍵性內(nèi)容
用戶可以減少對(duì)網(wǎng)絡(luò)的依賴
確保為用戶提供即時(shí)和可靠的瀏覽體驗(yàn)

針對(duì)移動(dòng)優(yōu)化又順滑的交互
無(wú)需無(wú)限滾動(dòng)

移動(dòng)用戶不希望過(guò)于復(fù)雜的事情。他們渴望直觀，并快速找到他們想要的東西，做他們想做事。雜亂越少越好，只有這樣才能在您的網(wǎng)站上實(shí)現(xiàn)可用性和轉(zhuǎn)化率。

上方的GIF動(dòng)圖演示來(lái)自于 Escher - ShopNow Cloud，一款基于React開發(fā)的PWA。

React 有哪些優(yōu)點(diǎn)？

React 起源于 Facebook 的內(nèi)部項(xiàng)目, 它的設(shè)計(jì)思想極其獨(dú)特，屬于革命性創(chuàng)新，性能出眾，越來(lái)越多的人開始關(guān)注和使用，認(rèn)為它是將來(lái) Web 開發(fā)的主流工具。

附：ReactJS官網(wǎng)地址 https://reactjs.org/

飛速運(yùn)轉(zhuǎn)
React極簡(jiǎn)的代碼邏輯可有效消解用戶網(wǎng)絡(luò)和CPU不佳帶來(lái)的緩慢加載問(wèn)題，甚至可輕松實(shí)現(xiàn)離線緩存，為用戶帶來(lái)更流暢的瀏覽體驗(yàn)。

跨瀏覽器兼容
它提供了標(biāo)準(zhǔn)化的API，甚至在IE8中都沒有問(wèn)題。

模塊化
每個(gè)組件都可以進(jìn)行獨(dú)立的開發(fā)和測(cè)試，并且它們可以引入其它組件。代碼的可維護(hù)性大幅提升。

搜索引擎優(yōu)化
React可以在服務(wù)器上預(yù)渲染應(yīng)用再發(fā)送到客戶端。而搜索引擎的爬蟲程序依賴服務(wù)端響應(yīng)而非JavaScript的執(zhí)行，所以預(yù)渲染你的應(yīng)用有助于搜索引擎優(yōu)化。

專業(yè)人員怎么評(píng)價(jià)React?

Jacky，一位來(lái)自TMO經(jīng)驗(yàn)豐富的全棧工程師。聽一聽Jacky怎么評(píng)價(jià)React?

Q1:React開發(fā)難度如何？在中國(guó)有成熟的社區(qū)嗎？
A1:React是非常成熟的前端技術(shù)，且已在國(guó)內(nèi)形成良好的社區(qū)氛圍。成熟的社區(qū)分享互助無(wú)疑為React帶來(lái)了更為完善的技術(shù)支持，進(jìn)而大大降低React的開發(fā)難度，并能不斷提供更多前沿卓越的的技術(shù)解決方案。

Q2:現(xiàn)在有哪些著名公司是使用React進(jìn)行應(yīng)用開發(fā)的呢？
A2:Facebook, Instagram, Airbnb這些國(guó)外公司都有在使用React。

Q3:您本身對(duì)React 在中國(guó)的前景怎么看？
A3:React正憑借其優(yōu)異特性逐漸被各大國(guó)內(nèi)公司加以運(yùn)用，比如阿里、滴滴、餓了么等。而且，React代碼更加靈活輕便，可以快速響應(yīng)商業(yè)決策帶來(lái)的開發(fā)改動(dòng)。對(duì)于快速迭代試錯(cuò)的中國(guó)互聯(lián)網(wǎng)環(huán)境，提供了更輕便的試驗(yàn)成本。

Q4:除了React, 還有那些框架可以用作PWA的開發(fā)？
A4:Angular和Vue等成熟的框架也可以用來(lái)開發(fā)PWA。

PWA成功案例

PWA好處多多，那么伴隨著PWA的應(yīng)用，品牌們又獲得了何種程度的增長(zhǎng)呢？

蘭蔻Lanc?me PWA
頁(yè)面加載時(shí)間有效降低84%，移動(dòng)端訪問(wèn)次數(shù)大幅提升51%，用戶跳出率有效減少15%，最終銷售轉(zhuǎn)化率提升17%。


Twitter Lite PWA
平均用戶停留時(shí)長(zhǎng)增長(zhǎng)65%，Web 站點(diǎn)發(fā)推的數(shù)量增長(zhǎng)75%，跳出率降低20%。


AliExpress PWA
提供驚人的用戶體驗(yàn)?zāi)芰椭鶤liExpress將所有瀏覽器中新用戶的轉(zhuǎn)化次數(shù)提高了104％，在iOS上提高了82％。

PWA的哪些優(yōu)點(diǎn)將為品牌電商提供更多機(jī)遇？

PWA將如何為品牌自有化電商探索之路提供更多機(jī)遇？

強(qiáng)交互（APP-Like）
提供原生手機(jī)APP樣式的導(dǎo)航和交互，減少加載和卡頓。

即時(shí)更新
基于Web端的更新讓用戶打開WebAPP即登陸最新版本，免除更新煩惱。

拓展性
運(yùn)用React Native，即可將PWA輕松轉(zhuǎn)換為手機(jī)原生APP。而通過(guò)PWA作為品牌自有化電商的初步探索，低成本驗(yàn)證商業(yè)模式會(huì)是不錯(cuò)的選擇。

PWA在中國(guó)市場(chǎng)應(yīng)用前景

PWA在中國(guó)市場(chǎng)環(huán)境之下，又可以被如何有效運(yùn)用，并為品牌帶來(lái)增長(zhǎng)呢？

品牌微信商城
相比微信小程序和Html5，PWA構(gòu)建的微商城加載更迅速，交互更豐富。并能向用戶提供更革新的購(gòu)物體驗(yàn)。


移動(dòng)端信息流廣告
移動(dòng)端信息廣告與電商鏈接，并縮短購(gòu)買流程逐漸成為未來(lái)趨勢(shì)。將PWA作為廣告的電商落地頁(yè)，可以提供更快的加載速度，更豐富的交互體驗(yàn)，有效降低頁(yè)面跳出率，提高轉(zhuǎn)化率。

關(guān)于ShopNow 與 Escher

ShopNow

ShopNow Cloud是為中國(guó)市場(chǎng)設(shè)計(jì)和優(yōu)化的基于云計(jì)算的電子商務(wù)系統(tǒng)。我們將行業(yè)領(lǐng)先的技術(shù)與電商生態(tài)系統(tǒng)的各個(gè)環(huán)節(jié)相連接，以移動(dòng)為中心和全渠道電商創(chuàng)新相結(jié)合，必將賦予您融入中國(guó)電商生態(tài)新能量。

Eshcer

Escher是ShopNow中一個(gè)創(chuàng)新的Theme。Escher 的靈感來(lái)自于知名荷蘭版畫藝術(shù)家Maurits Cornelis Escher 艾雪。 Escher 的創(chuàng)作探討宇宙秩序奧密的渴望，他創(chuàng)造演繹了很多復(fù)雜奇幻的變形結(jié)構(gòu)，顛覆了自然的規(guī)律。
Escher的作品常使用到幾何的概念，對(duì)于“錯(cuò)視”藝術(shù)極為拿手。Escher也極大的啟發(fā)了我們的UX設(shè)計(jì)師，將中國(guó)先進(jìn)的移動(dòng)用戶體驗(yàn)設(shè)計(jì)與國(guó)際化的應(yīng)用場(chǎng)景結(jié)合起來(lái)，無(wú)論國(guó)際品牌想在中國(guó)進(jìn)一步優(yōu)化移動(dòng)用戶體驗(yàn)，還是中國(guó)品牌想要走向海外, Escher都能助您在移動(dòng)策略上占盡先機(jī)。

如果對(duì)PWA以及移動(dòng)電商建搭建興趣，歡迎隨時(shí)和我們?nèi)〉寐?lián)系，深入探討！