有許多強化功能可改善 PWA 的轉換成效和使用狀況。
應用程式捷徑
應用程式捷徑是指向 PWA 的靜態深層連結清單,這些深層連結會寫入資訊清單中。網頁應用程式資訊清單規格。可讓您定義 PWA 中不同部分或功能的捷徑清單,以加速前往經常存取的部分。
應用程式捷徑適用於大部分電腦作業系統及搭載 WebAPK 的 Android 裝置,而且會顯示在主畫面、座架或工作列的應用程式圖示上,且會顯示在應用程式圖示上,如下圖所示:
如要存取這個選單,使用者必須以滑鼠右鍵或長按 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 和 iPadOS 上的 PWA 中新增下列標記,就會進入全螢幕模式,但這個模式與 Android 不同。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
在此模式下,裝置狀態列 (顯示時鐘、電池電量和通知圖示的頂端) 仍會顯示,但會以透明背景顯示在內容頂端。
使用這個模式時,請謹慎設計流程,因為作業系統一律會以白色顯示圖示,因此務必將螢幕頂端的背景與淺色內容形成對比。此外,請務必使用 CSS 環境變數,在安全區域中顯示內容,如「應用程式設計章節」中所述。
安裝穩定性
iOS 和 iPadOS 15.4 以下版本的 Safari 只有在使用者開啟共用工作表時 (使用瀏覽器中分享圖示,而非載入網頁時),才會從網路載入資訊清單檔案。因此,Safari 在此之前不會檢查您的網站是否處於 PWA 狀態,以致於無法載入資訊清單或等候時間過長時,Safari 會予以忽略。
如果 Safari 無法及時載入資訊清單,請按下「新增至主畫面」在主畫面中放置圖示,但不提供應用程式體驗。只是開啟 Safari 分頁的捷徑。