如果您是在近期的 Android 手機上安裝漸進式網頁應用程式 (PWA),可能會發現應用程式的圖示具有白色背景。Android 8.0 推出了自動調整圖示,可在各種裝置型號上以各種形狀顯示應用程式圖示。未採用此格式的圖示則會有白色背景。
可遮蓋的圖示是 Chrome 和 Firefox 的一種新圖示格式,可讓漸進式網頁應用程式使用自動調整圖示,並讓您進一步控制圖示的外觀。
我目前的圖示是否正確?
由於可遮蓋的圖示需要支援各種形狀,因此您必須提供含有邊框間距的不透明圖片,讓瀏覽器可以針對任何瀏覽器或平台,將其裁剪為所需的形狀和大小。
可遮蓋的圖示規格提供所有平台都會遵循的標準化「最低安全區域」。圖示的重要部分 (例如標誌) 必須位於圖示中央的圓形區域內,且半徑必須等於圖示寬度的 40%。部分平台上的外側 10% 邊緣可能會遭到裁剪。
您可以使用 Chrome 開發人員工具,查看圖示的哪些部分位於安全區域內。開啟漸進式網頁應用程式,啟動開發人員工具並前往「Application」面板。在「圖示」部分中,您可以選擇「僅顯示可遮蓋圖示的最小安全區域」。這會移除圖示,只顯示安全區域。如果您的標誌可以在安全區域內顯示 表示圖示已就緒
如要在各種 Android 形狀上測試可遮蓋的圖示,請使用 Tiger Oakes 的 Maskable.app。開啟圖示,然後 Maskable.app 可讓您嘗試各種形狀和大小,並與團隊成員分享預覽畫面。
如何採用可遮蓋的圖示?
若要根據現有圖示建立可遮蓋的圖示,您可以使用 Maskable.app Editor。上傳圖示並調整顏色和大小,然後匯出圖片。
建立可遮蓋的圖示,並在開發人員工具中進行測試後,您需要更新網頁應用程式資訊清單,使其指向新資產。網頁應用程式資訊清單會以 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 審查的。