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"
的詳細資料不在本文的涵蓋範圍內)。
"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。