如果您已在新版 Android 手機上安裝漸進式網頁應用程式 (PWA), 應用程式的圖示可能會以白色背景顯示。Android 8.0 推出 自動調整圖示,可在各種裝置上以各種形狀顯示應用程式圖示 我們來看評估分類模型成效時 的喚回度和精確度指標如果是非採用這種格式,則圖示的背景為白色。
![在 Android 裝置上,白色圓圈中的 PWA 圖示](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-white-circles-7fce0dc6ce82f.png?authuser=19&hl=zh-tw)
可遮蓋圖示是 Chrome 和 Firefox 的全新圖示格式 漸進式網頁應用程式採用自動調整圖示,並讓您進一步掌控 圖示外觀
![在 Android 裝置上覆蓋整個圓圈的 PWA 圖示](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-covering-entir-011491639007f.png?authuser=19&hl=zh-tw)
我目前的圖示已準備好了嗎?
可遮蓋的圖示需要支援各種形狀,因此您必須提供 不透明圖片,帶有一些邊框間距,可讓瀏覽器裁剪成所需的大小 適合所有瀏覽器和平台的形狀和大小
可遮蓋的圖示規格包含標準化 「最小安全區域」所有平台都尊重使用者的參與應用程式的 圖示 (例如標誌) 必須位於 圖示,半徑等於圖示寬度的 40%。最外層的 10% 邊緣 可能會被裁剪
您可以使用 Chrome 查看圖示的哪些部分位於安全區域內 開發人員工具。開啟 Progressive Web App,啟動開發人員工具並前往 「Application」面板。在「圖示」部分中,您可以選擇 僅顯示可遮蓋圖示的最小安全區域。這會縮減圖示 只能看到安全區域如果標誌是否能在這個安全區域內顯示 圖示已準備就緒
![開發人員工具中的應用程式面板,顯示經過裁剪的 PWA 圖示](https://web.developers.google.cn/static/articles/maskable-icon/image/applications-panel-devto-a75aad0ea167e.png?authuser=19&hl=zh-tw)
如要測試各種 Android 形狀的可遮蓋圖示,請使用 Tiger Oakes Maskable.app。開啟圖示,Maskable.app 則可讓您 試試各種形狀和尺寸,然後與團隊成員分享預覽畫面。
如何套用可遮蓋的圖示?
如要根據現有圖示建立可遮蓋的圖示,您可以使用 Maskable.app Editor。上傳圖示,調整圖示 顏色和尺寸,然後匯出圖片
![Maskable.app 編輯器螢幕截圖](https://web.developers.google.cn/static/articles/maskable-icon/image/maskableapp-editor-scree-fdc82299dbabb.png?authuser=19&hl=zh-tw)
建立可遮蓋的圖示並在開發人員工具中測試後,您必須更新應用程式
網頁應用程式資訊清單,指向新資產。
網頁應用程式資訊清單會以 JSON 檔案提供網頁應用程式的相關資訊,且
包含 icons
陣列。
purpose
欄位會告訴瀏覽器應如何使用圖示。根據預設
圖示的用途是 "any"
。在 Android 中,這些圖示會調整大小為白色
背景。
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
如要將圖示設為可遮蓋,請將其 purpose
值設為 "maskable"
,以表示
建議將其與圖示遮罩搭配使用。這個做法會移除白色背景和
可讓您進一步掌控圖示的外觀。您也可以指定多個
(例如 "any maskable"
)
可遮蓋的圖示,不搭配口罩在其他裝置上使用。
特別銘謝
這個網頁已通過 Joe Medley。