安裝

使用者安裝 PWA 後，即會進行以下操作：

  • 在啟動器、主畫面、開始功能表或啟動板中顯示圖示。
  • 當使用者在裝置上搜尋應用程式時，結果會顯示。
  • 在作業系統中設置獨立視窗。
  • 支援特定功能。
，瞭解如何調查及移除這項存取權。

安裝條件

每個瀏覽器都有一項條件，可標明網站或應用程式為漸進式網頁應用程式，安裝後即可提供獨立體驗。 PWA 的中繼資料是由名為「網頁應用程式資訊清單」的 JSON 檔案設定，詳情請參閱下一個單元。

大多數支援這項功能的瀏覽器都會使用 Web App 資訊清單檔案和特定屬性 (例如應用程式名稱和安裝體驗設定)，但 macOS 的 Safari 則除外，這類瀏覽器不支援安裝功能。

允許安裝的不同瀏覽器要求各異，請參閱這篇文章，詳細瞭解 Google Chrome 的適用條件，並附上其他瀏覽器的需求條件連結。

由於 PWA 符合安裝規定進行測試，可能需要幾秒鐘的時間才能完成測試，因此收到網址回應後，您可能暫時無法提供安裝作業。

電腦安裝

在 Linux、Windows、macOS 和 Chromebook 上，Google Chrome 和 Microsoft Edge 目前支援電腦版 PWA。這類瀏覽器會在網址列中顯示安裝標記 (圖示)，指出目前的網站可安裝。

顯示「安裝」標記的電腦版 Chrome 和 Edge

使用者與網站互動時，可能會看到下列彈出式視窗，邀請使用者安裝為應用程式。

Google Chrome 產品內說明會建議安裝 PWA。

瀏覽器的下拉式選單還包含「安裝」使用者可使用的項目：

用於 PWA 安裝的 Chrome 和 Edge 選單項目。

電腦作業系統僅支援獨立和最精簡的 UI 顯示模式。

電腦上安裝的 PWA：

  • 在 Windows 電腦的「開始」功能表或「開始」畫面中、Linux GUI 的 Dock 或桌面、macOS 啟動器，或 Chromebook 的應用程式啟動器中會顯示圖示。
  • 當應用程式處於使用中、最近使用過或在背景開啟時，應用程式切換器和座架會顯示圖示。
  • 顯示在應用程式搜尋結果中，例如在 Windows 中搜尋或 macOS 上的 Spotlight。
  • 可在圖示上設定標記號碼，以表示新通知。方法是使用 Badging API。
  • 可使用「應用程式捷徑」，為圖示設定內容選單。
  • 同一個瀏覽器無法安裝兩次。
，瞭解如何調查及移除這項存取權。

在電腦上安裝應用程式後，使用者就能前往 about:apps、在 PWA 上按一下滑鼠右鍵，然後選取「登入時啟動應用程式」希望您的應用程式在啟動時自動開啟。

iOS 和 iPadOS 安裝

iOS 和 iPadOS 中沒有安裝 PWA 的瀏覽器提示。在這些平台上，PWA 又稱為主畫面網頁應用程式。這些應用程式必須透過 Safari 支援的選單手動新增至主畫面。建議您在 HTML 中加入 apple-touch-icon 標記。 若要定義圖示，請加入圖示的路徑至 HTML <head> 區段，如下所示：

<link rel="apple-touch-icon" href="/icons/ios.png">

Safari 會使用該資訊建立捷徑。如果您未提供 Apple 裝置的特定圖示，則使用者安裝 PWA 時，主畫面上的圖示會是螢幕截圖。

請務必留意，使用者透過 Safari 瀏覽您的網站時，才能安裝 PWA。App Store 提供的其他瀏覽器 (例如 Google Chrome、Firefox、Opera 或 Microsoft Edge) 無法在主畫面上安裝 PWA。

將應用程式新增至主畫面的步驟如下：

  1. 開啟瀏覽器底部或頂端的 [共用] 選單。
  2. 按一下「新增至主畫面」。
  3. 確認應用程式名稱。使用者可以編輯名稱
  4. 按一下「Add」(新增)。在 iOS 和 iPadOS 上，網站和 PWA 的書籤在主畫面中會保持一致。

iOS 和 iPadOS 僅支援獨立顯示模式。因此，如果您採用最小化的 UI 模式，就會改回使用瀏覽器捷徑。如果您使用的是全螢幕模式，系統會切換回獨立模式。

在 iOS 和 iPadOS 上安裝 PWA：

  • 顯示在主畫面、Spotlight 搜尋、Siri 建議和應用程式庫搜尋。
  • 不會顯示在應用程式庫的類別資料夾中。
  • 不支援徽章和應用程式捷徑等功能。

