什麼是漸進式 Web 應用？

平臺原生應用

平臺原生應用 是為特定的作業系統（OS）和/或裝置型別開發的，例如 iOS 或 Android 裝置，通常使用平臺供應商提供的 SDK。它們通常透過供應商的應用商店進行分發，使用者可以在其中找到並安裝它們，之後它們似乎是裝置上永久新增的功能，以某種方式擴充套件了裝置的功能。

平臺原生應用的優勢包括：

• 易於使用者訪問：它們在裝置上擁有自己的圖示，方便使用者查詢和開啟。
• 離線和後臺執行：即使在使用者不與之互動或裝置離線時，它們也能執行。例如，這使得聊天應用在未開啟時也能接收訊息，並向用戶顯示通知。它還使得新聞應用可以在後臺更新，以便在裝置離線時也能顯示最新內容。
• 專用 UI：它們可以實現自己獨特、沉浸式的 UI。
• 作業系統整合：它們可以整合到宿主作業系統中：例如，訊息應用可以註冊為共享目標，使使用者可以在照片應用中選擇一張圖片，並使用訊息應用將其傳送。它們還可以訪問裝置的攝像頭、GPS 或加速度計等功能。
• 應用商店整合：它們透過應用商店分發，為使用者提供了一個集中的查詢地點，以及一個決定是否安裝的一致方式。

傳統網站

傳統上，網站更像是“使用者訪問的地方”，而不是“使用者擁有的東西”。通常，一個網站：在使用者不訪問時，不會在使用者裝置上留下痕跡；使用者只能透過開啟瀏覽器並導航到該網站來訪問；並且高度依賴網路連線。

然而，網站相比於平臺原生應用也有一些優勢，包括：

• 單一程式碼庫：由於 Web 本身是跨平臺的，一個網站可以從單一程式碼庫在不同的作業系統和裝置型別上執行。
• 透過 Web 分發：Web 是一個出色的分發平臺。網站可以被搜尋引擎索引，並且只需使用 URL 即可共享和訪問。網站的分發無需註冊任何供應商的應用商店。

漸進式 Web 應用

漸進式 Web 應用結合了傳統網站和平臺原生應用的最佳特性。

PWA 擁有網站的優勢，包括：

• PWA 使用標準的 Web 平臺技術開發，因此它們可以從單一程式碼庫在多種作業系統和裝置型別上執行。
• PWA 可以直接從 Web 訪問。

PWA 還擁有許多平臺原生應用的優勢，包括：

• PWA 可以安裝到裝置上。這意味著：

  • PWA 可以從平臺的應用商店安裝，也可以直接從 Web 安裝。
  • PWA 可以像平臺原生應用一樣安裝，並且可以自定義安裝過程。
  • 安裝後，PWA 會在裝置上獲得一個應用圖示，與其他平臺原生應用並列。
  • 安裝後，PWA 可以作為獨立應用啟動，而不是在瀏覽器中作為網站執行。

• PWA 可以離線和後臺執行：典型的網站只有在頁面在瀏覽器中載入時才活躍。PWA 可以：

  • 在裝置沒有網路連線時工作。
  • 在後臺更新內容。
  • 響應來自伺服器的推送訊息。
  • 使用作業系統通知系統顯示通知。

• PWA 可以使用整個螢幕，而不是在瀏覽器 UI 中執行。

• PWA 可以整合到裝置中，註冊為共享目標和源，並訪問裝置功能。

• PWA 可以在應用商店中分發，也可以透過 Web 公開分發。

PWA 和瀏覽器

當您在瀏覽器中訪問網站時，網站“在瀏覽器中執行”是顯而易見的。瀏覽器 UI 為網站提供了一個可見的框架，包括後退/前進按鈕和頁面標題等 UI 功能。您的網站呼叫的 Web API 由瀏覽器引擎實現。

PWA 通常看起來像平臺原生應用——它們通常顯示在沒有瀏覽器 UI 包圍的情況下——但從技術上講，它們仍然是網站。這意味著它們需要一個瀏覽器引擎，如 Chrome 或 Firefox 中的引擎來管理和執行它們。對於平臺原生應用，平臺 OS 管理應用，提供其執行的環境。對於 PWA，瀏覽器引擎執行此後臺角色，就像它為普通網站執行的那樣。

