響應式網頁設計和漸進式網頁應用 (PWA)：差異

由於這兩者在外觀和執行方式上如此相似，您一定想知道為什麼沒有對兩種流行的 Web 開發方法進行更詳細的比較：響應式 Web 設計和漸進式 Web 應用程序。 嗯，就是這樣。 在本文中，我們將比較響應式網頁設計和 Progressive Web App，並找出它們之間真正的不同之處。

響應式網頁設計

這是什麼

響應式 Web 設計 (RWD) 是 Ethan Marcotte 在 2010 年首次描述的一種 Web 開發方法，比 Progressive Web App 的概念早了五年。

這個怎麼運作

基本上，響應式網頁設計的理念是設計和開發應該以響應用戶設備為目標——這意味著響應所使用設備的行為、大小、平台和方向。 這是通過使用流體網格、靈活的圖像和 CSS 媒體查詢來實現的：

流暢的網格、靈活的圖像和媒體查詢是響應式網頁設計的三個技術要素……

Ethan Marcotte，響應式網頁設計

流體網格

使用流體網格設計的響應式網站可以更好地處理市場上不同的屏幕尺寸，因為流體網格不是定義基於像素的尺寸，而是採用了新的基於百分比的計算。

靈活的圖像

Web 上的圖像不是自然流動的，但是通過一些配置（ width屬性設置為100% ， height屬性設置為auto ），任何圖像都可以在所有設備上響應。

CSS 媒體查詢

雖然具有靈活圖像和流體網格的響應式網頁在技術上是響應式的，但它看起來並沒有想像中那麼好。 這就是 CSS 媒體查詢發揮作用的地方，因為它們用於創建更好的體驗，為不同的設備量身定制。 這些量身定制的體驗通常是通過添加在特定屏幕尺寸生效的斷點來引入的。

總體而言，響應式 Web 設計使當今的 Web 變得更容易訪問，因為這種方法消除了對更多開發階段的需求，而這些階段以前需要適應市場上不同的屏幕尺寸。 或者，用它的創造者的話來說，這種 Web 開發方法最終允許我們“為事物的潮起潮落而設計”。

例子

響應式網站如今已司空見慣，幾乎您遇到的每個網站都具有一定的響應性。

漸進式網絡應用

這是什麼

由Alex Russel在2015 年首次創造，Progressive Web App 是 Web 的下一個自然演變，因為它比典型的響應式網站有很多好處。 根據 Pete LePage – Google Developer Advocate 的說法，“漸進式”部分可以解釋為“隨著用戶逐漸與應用程序建立關係，它變得越來越強大”。

用外行的話來說，PWA 是您的類似應用程序的網站，具有（幾乎）您可以從本機移動應用程序中獲得的所有功能，包括推送通知、離線功能等。 正因為如此，整個體驗比它的響應式網站更上一層樓，因為 PWA 可以保留基於 Web 的平台帶來的所有假定好處。

 相關文章：什麼是漸進式 Web 應用程序？

這個怎麼運作

總結 PWA 的核心組件實際上非常容易。 基本上，為了使上述所有漸進功能成為可能，這些是要求：

網絡應用清單

Web 應用清單是一個 JSON 文件，它為 PWA 的安裝過程提供必要的元數據，並確定 PWA 在用戶主屏幕上的呈現方式。

服務人員

普遍認為是使 PWA 的所有漸進式功能成為可能的基礎組件，服務工作者獨立於瀏覽器運行，並在與主要 JavaScript 不同的線程上運行。

安全上下文

作為 Web 的新標準，PWA 必須通過安全協議 HTTPS 進行分割。 這保證了用戶和服務器之間的安全通信，作為回報，確保了無風險的體驗。

例子

由於 PWA 的行為與原生移動應用程序沒有什麼不同，因此您可能之前訪問過 PWA 站點而不知道它。 想想像 Instagram 和 Pinterest 這樣的大型應用程序網站——它們都由 PWA 提供支持。

 推薦閱讀：2020 年漸進式 Web 應用的 12 個最佳示例

它們重疊的地方

具有現代功能的類似體驗

如果到目前為止一切對您來說都有意義，那麼您應該會看到響應式網頁設計 (RWD) 和 PWA 在用戶體驗方面有很多重疊之處。 從技術上講，PWA是響應式的——因為該方法適用於在所有設備上查看，並帶有一些現代觸摸以啟用更多類似應用程序的功能。

由於它們都是 Web 開發的方法，因此它們共享 Web 的幾乎所有相同的好處，包括：

• 一個 URL，一個代碼庫，適用於所有平台
• 使用 HTTPS 增強安全性
• 更好的可發現性並始終保持最新

