本頁面由 Cloud Translation API 翻譯而成。

透過可遮蓋圖示的 PWA 支援自動調整圖示

Thomas Steiner

Tiger Oakes

如果您已在新版 Android 手機上安裝漸進式網頁應用程式 (PWA)，應用程式的圖示可能會以白色背景顯示。Android 8.0 推出自動調整圖示，可在各種裝置上以各種形狀顯示應用程式圖示我們來看評估分類模型成效時的喚回度和精確度指標如果是非採用這種格式，則圖示的背景為白色。

在 Android 裝置上，透明的 PWA 圖示會顯示在白色圓圈中。

可遮蓋圖示是 Chrome 和 Firefox 的全新圖示格式漸進式網頁應用程式採用自動調整圖示，並讓您進一步掌控圖示外觀

可遮蓋的圖示會遮住整個圓形。

我目前的圖示已準備好了嗎？

可遮蓋的圖示需要支援各種形狀，因此您必須提供不透明圖片，帶有一些邊框間距，可讓瀏覽器裁剪成所需的大小適合所有瀏覽器和平台的形狀和大小

各種平台專屬圖示形狀。

可遮蓋的圖示規格包含標準化「最小安全區域」所有平台都尊重使用者的參與應用程式的圖示 (例如標誌) 必須位於圖示，半徑等於圖示寬度的 40%。最外層的 10% 邊緣可能會被裁剪

您可以使用 Chrome 查看圖示的哪些部分位於安全區域內開發人員工具。開啟 Progressive Web App，啟動開發人員工具並前往「Application」面板。在「圖示」部分中，您可以選擇 僅顯示可遮蓋圖示的最小安全區域。這會縮減圖示只能看到安全區域如果標誌是否能在這個安全區域內顯示圖示已準備就緒

「應用程式」面板，顯示經過裁剪的 PWA 圖示。

如要測試各種 Android 形狀的可遮蓋圖示，請使用 Tiger Oakes Maskable.app。開啟圖示，Maskable.app 則可讓您試試各種形狀和尺寸，然後與團隊成員分享預覽畫面。

如何套用可遮蓋的圖示？

如要根據現有圖示建立可遮蓋的圖示，您可以使用 Maskable.app Editor。上傳圖示，調整圖示顏色和尺寸，然後匯出圖片

在 Maskable.app 編輯器中建立圖示。

建立可遮蓋的圖示並在開發人員工具中測試後，您必須更新應用程式網頁應用程式資訊清單，指向新資產。網頁應用程式資訊清單會以 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。