在我們關於 PWA 的文件中，我們有時會提到瀏覽器扮演這個後臺角色。例如，我們可能會說，“當收到推送通知時，瀏覽器會啟動 PWA 的服務工作執行緒。”在這裡，瀏覽器的活動完全在後臺進行。從 PWA 的角度來看，作業系統啟動它可能同樣沒有區別。對於某些系統，例如 Chromebook，甚至可能沒有“瀏覽器”和“作業系統”之間的區別。

PWA 的技術特性

因為 PWA 是網站，所以它們具有與其他任何網站相同的基本功能：至少一個 HTML 頁面，很可能載入了一些 CSS 和 JavaScript。與普通網站一樣，頁面載入的 JavaScript 具有全域性Window 物件，並且可以訪問透過該物件可用的所有 Web API。

除此之外，PWA 還具有一些附加功能：

• 一個Web 應用清單檔案，它至少提供瀏覽器安裝 PWA 所需的資訊，例如應用名稱和圖示。
• 可選地，一個服務工作執行緒，用於提供離線體驗。

Web 應用清單

PWA 必須有一個 Web 應用清單，並且清單必須包含足夠的資訊供瀏覽器安裝 PWA。

清單可以定義 PWA 的外觀的許多其他方面，例如主題顏色和背景顏色，以及它的行為，包括其作為其他應用的共享目標的能力，或處理特定檔案型別的能力。

服務工作執行緒

雖然 PWA 無需服務工作執行緒即可安裝，但服務工作執行緒經常與 PWA 一起使用，以提供至少最基本的離線體驗。

服務工作執行緒鼓勵一種架構，在這種架構中，應用的頁面——即網站的傳統部分——實現使用者介面，而服務工作執行緒實現一個可以支援離線和後臺執行的後端，使 PWA 的行為更像一個應用而不是一個網站。這是因為服務工作執行緒可以在需要時（例如，處理推送通知）在後臺由瀏覽器啟動。

PWA 和單頁應用

傳統上，網站被構建為相互連結的頁面集合。當用戶單擊同一網站中一個頁面上的連結到另一個頁面時，瀏覽器會載入新頁面作為一個全新的實體，包括 HTML 和 HTML 載入的子資源，如 CSS 和 JavaScript。在單頁應用中，站點由一個 HTML 頁面組成，當用戶單擊內部連結時，這由 JavaScript 從伺服器獲取新內容並更新頁面相關部分來處理。

單頁應用可以提供更接近平臺原生應用的使用者體驗，因此 PWA 通常被實現為單頁應用。特別是，單頁應用更容易實現無縫的使用者介面，使用者看到的是一個單一、一致的頁面，並且只有頁面的相關部分會在使用者與應用互動時更新。

然而，PWA 不必是單頁應用，單頁應用也不必是 PWA。

漸進增強

雖然漸進式增強是大多數網站的可取屬性，但對於 PWA 來說尤其重要，因為 PWA 期望在各種裝置上執行，並且經常使用高階 Web API，而這些 API 可能並非所有瀏覽器都支援。

漸進式增強的一個基本組成部分是，如果使用者透過在瀏覽器中輸入其 URL 來訪問 Web 上的 PWA，使用者可以像普通網站一樣與應用進行互動。但如果瀏覽器可以安裝它，使用者將被提示安裝，應用將作為裝置上的新功能出現。

PWA 應該對高階 API 進行功能檢測，並提供可接受的回退體驗。

例如，後臺同步 API 使 PWA 能夠在裝置連線到網路後立即讓服務工作執行緒發出網路請求。這的一個典型用例是訊息傳遞。假設使用者撰寫了一條訊息，但當用戶嘗試傳送訊息時，裝置處於離線狀態。後臺同步 API 使裝置能夠在裝置連線後在後臺傳送訊息。在不支援後臺同步的裝置上，應用應告知使用者訊息未能傳送，並讓他們有機會稍後重試。