真正的談話：電子商務 PWA 和構建一個的挑戰

2016 年，電子商務達到了一個重要的里程碑：移動設備取代台式機和筆記本電腦成為最流行的互聯網瀏覽方式。

在線商店不能再將他們的移動用戶視為事後的想法。 現在，移動體驗是電子商務網站最重要的方面。

在線商店通過使他們的網站具有響應性來應對這種轉變，這意味著它們會自動適應移動設備的較小屏幕。

許多商店也為移動設備開發了自己的本地應用程序，因為本地應用程序具有離線功能並且比響應式站點更快。 速度對於移動體驗尤為重要——據谷歌稱，如果加載時間超過三秒，53% 的移動用戶會離開頁面。

原生應用的另一個優勢是什麼？ 用戶可以在他們的主屏幕上為他們安裝一個圖標，這樣可以讓您的品牌保持新鮮感，並為您的商店帶來更多銷售額。

但是，原生應用也有問題。 一方面，它們不方便。 用戶必須在 Apple App Store 或 Google Play 等分發平台上搜索它們，然後下載它們才能使用它們。

什麼是 PWA？

漸進式 Web 應用程序 (PWA) 已成為這些問題的解決方案。

PWA 是響應式網站和本機應用程序的組合。 與原生應用程序一樣，它們速度快、具有離線功能並且可以設置為主屏幕圖標。 但與原生應用不同的是，它們不需要從應用商店下載。 與任何其他網站一樣，只需單擊鏈接或在瀏覽器的地址欄中輸入 URL 即可訪問 PWA。

有興趣為您的在線商店製作 PWA？ 您應該知道，這是一個非常複雜且成本高昂的過程，需要工程團隊和多個技術供應商之間的協調。 根據構建的複雜性，前期成本可能從 250,000 美元到超過 1,000,000 美元不等，並且根據供應商的不同，每月的訂閱費用可能會增加 3,000 美元到 10,000 美元以上。

我們將在下面詳細介紹製作 PWA 所需的一切。

構建 PWA 所需的技術

鑑於 PWA 的高級功能，開發它們可能既困難又耗時也就不足為奇了。 該過程涉及許多不同的技術，電子商務商家必須為每種技術找到專家，並且通常需要聘請多個供應商來構建他們的 PWA。

具體來說，以下八種技術構成了 PWA 的基礎：

1. 無頭 PIM/OMS

每個在線商店都需要產品信息管理 (PIM) 系統或訂單管理系統 (OMS)。 這充當您網站的後端，允許您編輯您的列表並實時跟踪您的庫存、訂單和發貨。

要製作 PWA，您的 PIM 或 OMS 還需要是無頭的，這意味著您可以將其連接到單獨的系統以獲得前端/面向用戶的體驗。

值得慶幸的是，流行的 PIM 和 OMS 平台已投資使其係統與無頭商務兼容。 Shopify、BigCommerce 和 Magento 擁有強大的應用程序編程接口 (API)，允許您將他們的技術連接到另一個系統。

2.中間件層

需要一個中間件層將數據從您的電子商務後端發送到您的前端店面，反之亦然。

Shopify、BigCommerce 等提供的 API 本質上是告訴您的開發人員如何將他們的平台與另一個平台集成的大綱。 中間件是與 API 一起工作以促進兩個平台之間通信的軟件。

3.CDN

如上所述，對於 PWA，速度就是一切。 移動用戶不會容忍糟糕的性能。

物理距離在站點速度中起著關鍵作用。 用戶離您的一台服務器越遠，您網站上的元素為他們加載所需的時間就越長。

Fastly 等內容交付網絡 (CDN) 維護著分佈在世界各地的數十台服務器和數據中心。 店主可以訪問 CDN 的基礎設施來提高他們的網站速度，以換取經常性費用。

4.SSR

服務器端渲染 (SSR) 是另一種用於提高 PWA 性能的技術。

使用 SSR，頁面在服務器上完全呈現，然後發送到用戶的瀏覽器，從而加快頁面加載時間並改善用戶體驗。

SSR 也有搜索引擎優化 (SEO) 的好處。 搜索引擎無法有效地索引在用戶瀏覽器中呈現的應用程序（這也稱為客戶端呈現，或 CSR），但它們對 SSR 沒有問題。 快速加載時間也有助於 SEO，因為它鼓勵訪問者留在您的網站上而不是退出。 增加人們在您的網站上花費的平均時間將提高您在搜索排名中的位置。

SEO的重要性怎麼強調都不為過。 電子商務網站 43% 的流量來自自然搜索——這比任何其他來源都要多。 事實上，它不僅僅是直接流量 (20%)、付費搜索廣告 (18%) 和電子郵件營銷 (4%) 的總和。

如果在搜索結果中沒有高排名，您的商店可能無法獲得生存所需的流量。 SSR 將提高您的速度，提高您的搜索排名並增加您商店的流量。

5. 服務工作者

service worker 是一個腳本，它創建一個緩存，然後在需要時從這個緩存中檢索資源。 它在瀏覽器的後台運行，與頁面分離——這就是 PWA 能夠在沒有互聯網連接的情況下運行的方式。

6. 應用外殼

服務工作者創建的緩存還使您能夠使用應用程序外殼，這是 PWA 用戶界面所需的最少代碼。 應用程序外殼使您的 PWA 更快，因為它保持靜態內容緩存並準備就緒，因此只需要加載動態內容。

7. Web 應用清單

當用戶單擊 PWA 的主屏幕圖標時，瀏覽器需要一定數量的信息才能知道該做什麼。 Web 應用清單提供了此信息，其中包括指向 PWA 圖標圖像的鏈接以及指向 PWA 本身的鏈接。

8. 店面

最後，您需要使用 React 或 Vue 框架為您的 PWA 自定義店面代碼。 這是用戶實際與您的網站進行交互的地方，因此開發起來尤為重要、耗時且成本高昂。

您根本不能在應用程序的這方面吝嗇。 沒有吸引力或難以導航的設計會導致您錯失潛在的銷售機會，並將訪問者推向您的競爭對手。

底線

開發 PWA 的傳統方法可能不適用於中小型企業。

要在內部執行此操作，您需要支付開發人員更多小時的工作費用。 此外，您當前的開發人員可能不具備構建 PWA 所需的技能。 在這種情況下，您需要在工資單中增加新的高技能工人。 你能負擔得起嗎？

另一種選擇是將部分或全部這些開發任務外包給第三方供應商。 但同樣，這是一筆不小的開支。 除了創建 PWA 的成本之外，您還必須考慮到隨著時間的推移，您還需要支付大量維護和管理費用。

沒有辦法解決它 - 以傳統方式開發 PWA 真的會讓你付出代價。

亞當·里奇（Adam Ritchie）是馬里蘭州銀泉市的一名自由作家。 他目前為 Shogun 撰稿，他之前的客戶包括 Groupon、Clutch 和 New Theory。