他們不同的地方

這就是事情變得有趣的地方，因為這兩種 Web 開發方法——雖然在外觀上大多相似——但它們對現實世界的影響卻大不相同。

在功能方面

根據定義，PWA 比典型的響應式網站功能更豐富。 通過利用 Web 技術的最新進展，即服務工作者和 Web 應用程序清單，PWA 可以提供以前專屬於本地移動應用程序的功能，例如：

添加到主屏幕

通過註冊的服務工作者和 Web 應用程序清單，PWA 可以安裝在具有支持瀏覽器的每台設備上。

>> 了解更多：創建您的第一個 PWA

推送通知

通過服務工作者，您可以發送通知並將它們顯示在用戶的設備上，就像原生應用程序一樣。 這是 Web 的一個相對較新的特性，它利用了 Push API、Notifications API 和 Web Push Protocol； 在不久的將來，由於 Notifications Triggers 和 Badging API 的出現，這個功能只會變得更好。

離線能力

借助瀏覽器內可編程網絡代理（即服務工作者）的幫助，PWA 可以主動緩存和提供離線內容，而無需依賴 HTTP 緩存等過時的緩存機制。

注意：響應式網站仍然可以從 Web 中的所有現有 API 中受益，以提供最佳的用戶體驗——只是你不會獲得所有依賴於 service worker 的功能。

 推薦閱讀：Progressive Web App (PWA) 和硬件訪問

在性能方面

由於響應式網站仍然是典型的網站，受到與當前 HTTP 緩存機制相關的所有缺點的阻礙，因此可以合理地期望 PWA 具有更好的性能，因為它使用了一種更新的、更面向性能的緩存機制，稱為服務工作者。

更快的緩存機制

註冊服務工作者後，您可以準確控制正在緩存的內容，從而為回訪者提供更好的體驗。

服務人員對現實世界的性能影響也不是沒有仔細觀察過的。 通過使用首次繪製時間作為衡量用戶對網站的第一次體驗的指標，谷歌自己進行了一項研究，觀察谷歌 I/O 網絡應用程序與一個受控組（其中服務人員控製網絡應用程序）的性能，並且受支持的組（使用的瀏覽器支持服務工作，但尚未控制 Web 應用程序）。

結果在桌面上尤其令人印象深刻，因為在這裡我們可以看到服務人員盡其所能將原始的firstpaint時間（912 毫秒）減少到僅583 毫秒。 這幾乎是一種即時體驗。

然而，在移動設備上，事情就不那麼令人印象深刻了：

在這裡我們可以看到，受控組的尾部看起來仍然與受支持組有點相似。 這主要是因為在移動設備上，Service Worker 線程沒有得到優化，與桌面相比需要更多時間來啟動。

總體而言，使用服務人員（或者換句話說，使用 PWA）實現的性能提升簡直是驚人的。 當然，移動服務人員方面還有一些工作要做。 但我們認為，總體而言，它仍然是向 Web 曾經的水平邁出的一小步，並且是朝著正確方向邁出的一步。

在安全方面

HTTPS——分界線

雖然典型的響應式網站可以像 PWA 一樣安全，但響應式網站不需要使用安全通信協議。 這與 PWA 支持的網站相反，因為 PWA 的創始人 Google 要求 PWA 中服務器和客戶端之間的所有通信都必須通過使用 HTTPS 進行加密。

與 PWA 相關的大多數功能（例如地理定位甚至服務工作者）只有在使用 HTTPS 加載應用程序後才可用。

MDN 網絡文檔、漸進式網絡應用程序 (PWA)

 相關文章：你需要HTTPS嗎？

結論

上述通過服務工作者實現的性能提升，再加上其他類似應用程序的功能，如推送通知、添加到主屏幕（以及在不久的將來，地理圍欄和定期同步），所有這些都證明 PWA 成為下一個合適的候選者網絡的演變。 到目前為止，PWA 運動已經受到幾乎所有大公司的廣泛鼓勵，包括微軟在 Windows 10 中推動 PWA 的採用。不久之後，我們就會看到一個充滿漸進式 Web 應用程序的未來——比如史蒂夫喬布斯所設想的：

完整的 Safari 引擎位於 iPhone 內部。 因此，您可以編寫令人驚嘆的 Web 2.0 和 Ajax 應用程序，它們的外觀和行為都與 iPhone 上的應用程序完全相同。 而且這些應用程序可以與 iPhone 服務完美集成。 他們可以撥打電話、發送電子郵件、在 Google 地圖上查找位置。

史蒂夫·喬布斯，2007