單頁面應用（SPA）和漸進式Web應用（PWA）有哪些區別？

不知您是否已注意到，單頁面應用程式(Single-page applications，SPA)和漸進式Web應用程式(Progressive web apps，PWA)正在徹底地改變著企業Web服務的交付模式。這兩種新技術雖然看起來十分相似、甚至經常被人們所交替使用，但是實際上兩者有著本質上的區別。下面讓我們一起來深入研究它們各自的主要特性、以及在服務交付上的不同之處。

什麼是單頁面應用程式?

顧名思義，SPA是在單個頁面內，動態地載入網站的各項內容。從本質上講，使用者與頁面互動的每一種內容和元素，都會在同一個頁面上完成。這意味著，您在瀏覽此類網站時，無需載入任何單獨的文件物件模型(Document Object Models，DOM)。該方法的主要意圖是：通過載入使用者需要使用和檢視的所有內容，讓它們保持在同一個頁面上，以獲取更好的使用體驗。

由此帶來的好處是，SPA可以避免那些在伺服器上渲染各種頁面時，所產生的中斷問題。它在一定程度上消除了，一直以來困惑在Web開發界的一個問題：如何才能向用戶提供無縫的訪問體驗。當您在SPA上使用頁面導航服務時，可能會錯誤地認為自己訪問了不同的DOM。而實際上，您瀏覽的是由單個DOM所預載入的內容。若想將SPA分成單獨的內容部分，我們通常會涉及使用JavaScript檢視，為每個部分提供單一的URL。同時，資料鏈路連線器負責將各個部分連結到主DOM上，並允許您以非同步的方式去訪問它們。

儘管目前已有Mint和elm-spa等技術的興起，但是JavaScript仍然是製作SPA的最常用程式語言。JavaScript會使用async/await函數，讓使用者能夠非同步載入動態和靜態的內容，而不會因為某個輸入而阻塞另一個請求的輸出。也就是說，SPA能夠在非阻塞的輸入輸出(I/O)系統上流暢運行。目前，諸如ReactJS、Vue.js、AngularJS、Ember.js、以及Backbone.js之類的JavaScript框架，都能夠支援SPA的快速開發。

如今，諸如Netflix、YouTube、PayPal、Facebook、Instagram、Twitter、以及Pinterest之類的明星企業，都從交付速度的角度，相繼將其網站服務轉換成為了單頁面應用。

什麼是漸進式Web應用程式?

PWA是由Google於2015年推出的。其目標是通過構建出能夠以直接和漸進的方式，與其使用者互動的應用程式，實現在網路連線不佳或中斷的情況下，保持使用者的使用體驗。

作為另一種Web應用程式或軟體，PWA在其功能中使用了各種標準的、新興的Web瀏覽器指南。與SPA的典型初始化內容載入不同，PWA架構主要是通過一些指南，來實現可擴展性、使用者適應性、超快速交付、可安裝性、以及原生性。總的說來，使用者可以流暢地與應用程式進行持續互動。

作為PWA的核心特徵之一，可安裝性保證了使用者可以通過Web瀏覽器，即時地訪問到服務資源，而無需進行任何額外的安裝。當然，與任何其他網站一樣，PWA也需要被分配一個URL。漸進式Web應用程式的獨特之處在於，它們提供了瞬間傳送內容的後臺助手。據此，您不但可以快速、可靠地獲取Web應用頁面，而且可以隨時能夠互動和使用其內容和元件。

目前，以Spotify、Slack、以及Uber為首的明星公司，正在使用著由PWA開發的應用程式。

PWA通常擁有一套通用的架構規則，並且通過包含如下屬性，以保證應用的正常運行：

1. Service Worker

Service Worker可以通過介入頁面導航、以及使用者請求，來輕鬆地在PWA中交付出各種內容。由於快取API可以儲存針對使用者離線請求的各種響應，因此它們能夠確保應用程式，即便處於沒有網路連線的狀態下，也可以載入相關的快取資料。

而通過使用promise物件，Service Worker可以根據使用者的最終請求(同樣即便處於離線狀態)，交付出已經下載的內容。也就是說，Service Worker使得PWA具有非阻塞性。

2. 安全的上下文

Service Worker需要安全的連線通道(例如HTTPS)，以確保所交付內容的機密性。當您傳送請求時，Service Worker會在PWA和瀏覽器之間，通過建立一個安全通訊，來作為安全的上下文(Secure Context)，以防止PWA受到中間人的攻擊(MITM)，而產生洩密事件。

3. Web應用的清單檔案

作為一個JSON檔案，Web清單可以通過定義PWA的基本特徵，來詳細指明訪問、發現和使用PWA內容的各項先決條件。該檔案通常包括應用程式的名稱、其URL、及其元件。此外，清單檔案還會包含將Web應用程式，轉換為可安裝的應用，所需要的各項資訊。

PWA和SPA之間有何相似之處?

雖然PWA和SPA的後臺邏輯不同，但它們仍然有著一些共同點。畢竟，它們都旨在通過提供響應式的介面，來改善使用者對於網站服務的訪問速度和體驗。就普通使用者而言，他們無法從單純的介面和互動方式，來分辨這兩類技術網站。而且兩者都需要向用戶提供一個可訪問的URL。

SPA和PWA之間的主要區別

PWA和SPA在功能上的差異，主要體現在如下方面：

單頁面應用的主要特點

• 它們只能通過瀏覽器被訪問到。

• 儘管並不推薦，但是使用者仍可以通過不安全的網路連線(例如HTTP)，以獲取服務。

• 它們原則上並不需要服務支援人員。

• 由於SPA並不帶有JSON清單檔案，因此它們是可解除安裝的。

• 顧名思義，它們被限制在單頁面上。

• 一旦失去網路，它們將無法被訪問到。

漸進式Web應用的主要特點

• 由於具有可安裝性，因此使用者可以通過瀏覽器訪問它們。

• 所有PWA都需要Service Worker，並且它們必須通過安全的網路連線(如HTTPS)，來傳輸請求。

• 其響應會被快取，並通過promise物件進行傳遞。

• 即使在沒有網路連線的情況下，它們也可以被訪問到。

• 它們的整體速度比SPA更快。

• 由於帶有一個清單檔案，因此它們具有可下載、可安裝、以及易於被訪問等特性。

• PWA可能並非只有一個頁面。

如何根據交付需求選用SPA和PWA

總的說來，PWA的採用不但改善了一般使用者瀏覽網站的體驗，而且降低了企業級應用程式的跳轉頻率，進而為企業增加營收。另一方面，SPA則使得新媒體應用煥然一新，人們不但可以輕鬆地通過網路實現彼此互動，而且不會遇到頁面載入緩慢等各種窘境。因此，您和您的團隊需要根據實際交付需求，為即將構建的應用服務，從中選擇合適的技術。