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

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" (最後，使用 display 備用廣告鏈。)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

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

致謝

display_override 屬性是由 Daniel Murphy 制定。