PWA 和 Magento：打造下一代移動購物體驗

這是 Scandiweb 的內容主管 Viesturs Abelis 的客座帖子。

漸進式 Web 應用程序。 每個人都在談論它們，即使您不確定它們到底是什麼，您也可能已經在使用該技術。 Twitter、星巴克、全球速賣通和無數其他公司已成功實施 PWA，每天有數百萬人使用。

結果就出來了。Twitter 看到每個會話的頁面增加了 65%，發送的推文增加了 75%，跳出率降低了 20%。 AliExpress 將每個會話訪問的頁面數量翻了一番，轉化率提高了 104%。 谷歌積累了令人震驚的 PWA 成功案例組合。

幾年前，由於開發成本高和定制解決方案不可避免，主要由數字巨頭利用的技術，如今正變得越來越民主化和易於使用。 由於新興的 PWA 解決方案和 PWA 的廣泛接受，該技術現在可供所有人使用。

PWA 看起來像是改變遊戲規則的東西，隨著越來越多的商家加入潮流，了解正在發生的事情以及這項新技術對您意味著什麼很重要。

什麼是漸進式 Web 應用程序？

漸進式 Web 應用程序是一種新型的 Web 開發技術（儘管這個想法已經存在了一段時間），它結合了 Web 和本地應用程序的優點，並在用戶的瀏覽器中創建了類似於應用程序的卓越數字體驗。 因此，當您聽到 PWA 時，請想一想——具有原生應用程序的特性和全部功能的移動網站。

我們到底在談論什麼功能？ 首先，PWA 速度很快。 由於頁面加載速度提高了 300%，高度優化的頁面達到了近乎瞬時的加載時間，使它們與原生應用程序一樣響應迅速且使用愉快。

其他功能包括全屏 UI、主屏幕保存、推送通知、硬件可訪問性，甚至離線模式。 奇妙的 Service Worker 使之成為可能，您可以在 Google 開發者社區的這次演講中了解更多信息，PWA 捆綁了各種現代數字開發，以提供真正類似於應用程序的體驗。

如果您願意，它們甚至可以部署到應用商店。 然而，與受限於這些平台的本機應用程序不同，PWA 的功能與常規網站一樣，並且可以在 Google 上進行索引，這使得它們不僅可以被發現，而且由於提供了更快的加載時間和更好的體驗，還可以為您提供潛在的 SERP 提升。 這也意味著無需大量下載和自動更新，從而實現無摩擦的初始參與。

PWA 的日益普及可歸因於原生應用程序和移動網絡的使用方式之間出現的機會差距——移動網絡吸引了更多訪問者，但應用程序提供了更好的體驗，並且在參與度方面優於網絡。 PWA 在人們正在尋找的地方提供他們想要的體驗。

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 解決方案

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 解決方案的優勢

如果您是 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 始終著眼於未來，熱衷於讓每個人都能接觸到最新的數字化發展。