PWA 與 SPA：相似但不同

標準網站的吸引力開始失去魅力，讓位給 Web 應用程序。 隨著時間的推移，Web 應用程序因其引人入勝且速度驚人的體驗而變得越來越流行。

大多數技術成功只能通過在您的網站結構中實施某些架構來獲得，以確保您的網站的穩定性、性能和參與度。

目前構建 Web 應用程序的兩種流行方法是 PWA 和 SPA。 對於這兩種方法的常見概念，它們並不相同。 這一點至關重要，因為他們被忽視的差異往往會導致代價高昂的錯誤和失去機會； 當然，您（可能是對每一毫秒都很重要的網站所有者）不希望您的 Web 應用程序落後於世界其他地方。

它們是如何工作的？

單頁應用程序 (SPA)

SPA（單頁應用程序）是一個網站，其當前頁面是動態更新的，而不是完全從服務器下載的。 換句話說，您的 Web 應用程序（HTML、CSS、JavaScript）的所有必要應用程序代碼只需要加載一次。 當用戶瀏覽 Web 應用程序時，所有需要更新的內容和元素都會被獲取並重新呈現，而無需用戶重新加載瀏覽器。

這節省了瀏覽器和服務器之間的傳統往返，從而允許更快的交互和更好的用戶滿意度。

您可能一直在使用 SPA，甚至沒有意識到這一點。 注意大多數社交媒體網站的感覺如何？ 這是因為他們都使用 SPA 來簡化用戶體驗並創建持續的新聞更新提要。

以下是您可能經常使用的一些值得注意的 SPA：

• Facebook
• 郵箱
• 領英
• 網飛
• 谷歌地圖

漸進式 Web 應用程序 (PWA)

與 SPA 不同，Progressive Web App (PWA) 更像是一組指南和清單，而不是特定的架構。 PWAs 是眾所周知的，並且與 SPAs 有幾個不同的特點，例如：

• Service Worker：Service Worker 為 PWA 的許多突出特性提供了技術基礎，即離線可用性和推送通知。
• Web App Manifest：一個 JSON 文件，其中包含 PWA 所需的元數據。 可以使用 PWA 清單生成器自動生成 Web 應用清單。
• HTTPS：PWA 始終從安全來源提供服務。

Service Worker 充當瀏覽器和網絡之間的代理，負責網站資產的緩存和網絡請求的攔截，從而導致網站的離線可用性和包括推送通知在內的各種其他功能。

服務人員也在後台提供了極大的幫助。 除了提供離線功能外，他們還負責大量繁重的計算，這也是大多數 PWA 網站如此高效和快速加載的主要原因。

我們已經編寫了關於什麼是 Progressive Web App 的深入指南。 所以你不能錯過！

他們有什麼相似之處？

作為新技術和革命性的技術，這兩種架構為其用戶提供了一種與傳統網站截然不同的應用程序式、引人入勝的體驗。 乍一看，他們很容易被誤認為是彼此； 然而，使所有這些體驗成為可能的基本過程並不相同。

有什麼不同？

有一個普遍的誤解認為 PWA 幾乎總是 SPA，這是完全錯誤的。 從上面的 PWA 要求中，您可以看到它沒有聲明其網站內容必須在瀏覽器中呈現，或者 PWA 不應請求服務器呈現的頁面。

簡而言之，PWA 是一個具有 Web 必須提供的所有最佳品質的網站。 它可靠、快速且引人入勝。

而且由於 PWA 需要在與 UI 不同的線程中運行的服務工作者，因此 PWA 的不同之處在於它們的內容總是幾乎即時顯示，這與 SPA 不同，SPA 幾乎總是伴隨著特定的初始加載屏幕來預取網站'資產。 這意味著 SPA JavaScript 框架在您的 Web 應用程序上放置的大部分（如果不是全部）大量 JavaScript 開銷都可以重新分配給服務工作者。

顯然，這兩者之間的差異不僅如此，還有很多需要剖析：

在速度方面

在速度方面，這兩種架構非常相似，因為它們都是尖端技術。 然而，這裡的優勢可能會流向 PWA。

這樣做的原因是，雖然 SPA 和 PWA 都使用 JavaScript 進行開發，但 PWA 能夠利用其服務工作者來渲染一些作品。 換句話說，SPA 添加到您的 Web 應用程序中的大部分過多的 JavaScript 開銷可以轉而委託給服務人員，從而大大減少 JavaScript 佔用空間。

這使 PWA 站點能夠在需要之前預先緩存許多站點資產：腳本、CSS、圖像和標記。 多虧了這些預緩存，用戶的網絡可以減輕渲染帶來的額外壓力，並且能夠離線工作。

在成本方面

這是 PWA輸給SPA 的地方。 PWA 擁有尖端技術，因此需要額外的成本。 更不用說 PWA 的開發通常一次持續數週甚至數月，因為它不像 SPA 那樣簡化流程。

PWA ： $2000 – $20.000

SPA : $1500 – $12.000

有許多因素會影響您的建築成本，例如開發人員的費率、工作的複雜性、您的偏好和定制……在進行成本估算時，所有這些都應該考慮在內。

 推薦閱讀：構建一個 Magento PWA 需要多少錢？

在用戶體驗/用戶界面方面

雖然 SPA 過去曾佔有一席之地，但人們開始轉向 PWA，因為它提供了更好的用戶體驗 (UX)。

PWA 都擁有類似應用程序的界面，即使在離線或連接速度較慢的情況下也能帶來更多的參與度和可靠性。 出於這些原因，Twitter 等有影響力的品牌通過發布他們自己的網站的 PWA 版本，即 Twitter Lite，發起了 PWA 運動。

這不僅僅是推特。 PWA 運動預計將繼續存在； 再加上最近 Spotify 的參與，這一運動似乎並沒有很快放緩的跡象。

單頁應用程序的局限性在於無法在大型網站上提供令人滿意的用戶體驗，這就是為什麼它最適合面向數據且不一定具有視覺效果的網站（如 Gmail 和 Facebook）的原因。

在安全方面

安全是一個微妙的話題。 雖然 PWA 和 SPA 都使用 JavaScript 作為開發的主要庫，但它們在安全性方面的問題有很大不同，其中大部分來自 SPA 及其 XSS（跨站點腳本）問題。

PWA 提出的安全問題要少得多，因為 Progressive Web App 的本質是所有連接都通過安全的 HTTPS 來源。 與 PWA 一樣，HTTPS 也是 Web 的未來，通過它可以訪問服務工作者等尖端功能並使其成為可能。

在可訪問性方面

與 SPA 相比，PWA 通常更易於訪問，尤其是最近 Chrome 對桌面 PWA 的支持。 與 PWA 交互的用戶可以選擇將他們正在使用的應用程序的快捷方式添加到他們的主屏幕或桌面。

SPA 在可訪問性方面實際上很糟糕，因為每次執行頁面轉換時，它都會讓用戶處於茫然無措的狀態。 這對於殘障用戶來說尤其令人沮喪，因為如果頁面不斷改變其 DOM（文檔對像模型）結構，則沒有 aria 或角色屬性能夠幫助他們。

包起來

儘管 SPA 可能具有革命性，但時間似乎已經慢慢趕上了它。 雖然 SPA 和 PWA 是相同的，但鑑於 PWA 帶來的好處，越來越多的人選擇 PWA 而不是 SPA，這是可以理解的。

通過 SimiCart，我們為 Magento 商家提供最佳 PWA 解決方案。