安裝

使用者安裝 PWA 後，系統會執行以下動作：

  • 啟動器、主畫面、開始選單或啟動器中有一個圖示。
  • 當使用者在裝置上搜尋該應用程式時，搜尋結果就會顯示。
  • 作業系統中設有獨立視窗。
  • 支援特定功能。

安裝條件

每個瀏覽器都有一個條件，代表網站或應用程式為漸進式網頁應用程式，且可安裝以提供獨立使用體驗。PWA 的中繼資料是由 JSON 型檔案所設定，這種檔案稱為「網頁應用程式資訊清單」，我們會在下一個單元中詳細說明。

根據強制安裝內容的基本規定，支援這項功能的瀏覽器多半會採用網頁應用程式資訊清單檔案和特定屬性，例如應用程式名稱和已安裝體驗的設定。但 macOS 版 Safari 則不支援安裝功能。

允許安裝的系統需求因瀏覽器而異，這篇文章詳細說明 Google Chrome 的使用條件，並提供其他瀏覽器的安裝需求連結。

由於 PWA 符合安裝規定的測試需要數秒才能完成，因此在收到網址回應後，可能無法立即取得可安裝性。

電腦安裝

目前只有在 Linux、Windows、macOS 和 Chromebook 上使用 Google Chrome 和 Microsoft Edge 安裝 PWA 電腦版應用程式。這些瀏覽器會在網址列中顯示安裝徽章 (圖示)，指出目前的網站可以安裝。

電腦版的 Chrome 和 Edge 瀏覽器，網址列中顯示安裝徽章

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

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

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

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

電腦作業系統僅支援獨立和最少使用者介面的顯示模式。

安裝在電腦上的 PWA：

  • 如果是 Windows 電腦的「開始」功能表或「開始」畫面，在 Linux GUI 的座架或桌面、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 時，主畫面上的圖示即為 PWA。

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

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

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

iOS 和 iPadOS 僅支援獨立顯示模式。因此，如果您使用最精簡的使用者介面模式，就會改回使用瀏覽器快速鍵；如果使用全螢幕模式，則畫面會改回獨立模式。

在 iOS 和 iPadOS 上安裝的 PWA：

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

順帶一提，Safari 會使用名為網頁剪輯的原生技術，在作業系統中建立 PWA 圖示。它們只是 Apple 的「物業清單」格式中的 XML 檔案，儲存在檔案系統中。

Android 安裝

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

  • 安裝中選單項目的字詞變化，例如「Install」或「Add to Home Screen」。
  • 詳細的安裝對話方塊。

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

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

視裝置和瀏覽器而定，PWA 可安裝為 WebAPK、捷徑或 QuickApp。

WebAPKs

WebAPK 是 Android 套件 (APK)，是由使用者裝置信任的供應商所建立，通常位於雲端的 WebAPK 取景伺服器上。這種方法適用於已安裝 Google 行動服務 (GMS) 的裝置和 Samsung 網際網路瀏覽器，但僅適用於 Samsung 製造的裝置，例如 Galaxy 手機或平板電腦。大部分 Android 使用者全部使用這個帳戶。

當使用者透過 Google Chrome 安裝 PWA，且使用 WebAPK 時，壓縮伺服器會「壓縮」(套件) 並為 PWA 簽署 APK。這項程序需要時間，但當 APK 準備就緒時，瀏覽器會在使用者的裝置上以無訊息方式安裝應用程式。由於信任的供應商 (Play 服務或 Samsung) 已簽署 APK，因此手機會在不停用安全性的情況下進行安裝，就像任何來自商店的應用程式一樣。不需要側載應用程式。

透過 WebAPK 安裝的 PWA：

  • 應用程式啟動器和主畫面中有一個圖示。
  • 顯示在「設定」和「應用程式」中。
  • 可能包含多項功能，例如徽章、應用程式捷徑，以及 OS 內擷取連結。
  • 可「更新」圖示和應用程式的中繼資料。
  • 無法安裝兩次。

捷徑

雖然 WebAPK 可為 Android 使用者提供最佳體驗，但無法保證隨時能建立。如果不能，瀏覽器就會回頭建立網站捷徑。Firefox、Microsoft Edge、Opera、Brave 和 Samsung Internet (非 Samsung 裝置) 沒有可靠的伺服器，因此將建立捷徑。如果採礦服務無法使用，或是 PWA 不符合安裝規定，Google Chrome 也會出現同樣情形。

透過捷徑安裝的 PWA：

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

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

QuickApps

部分製造商 (包括華為和 ZTE) 提供了名為 QuickApps 的平台，目的是建構類似 PWA，但採用不同技術堆疊的輕量網頁應用程式。這些裝置中的部分瀏覽器 (例如華為瀏覽器) 可以安裝以 QuickApp 形式封裝的 PWA，即使你並未使用 QuickApp 堆疊也一樣。

以 QuickApp 形式安裝 PWA 後，使用者將獲得與使用捷徑的類似體驗，只是會看到附有 QuickApps 圖示 (閃電圖片) 的圖示標記。您也可以在 QuickApp Center 中啟動這個應用程式。

在 Huawei 或 ZTE 主畫面上顯示的 QuickApp。

提示安裝

在電腦版和 Android 裝置上，以 Chromium 為基礎的瀏覽器可能會從 PWA 觸發瀏覽器的安裝對話方塊。「安裝提示」章節將說明這項操作的模式與實作方式。

應用程式目錄和商店

您的 PWA 也可以列在應用程式目錄和商店中，藉此提高觸及數，讓使用者在尋找其他應用程式的相同位置找到這些內容。 大多數的應用程式目錄和商店支援技術可讓您發布不含整個網頁應用程式 (例如 HTML 和素材資源) 的套件。這些技術可讓您只為獨立的網路轉譯引擎建立啟動器，該引擎會載入應用程式，並讓服務工作人員快取必要的資產。

以下為支援 PWA 發布功能的應用程式目錄和商店：

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

資源