使 PWA 可安裝

PWA 的一個定義性特徵是瀏覽器可以推廣它以在裝置上安裝。安裝後，PWA 對使用者來說就像一個平臺特定的應用程式，是裝置上永久存在的功能，可以像任何其他應用程式一樣直接從作業系統啟動。

我們可以將其總結如下：

在本指南中，我們將討論這些功能。但是，首先，我們將討論 Web 應用程式必須滿足哪些要求才能被推廣安裝。

可安裝性

為了讓 Web 應用程式被支援的瀏覽器推廣安裝，它需要滿足一些技術要求。我們可以將這些視為 Web 應用程式成為 PWA 的最低要求。

注意：雖然這不是 PWA 可安裝的要求，但許多 PWA 使用 Service Worker 來提供離線體驗。有關更多資訊，請參閱 CycleTracker：Service Worker 教程。

Web 應用清單是一個 JSON 檔案，它告訴瀏覽器 PWA 在裝置上應該如何顯示和執行。要使 Web 應用程式成為 PWA，它必須是可安裝的，而要使其可安裝，它必須包含一個清單。

清單是透過應用程式的 HTML 中的 <link> 元素包含的。

html

<!doctype html>
<html lang="en">
  <head>
    <link rel="manifest" href="manifest.json" />
    <!-- ... -->
  </head>
  <body></body>
</html>

如果 PWA 有多個頁面，則每個頁面都必須以這種方式引用清單。

清單包含一個 JSON 物件，其中包含一組成員，每個成員定義了 PWA 的外觀或行為的某個方面。這是一個非常簡單的清單，只包含兩個成員：“name”和“icons”。

json

{
  "name": "My PWA",
  "icons": [
    {
      "src": "icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

基於 Chromium 的瀏覽器，包括 Google Chrome、Samsung Internet 和 Microsoft Edge，要求清單包含以下成員：

有關每個成員的完整描述，請參閱 Web 應用清單參考文件。

PWA 要想被安裝，它必須使用 https 協議提供服務，或者從使用 localhost 或 127.0.0.1 的本地開發環境提供服務 — 無論是否帶有埠號。

這比安全上下文的要求更嚴格，安全上下文將從 file:// URL 載入的資源視為安全。

使用者期望在其平臺的應用商店中找到應用，例如 Google Play 商店或 Apple App Store。

如果您的應用符合安裝先決條件，您可以打包它並透過應用商店進行分發。此過程特定於每個應用商店。

PWABuilder 是一個簡化為各種應用商店打包和釋出 PWA 過程的工具。它支援 Google Play 商店、Microsoft Store、Meta Quest Store 和 iOS App Store。

如果您已將應用新增到應用商店，使用者就可以像平臺特定應用一樣從那裡安裝它。

當支援的瀏覽器確定 Web 應用程式符合前面描述的可安裝性標準時，它將向用戶推廣該應用程式進行安裝。使用者將有機會安裝該應用程式。這意味著您可以將 PWA 作為網站分發，使其可以透過網路搜尋發現，並且還可以將其分發到應用商店，以便使用者可以在那裡找到它。

這是 PWA 能夠提供兩全其美之道的絕佳範例。這也是 PWA 如何與漸進增強配合工作的典範：如果使用者在 Web 上遇到您的 PWA，使用無法安裝它的瀏覽器，他們可以像普通網站一樣使用它。

從 Web 安裝 PWA 的使用者介面因瀏覽器和平臺而異。例如，當用戶導航到某個頁面時，瀏覽器可能會在 URL 欄中顯示一個“安裝”圖示。

Chrome URL bar, showing PWA install icon

當用戶選擇該圖示時，瀏覽器會顯示一個提示，詢問他們是否要安裝 PWA，如果他們同意，PWA 就會被安裝。

該提示顯示 PWA 的名稱和圖示，這些資訊來自 name 和 icons 清單成員。

瀏覽器和平臺對從 Web 安裝 PWA 的支援情況各不相同。

桌面端

基於 Chromium 的瀏覽器支援在所有受支援的桌面作業系統上安裝帶有清單檔案的 PWA。
在 macOS Sonoma（Safari 17）及更高版本中，Safari 支援“新增到 Dock”（*檔案* > *新增到 Dock...*），可以為任何 Web 應用（無論是否有清單檔案）執行此操作。
Firefox 不支援使用清單檔案安裝 PWA。

移動端