除此之外，Safari 也會使用名為「網頁剪輯」的原生技術，在作業系統中建立 PWA 圖示。而是儲存在檔案系統中的 XML 屬性清單格式的 XML 檔案。

Android 安裝

在 Android 上，PWA 安裝提示會因裝置和瀏覽器而異。使用者可能會看到：

  • 選單項目與安裝項目所用的措辭差異，例如「安裝」或「新增至主畫面」。
  • 詳細安裝對話方塊。

在下圖中，您會看到兩種安裝對話方塊的版本：一個簡單的迷你資訊列 (左側)，以及詳細的安裝對話方塊 (右側)。

Android 迷你資訊列和安裝對話方塊。

視裝置和瀏覽器而定，PWA 可能會以 WebAPK、捷徑或 QuickApp 的形式安裝。

WebAPKs

WebAPK 是由使用者裝置信任的供應商建立的 Android 套件 (APK)，通常存放在雲端的 WebAPK 簽署伺服器上。Google Chrome 會用這個方法在已安裝 Google 行動服務 (GMS) 的裝置和 Samsung 網際網路瀏覽器上運作，但只適用於 Samsung 製造的裝置，例如 Galaxy 手機或平板電腦。共同考量到大多數的 Android 使用者，

當使用者從 Google Chrome 安裝 PWA，並使用 WebAPK 時，挖掘伺服器就會「小小」(套件) 並簽署 PWA 的 APK。這個程序需要時間，但當 APK 準備就緒時，瀏覽器會在使用者的裝置上安裝應用程式，而且不會顯示通知。由於信任的供應商 (Play 服務或 Samsung) 已簽署 APK，因此手機在安裝 APK 時並不會停用安全性功能，如同從商店提供的任何應用程式一樣。您不需要側載應用程式。

透過 WebAPK 安裝的 PWA：

  • 應用程式啟動器和主畫面中顯示圖示。
  • 會顯示在「設定」和「應用程式」中。
  • 可以擁有多項功能，例如徽章、應用程式捷徑和在 OS 內擷取連結。
  • 可「更新」圖示和應用程式中繼資料。
  • 無法重複安裝。
，瞭解如何調查及移除這項存取權。

捷徑

WebAPK 可為 Android 使用者提供最佳體驗，但不一定每次都會顯示。在這種情況下，瀏覽器會改回建立網站捷徑。Firefox、Microsoft Edge、Opera、Brave 和 Samsung Internet (在非 Samsung 裝置上) 沒有信任的挖掘伺服器，因此它們會建立捷徑。如果採礦服務無法使用或 PWA 不符合安裝規定，Google Chrome 也會予以關閉。

已透過捷徑安裝 PWA：

  • 主畫面上有瀏覽器標記圖示 (請參閱以下範例)。
  • 啟動器或設定、應用程式中沒有圖示。
  • 無法使用需要安裝的任何功能。
  • 無法更新圖示和應用程式中繼資料。
  • 即使使用相同的瀏覽器也能多次安裝。發生這種情況時，所有元件都會指向同一個執行個體，並使用相同的儲存空間。

在同一部裝置上以不同瀏覽器安裝 PWA。

QuickApps

包括華為和 ZTE 等部分製造商所提供的平台「QuickApps」QuickApps平台可建立與 PWA 類似的簡單網頁應用程式，但採用的是不同的技術堆疊。這類裝置上的部分瀏覽器 (例如華為瀏覽器) 可以安裝以 QuickApp 封裝的 PWA，即使沒有使用 QuickApp 堆疊亦然。

如果您將 PWA 安裝為 QuickApp，使用者可享有的體驗與快速指令類似，但會有出現 QuickApps 圖示 (閃電圖片) 圖示的圖示。也可以透過 QuickApp Center 啟動這個應用程式。

Huawei 或 ZTE 主畫面上的 QuickApps。

提示進行安裝

在電腦和 Android 裝置上使用以 Chromium 為基礎的瀏覽器，也可能從 PWA 觸發瀏覽器的安裝對話方塊。「安裝提示」章節將說明相關模式及其實作方式。

應用程式目錄和商店

您的 PWA 也可以列在應用程式目錄和商店中，以便提高觸及率，並讓使用者在尋找其他應用程式時找到該應用程式。 大部分的應用程式目錄和商店支援技術，讓您發布的套件不含整個網頁應用程式 (例如 HTML 和素材資源)。這些技術可讓您建立單獨的網頁轉譯引擎啟動器，從而載入應用程式，並讓 Service Worker 快取必要資產。

支援發布 PWA 的應用程式目錄和商店如下：

如要進一步瞭解如何將 PWA 發布至應用程式目錄和商店，請參考 BubbleWrap CLI 和 PWA Builder。

資源