許多強化功能都能改善 PWA 的轉換和使用率。
應用程式捷徑
應用程式捷徑是 PWA 深層連結的靜態清單,這些連結會寫入資訊清單。網頁應用程式資訊清單規格:可讓您定義 PWA 中不同部分或功能的捷徑清單,加快導覽至常用區段的速度。
應用程式快捷方式適用於大多數的電腦作業系統和 Android 裝置 (搭配 WebAPK),並會顯示在主畫面、Dock 或工作列的應用程式圖示上,如同下圖所示:
如要存取這個選單,使用者必須在 PWA 圖示上按一下滑鼠右鍵,或長按該圖示。
捷徑是在資訊清單的 shortcuts
成員中定義。這個函式會採用具有下列屬性的成員陣列:
name
- 向使用者顯示的文字,通常會出現在內容選單中。
url
- 使用者透過這個捷徑啟動 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 上的體驗。
啟動畫面
如Web 應用程式資訊清單章節所述,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 中,只有 display: standalone
支援做為 PWA 的顯示模式。
在下圖中,您可以看到左側的預設獨立設計,以及右側的 PWA,後者採用全螢幕 iOS 模式,可讓您在狀態列後方顯示內容。
如果在 HTML 中加入下列標記,iOS 和 iPadOS 上的 PWA 就會進入全螢幕模式,但與 Android 不同。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
在這個模式中,裝置的狀態列 (頂端顯示時鐘、電池電量和通知圖示) 仍會顯示,但會以透明背景顯示在內容上方。
使用此模式時,請小心設計,因為作業系統一律會以白色顯示圖示,因此您應一律使用淺色內容,讓畫面頂端的背景與內容形成對比。此外,請務必使用 CSS 環境變數在安全區域中算繪內容,如應用程式設計章節所述。
安裝可靠性
在 15.4 以下版本的 iOS 和 iPadOS 上,只有在使用者透過瀏覽器內的分享圖示開啟分享表單時,系統才會從網路載入資訊清單檔案,而不會在網頁載入時載入。因此,瀏覽器會在這個時候才檢查網站是否為 PWA,這可能導致無法載入資訊清單或耗費太多時間,而瀏覽器會忽略這項資訊。
如果瀏覽器無法及時載入資訊清單,按下「Add to Home Screen」後,雖然會在主畫面上放置圖示,但不會提供應用程式體驗,只會顯示瀏覽器分頁的捷徑。