「遮罩圖示」是全新的圖示格式,可確保 PWA 圖示在所有 Android 裝置上都能完美呈現。在較新的 Android 裝置上,未遵循可遮蓋圖示格式的 PWA 圖示將以白色為背景。使用可遮蓋的圖示時,系統會確保圖示佔滿 Android 為其提供的所有空間。
Lighthouse 可遮蓋圖示稽核失敗情況
Lighthouse 標記不支援可遮蓋圖示的網頁:
如何通過稽核:
- 網頁應用程式資訊清單必須存在。
- 網頁應用程式資訊清單必須包含
icons
陣列。 icons
陣列必須包含一個具備purpose
屬性的物件,且該purpose
屬性的值必須包含maskable
。
如何在 PWA 中新增可遮蓋的圖示支援功能
- 使用 Maskable.app Editor 將現有圖示轉換為可遮蓋的圖示。
將
purpose
屬性加入網頁應用程式資訊清單中的其中一個icons
物件。將purpose
的值設為maskable
。請參閱值一文。{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
使用 Chrome 開發人員工具驗證可遮蓋的圖示是否正確顯示。 請參閱「目前的圖示是否準備就緒?」一節。