單頁應用程序和漸進式 Web 應用程序的好處：改進 CX

已發表: 2019-06-06

隨著客戶體驗要求電子商務提供商與他們提供快速、可靠的交互，單頁應用程序的好處變得越來越明顯。

在過去的 20 年中，大多數網站都是以相同的方式構建的——使用 HTML、CSS 和 JavaScript。隨著時間的推移，這些技術變得越來越先進，但其原理基本保持不變：用戶與網頁交互，用戶的瀏覽器調用 Web 服務器，該服務器反過來用另一批 HTML、CSS 和JavaScript，然後加載並顯示在瀏覽器中。

（唷。這是很多。）

這個過程最常涉及刷新頁面，儘管一些技術，如 AJAX，確實使開發人員能夠在不刷新整個頁面的情況下更改某些內容。正因為如此，大多數網站的行為和行為都像網站，而不是應用程序。

大多數網站還具有緊密耦合的後端和表示層，這意味著網站的前端和後端之間沒有真正的分離，因為它們都是單個整體應用程序的一部分。

單頁應用程序和漸進式 Web 應用程序如何改善客戶體驗

在過去十年中，原生 iOS 和 Android 應用程序已成為我們幾乎所有人的普遍應用。這些應用程序的行為與實際網站不同，為用戶提供了非常不同且通常更令人滿意的體驗。

按下鏈接或按鈕時頁面不會刷新，更改加載速度更快，並且體驗通常比同等的移動網站好很多。在原生電子商務應用程序的情況下，當用戶點擊鏈接時，應用程序將調用後端服務器，而不是該服務器返回 HTML、CSS 和 JavaScript 表示層，它只是發送所需的原始數據，應用程序管理向用戶顯示的方式。

例如，如果用戶單擊產品以查看其詳細信息，應用程序將調用後端服務器詢問該產品的詳細信息，服務器將響應包含產品名稱、產品名稱等項目的數據字符串。價格和圖像鏈接，但不需要同時發送任何 HTML、CSS 或 JavaScript 來定義圖像的顯示方式。

應用程序本身就是表示層，因此它不需要來自後端服務器的任何內容。這要快得多，並且允許應用程序在不刷新頁面的情況下向客戶顯示產品詳細信息。該技術使開發人員可以自由地構建無縫且流暢的客戶體驗，而不受傳統模型的限制。

如果可以通過 Web 瀏覽器提供類似應用程序的體驗，從而使原生應用程序和網站之間的區別變得模糊，那不是很好嗎？

這就是單頁應用程序 (SPA) 和漸進式 Web 應用程序 (PWA) 的用武之地。

什麼是單頁應用程序？

SPA 是用 JavaScript 編寫的應用程序，可在 Web 瀏覽器中運行，通常不需要刷新頁面即可顯示新信息。

當用戶第一次訪問網站時，應用程序以及演示資源（HTML、CSS 和一些腳本）被加載到瀏覽器中。從此時開始，用戶在單個網頁上，應用程序正在加載相關內容並在需要時更改顯示。

就像原生應用程序一樣，當用戶點擊鏈接時，應用程序調用後端服務器，後端服務器反過來以字符串的形式發送所需的數據，該字符串通常不包含任何演示資源，因為它們已經被當用戶第一次訪問網站時加載。

因為用戶基本上只在一個網頁上，所以實際上並沒有刷新頁面的概念。相反，應用程序會在需要時更改頁面以顯示不同的信息。

SPA 通常與後端應用程序完全解耦，並通過一組 API 與後端接口。它通常位於自己的服務器上，可以單獨部署。在某種程度上，它對後端應用程序非常不可知，因為它只是向後端應用程序發送和接收數據 - 將其視為第 3 方系統。

我們都已經使用 SPA 有一段時間了，可能甚至沒有意識到這一點。 Facebook、Gmail、Twitter、LinkedIn 和 Instagram（以及許多其他）都使用 SPA 來代替他們的網站。

如果您現在訪問這些網站中的任何一個，您會注意到它們的行為更像原生應用程序，而不是傳統網站。頁面很少（如果有的話）在您與它們交互時刷新，而且速度非常快。單擊鏈接和按鈕會更改您正在查看的內容，但像頁眉和頁腳這樣的項目在最初加載後幾乎不會刷新。

單頁應用程序的好處

SPA 最大和最明顯的優勢是如何通過允許設計人員和開發人員提供類似應用程序的體驗而不受重新加載頁面的傳統方法的限制，從而改善客戶體驗。

