強化項目

有許多強化功能可改善 PWA 的轉換成效和使用狀況。

應用程式捷徑

應用程式捷徑是指向 PWA 的靜態深層連結清單，這些深層連結會寫入資訊清單中。網頁應用程式資訊清單規格：可讓您定義 PWA 中不同部分或功能的捷徑清單，加快導覽至常用區段的速度。

應用程式快捷方式適用於大多數的電腦作業系統和 Android 裝置 (搭配 WebAPK)，並會顯示在主畫面、Dock 或工作列的應用程式圖示上，如同下圖所示：

Android 和 macOS 中的應用程式捷徑。

如要存取這個選單，使用者必須在 PWA 圖示上按一下滑鼠右鍵或長按。

捷徑是在資訊清單的 shortcuts 成員中定義。這個方法會採用具有下列屬性的成員陣列：

name
向使用者顯示的文字，通常是在內容選單中。
url
使用者透過這個捷徑啟動 PWA 時，PWA 應載入的網址。這個網址必須是 PWA 範圍內的網址，且應以深層連結的方式導向 name 或 short_name 描述的功能。
short_name
(選用) 當 name 欄位的值太長，無法顯示時，可使用較短的名稱。
description
(選用) 說明這個捷徑的功能
icons
(選用) 圖示物件陣列，其中包含 src、type、sizes 和選用的 purpose 欄位，說明捷徑應使用哪些圖片

您應將應用程式捷徑視為盡力而為的功能。也就是說，您無法依賴這些捷徑一律會顯示，而且即使這些捷徑會顯示，您也無法得知會顯示多少捷徑，或平台是否會忽略圖示，因為這取決於瀏覽器的判斷。雖然各平台的說明並不涵蓋完整內容，但以下你會對這個平台在 Android 和電腦上的運作方式有些概念。要因應這種不確定性，最佳方式是按照優先順序將項目排序。

以下程式碼範例定義了不同的應用程式快捷方式，可在 Android 裝置上透過 Chrome 安裝應用程式，或在電腦上透過 Edge 或 Chrome 安裝應用程式時使用。

iOS 和 iPadOS

發布 PWA 時，您可以採用一些強化功能，改善使用者在 iOS/iPadOS 版 Safari 上的體驗。

啟動畫面

如「網頁應用程式資訊清單」章節所述，Android 會根據資訊清單的值自動建立啟動畫面。但 iOS 和 iPadOS 並非如此。在這些裝置上，您應使用 <link> 元素，將 HTML 中的啟動畫面定義為靜態圖片。

這些映像檔在 Apple 裝置上稱為啟動映像檔，使用 rel 屬性和 apple-touch-startup-image 值，如下所示：

<link rel="apple-touch-startup-image" href="ios-startup.png">

挑戰在於，啟動圖片必須與 PWA 開啟時的視窗大小完全相同。因此，不同的 iOS 和 iPadOS 裝置需要不同的映像檔。需要在 iPad 上涵蓋更多情況，例如橫向/直向開啟方式，以及在多工作模式下算繪 PWA (例如 1/3、1/2 或 2/3 的螢幕)。

如要查看 iOS 和 iPadOS 的最新螢幕尺寸清單，請參閱 Apple 人機介面指南

您可以使用 media 屬性中的媒體查詢，設定不同版本的啟動圖片：

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

iOS 啟動畫面的設計模式

定義啟動畫面圖片是一項繁重的工作，因此我們提供了幾個自動產生及設定工具：

  • 靜態產生功能會與建構系統整合，建立所有 PNG 靜態圖片，並提供含有 <link> 元素的 HTML 程式碼，以便插入文件中。PWA 素材資源產生器就屬於這類工具。
  • 用戶端產生器：JavaScript 工具，可根據目前裝置的類型和螢幕大小，將一或多個啟動圖片的 Base64 版本嵌入 <link> 插入的元素中。您可以使用記憶體內畫布，轉譯圖片並轉換為包含 PNG 檔案的 data: URI。PWA Compat 程式庫是一款簡單易用的用戶端程式庫，可複製 Android 的典型啟動畫面。

在 Apple 行動平台上偵測 PWA

雖然您應該在 PWA 中使用漸進式改善和功能偵測，但在某些極端情況下，我們可能需要知道使用者是否在 Apple 行動平台上使用 PWA，例如您想提供安裝說明或新增連結至僅限 iOS 的平台特定應用程式。

如要避免讀取使用者代理程式字串，請檢查 navigator 物件的 standalone 屬性。這是非標準屬性，僅適用於 iOS 和 iPadOS 的 WebKit 引擎。

  • 如果 navigator.standalone 是 undefined，表示使用者並未使用 iPadOS 或 iOS 裝置。
  • 如果 navigator.standalone 為 false，表示使用者在瀏覽器中開啟 PWA，並在其中使用 PWA。
  • 如果 navigator.standalone 是 true，表示使用者從主畫面開啟 PWA，並獲得獨立 PWA 體驗。

支援全螢幕

在 iOS 和 iPad 的 Safari 中，PWA 的顯示模式只支援 display: standalone。

在下圖中，您可以看到左側的預設獨立設計，以及右側的 PWA，後者採用全螢幕 iOS 模式，可讓您在狀態列後方顯示內容。

獨立的預設行為 (左) 和全螢幕 iOS 畫面 (右)。

如果您在 iOS 和 iPadOS 上的 PWA 中新增下列標記，就會進入全螢幕模式，但這個模式與 Android 不同。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在這個模式中，裝置的狀態列 (頂端顯示時鐘、電池電量和通知圖示) 仍會顯示，但會以透明背景顯示在內容上方。

使用此模式時，請務必謹慎設計，因為作業系統一律會以白色顯示圖示，因此您應一律使用淺色內容，讓畫面頂端的背景與內容形成對比。此外，請務必使用 CSS 環境變數在安全區域中顯示內容，如應用程式設計章節所述。

根據預設，可視區域的頂端 0 像素位於狀態列下方；如果您新增黑色半透明的中繼標記，可視區域的頂端 0 像素會與畫面頂端實際顯示的位置相符。

安裝可靠性

在 15.4 以下版本的 iOS 和 iPadOS 上，只有在使用者透過瀏覽器內的分享圖示開啟分享表單時，系統才會從網路載入資訊清單檔案，而不會在網頁載入時載入。因此，瀏覽器會在這個時候才檢查網站是否為 PWA，這可能導致無法載入資訊清單或耗費過多時間，而瀏覽器會忽略這項資訊。

如果瀏覽器無法及時載入資訊清單，按下「新增至主畫面」會在主畫面中放置圖示，但不會提供應用程式體驗，只是進入瀏覽器分頁的捷徑。

資源