PWA 可使用「display_override」屬性處理特殊顯示模式。
Thomas Steiner
網頁應用程式資訊清單是一種 JSON 檔案，可向瀏覽器說明您的漸進式網頁應用程式，以及在使用者電腦或行動裝置上安裝時應如何運作。您可以透過 display 屬性，自訂應用程式啟動時要顯示的瀏覽器 UI。例如，您可以隱藏網址列和瀏覽器邊框。甚至可以讓遊戲以全螢幕模式啟動。以下快速複習一下，以下是本文撰寫時指定的顯示模式。
| 屬性 | 使用 |
|---|---|
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" 的詳細資料不在本文討論範圍內)。
"window-controls-overlay"(首先查看display_override)。"minimal-ui""standalone"(當display_override用盡時，請評估display)。"minimal-ui"(最後，請使用display備用鏈結)。"browser"
{
"display_override": ["window-controls-overlay", "minimal-ui"],
"display": "standalone",
}
為了維持向後相容性，任何未來的顯示模式都只能做為 display_override 的值，而非 display。不支援 display_override 的瀏覽器會改用 display 屬性，並將 display_override 視為不明的網頁應用程式資訊清單屬性。
實用連結
特別銘謝
display_override 屬性由 Daniel Murphy 正式化。