強化項目

許多強化功能都能提升 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 裝置上和電腦中的運作方式。因應這種情況的最佳方式，就是按照優先順序將商品排序。

下列程式碼範例定義了不同應用程式捷徑，您可以嘗試在使用 Chrome 的 Android 裝置，或是使用 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。
  • 如果 navigator.standalone 為 true，表示使用者是從主畫面開啟 PWA，並取得獨立的 PWA 體驗。

全螢幕支援

iOS 和 iPad 上的 Safari 僅支援 display: standalone 做為PWA 圖示的顯示模式。雖然 Android 裝置不支援 display: fullscreen，但您可以使用非標準中繼標記，讓 PWA 進入全螢幕模式。

在下一張圖片中，您會看到左側是設有主題顏色的預設獨立設計，右側則是 PWA，在右側顯示全螢幕 iOS 模式，讓您可在狀態列後方轉譯內容。

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

如果在 iOS 和 iPadOS 的 PWA 中加入下列標記，將進入全螢幕模式，與 Android 版本不同。

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

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

使用這個模式時，請謹慎設計，因為作業系統一律會以白色顯示圖示，因此您必須讓螢幕頂端與淺色內容之間的背景對比。此外，請務必使用 CSS 環境變數，將內容算繪到安全區域，如 App Design Chapter 所述。

根據預設，可視區域的上 0 像素低於狀態列；如果您新增黑色半透明中繼標記，可視區域的頂端 0px 會與螢幕的實際頂端相符

安裝穩定性

iOS 和 iPadOS 15.4 之前的 Safari 只會在使用者開啟分享表單時從網路載入資訊清單檔案，頁面載入後不會從網路載入資訊清單檔案。因此，Safari 會等到那段時間才檢查您的網站是否為 PWA，進而導致資訊清單無法載入或耗時過久，而 Safari 會予以忽略。

當 Safari 無法準時載入資訊清單時，按下 [新增至主畫面] 就會在主畫面加入圖示，但是不會提供應用程式體驗，只會是 Safari 分頁的捷徑。

資源