PWA 可以使用「display_override」屬性處理特殊顯示模式。
Thomas Steiner
網頁應用程式資訊清單是 JSON 檔案，可告知瀏覽器您的漸進式網頁應用程式，以及安裝在使用者電腦或行動裝置上的行為。您可以透過 display 屬性，自訂應用程式啟動時所顯示的瀏覽器使用者介面。舉例來說，您可以隱藏網址列和瀏覽器 Chrome。您甚至可以設定讓遊戲以全螢幕顯示。以下快速複習一下，我們在撰寫這篇文章時指定的顯示模式。
| 屬性 | 用途 |
|---|---|
fullscreen |
在不使用任何瀏覽器 UI 的情況下開啟網頁應用程式，並佔滿可用的所有顯示區域。 |
standalone |
開啟網頁應用程式，使應用程式看起來與獨立應用程式一樣。應用程式會在獨立視窗中執行，與瀏覽器分開，並隱藏標準瀏覽器 UI 元素 (例如網址列)。 |
minimal-ui |
這個模式與 standalone 類似，但至少會為使用者提供一組控制導覽 (例如返回和重新載入) 的 UI 元素。 |
browser |
標準的瀏覽器體驗。 |
這些顯示模式遵循明確定義的備用鏈 ("fullscreen" → "standalone" → "minimal-ui" → "browser")。如果瀏覽器不支援特定模式，就會切換回鏈結中的下一個顯示模式。
display 屬性簡稱
這種硬線備用鏈方法的問題有三大：
- 開發人員不得在指定瀏覽器不支援
"minimal-ui"的情況下，強制返回"browser"顯示模式來要求"minimal-ui"。 - 開發人員無法處理跨瀏覽器的差異，例如瀏覽器在
"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 正式化。