強化項目

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

應用程式捷徑

應用程式捷徑是指向 PWA 的靜態深層連結清單，這些深層連結會寫入資訊清單中。網頁應用程式資訊清單規格。可讓您定義 PWA 中不同部分或功能的捷徑清單，以加速前往經常存取的部分。

應用程式捷徑適用於大部分電腦作業系統及搭載 WebAPK 的 Android 裝置，而且會顯示在主畫面、座架或工作列的應用程式圖示上，且會顯示在應用程式圖示上，如下圖所示：

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 需要涵蓋更多情況，例如橫向/直向開啟，以及以多工模式 (例如螢幕 1/3、1/2 或 2/3) 轉譯 PWA。

如要查看 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。雖然 Android 裝置不支援 display: fullscreen，但您可以使用非標準中繼標記，讓 PWA 進入全螢幕模式。

在下一張圖片中，左側是採用主題顏色的預設獨立設計，在 PWA 右側顯示全螢幕 iOS 模式，則能在狀態列後方顯示內容。

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

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

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

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

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

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

安裝穩定性

iOS 和 iPadOS 15.4 以下版本的 Safari 只有在使用者開啟共用工作表時 (使用瀏覽器中分享圖示，而非載入網頁時)，才會從網路載入資訊清單檔案。因此，Safari 在此之前不會檢查您的網站是否處於 PWA 狀態，以致於無法載入資訊清單或等候時間過長時，Safari 會予以忽略。

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

資源