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

什么是單頁面應用程序? 

[[412462]]

顧名思義，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的快速開發。為了方便上手，您可以首先從鏈接--https://www.makeuseof.com/vue-js-beginners-overview/處，獲悉有關Vue.js的基本概念。

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

什么是漸進式Web應用程序?

[[412463]]

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之間的主要區別

[[412464]]

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

單頁面應用的主要特點

• 它們只能通過瀏覽器被訪問到。
• 盡管并不推薦，但是用戶仍可以通過不安全的網絡連接(例如HTTP)，以獲取服務。
• 它們原則上并不需要服務支持人員。
• 由于SPA并不帶有JSON清單文件，因此它們是可卸載的。
• 顧名思義，它們被限制在單頁面上。
• 一旦失去網絡，它們將無法被訪問到。

漸進式Web應用的主要特點

• 由于具有可安裝性，因此用戶可以通過瀏覽器訪問它們。
• 所有PWA都需要Service Worker，并且它們必須通過安全的網絡連接(如HTTPS)，來傳輸請求。
• 其響應會被緩存，并通過promise對象進行傳遞。
• 即使在沒有網絡連接的情況下，它們也可以被訪問到。
• 它們的整體速度比SPA更快。
• 由于帶有一個清單文件，因此它們具有可下載、可安裝、以及易于被訪問等特性。
• PWA可能并非只有一個頁面。

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

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

原文標題：What Are Single-Page Applications and Progressive Web Apps?，作者: IDOWU OMISOLA

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】