這確實需要一種新的設計和思考方式，因為常規規則不再適用，但對用戶體驗的好處可能是巨大的。

SPA 加載內容的速度通常比標準網站快得多，因為大部分演示資源（HTML、CSS）只加載一次。與應用程序的交互只需要調用後端服務器來檢索少量數據，而不是完整的 HTML/CSS 頁面。然後應用程序可以快速顯示更改的數據，而無需重新加載頁面。

因為 SPA 與後端應用程序完全解耦，可以單獨部署，具有非常大的優勢。一個小的前端更改不需要部署整個應用程序，這可能是一項相當大的任務，有時需要停機。

SPA的缺點

使用 SPA 的最大挑戰之一是它對 SEO 的影響。由於它們並不總是具有不同頁面的傳統結構，每個頁面都有不同的 url，這可能會導致搜索引擎索引內容的問題。但是，這可以通過使用諸如服務器端渲染和確保點擊生成唯一 URL 等技術來解決。

隨著時間的推移，它也變得不再是一個問題，因為搜索引擎機器人正在改變以應對 SPA。畢竟，谷歌是支持他們的公司之一。

一些 SPA 在第一次訪問時需要一些時間來加載，因為應用程序和演示資源是在第一個頁面視圖上加載的。

這對於 Gmail 等 SPA 非常明顯，當您第一次訪問該網站時，它們的加載圖像很大。這個問題可以通過使用服務器端渲染和高效編程來解決，以確保應用程序和資源的初始負載不會太大。

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

PWA 有點難以定義，因為它不是任何特定的技術，而更多的是一種開發方法或一組原則，它們共同構成了網站或應用程序或多或少的 PWA。

PWA 這個詞最初是由谷歌創造的，谷歌創建了一個清單來定義什麼是 PWA。除其他事項外，Google 已定義 PWA 必須是：

安全 - 在 https 下提供
響應式 - 適合任何外形尺寸
能夠離線工作——使用服務工作者緩存頁面
快速——能夠在 3G 連接上快速加載
App-like – 使用 app-shell 模式和設計感覺像一個應用程序
可安裝 - 使用清單文件允許將應用添加到主屏幕
參與——使用推送通知等工具
漸進式 - 適用於所有瀏覽器，但在現代瀏覽器上逐漸變得更好

如您所見，某些清單項目有點模糊或主觀。您還可以看到其中一些聽起來類似於 SPA。傳統的 HTML/CSS 網站可以像 SPA 一樣變成 PWA。 SPA 不會自動成為 PWA，但具有一些將其推向該方向的功能。

迷茫了嗎？

PWA 的優勢

與 SPA 一樣，PWA 的最大優勢之一是改善了客戶體驗，使其具有類似應用程序的感覺，並彌合了傳統移動網站與原生 iOS 或 Android 應用程序之間的差距。

諸如保存到主屏幕或能夠通過服務人員緩存頁面等功能可以使網站看起來和感覺有點像原生應用程序。

PWA 也往往非常快，因為這是清單中的關鍵原則之一。

Android 操作系統允許瀏覽器訪問移動設備的硬件。它允許推送通知和使用 NFC 掃描等功能，這可以真正改善 CX。

PWA 的缺點

PWA 的最大缺點是缺乏 Apple 的支持。為了充分利用 PWA，它確實需要在 Android 設備上運行，因為 Android 操作系統允許瀏覽器訪問設備上的大量功能，而 Apple 嚴格限制了這一點。這種情況正在慢慢改善，但還有很長的路要走。

另一個缺點是缺乏明確的定義，可以進行解釋。

SPA 和 PWA 是網站開發的未來

雖然這項技術對於大多數電子商務網站來說還不是完全主流，但它無疑是網站發展的未來。

雖然 SPA 是一種可用於構建電子商務應用程序的特定技術，但 PWA 通常是按照 Google 制定的方法構建的網站，他們認為這種方法可以提供最佳客戶體驗。

任何開發 SPA 的人都應該盡可能地滿足 PWA 清單，以提供最好的 CX。這些技術為設計人員和開發人員在用戶體驗和旅程中提供了更多自由，使他們能夠擺脫傳統的逐頁模式。

SAP 和 IBM 等許多軟件提供商都在大力投資為其電子商務平台創建 SPA 前端，我懷疑在幾年內，大多數電子商務網站都會以這種方式構建，使用 Angular 等 JavaScript 框架， Vue 或 React。

使用傳統 HTML/CSS 模型構建的電子商務網站將越來越少，網站與原生應用程序之間的差距將越來越小，以至於難以區分。