為明天的顯示模式做好準備

PWA 可以使用「display_override」屬性處理特殊顯示模式。

Thomas Steiner

網頁應用程式資訊清單是 JSON 檔案，可向瀏覽器提供漸進式網頁應用程式的相關資訊，以及在使用者電腦或行動裝置上安裝時應如何運作。透過 display 屬性，您可以自訂應用程式啟動時顯示的瀏覽器 UI。舉例來說，您可以隱藏網址列和瀏覽器 Chrome。遊戲甚至可以設為全螢幕啟動。以下簡要複習本文撰寫時指定的顯示模式。

屬性 使用
fullscreen 開啟網頁應用程式，不顯示任何瀏覽器 UI，並佔用整個可用顯示區域。
standalone 開啟網頁應用程式，外觀和風格與獨立應用程式相似。應用程式會在自己的視窗中執行，與瀏覽器分開，並隱藏標準瀏覽器 UI 元素，例如網址列。
minimal-ui 這個模式與 standalone 類似，但只提供最少量的 UI 元素，供使用者控制導覽 (例如返回和重新載入)。
browser 標準瀏覽器體驗。

這些顯示模式會遵循定義明確的備用鏈 ("fullscreen" → "standalone" → "minimal-ui" → "browser")。如果瀏覽器不支援特定模式，就會改用鏈中的下一個顯示模式。

display 屬性的缺點

這種硬編碼備用廣告鏈方法有三個問題：

  • 如果特定瀏覽器不支援 "minimal-ui"，開發人員就無法要求 "minimal-ui"，而必須強制返回 "browser" 顯示模式。
  • 開發人員無法處理跨瀏覽器差異，例如瀏覽器是否在 "standalone" 模式的視窗中加入返回按鈕。
  • 目前的行為無法以回溯相容的方式導入新的顯示模式，因為分頁應用程式模式等探索項目在備用廣告鏈中沒有自然的位置。

display_override 屬性

瀏覽器會先考量 display_override 屬性，再考量 display 屬性，因此可解決這些問題。這個值是一連串依序考量的字串，系統會套用第一個支援的顯示模式。如果沒有任何支援的格式，瀏覽器會改為評估 display 欄位。

在下方範例中，顯示模式備援鏈結如下：(本文不討論 "window-controls-overlay" 的詳細資料)。

  1. "window-controls-overlay" (請先查看 display_override。)
  2. "minimal-ui"
  3. "standalone" (display_override 用盡時，評估 display)。
  4. "minimal-ui" (Finally, use the display fallback chain.)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

為維持回溯相容性，日後的任何顯示模式都只能接受 display_override 的值，而不能接受 display 的值。不支援 display_override 的瀏覽器會改用 display 屬性，並將 display_override 視為不明的網頁應用程式資訊清單屬性而忽略。

致謝

display_override 屬性是由 Daniel Murphy 制定。