PWA 可以使用「display_override」屬性處理特殊顯示模式。
網頁應用程式資訊清單是 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 正式化。