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

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

網頁應用程式資訊清單是 JSON 檔案,用於向瀏覽器說明 Progressive 網頁應用程式,以及安裝在使用者電腦或行動裝置上的應用程式後的行為。 透過 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" (最後,使用 display 備用鏈結)。
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}
敬上

為了保持回溯相容性,未來任何顯示模式都將只接受 display_override,但不是 display。 不支援 display_override 的瀏覽器會改回使用 display 屬性並忽略 display_override 為不明的網頁應用程式資訊清單屬性。

特別銘謝

display_override 屬性正式化為 Daniel Murphy