資訊清單不會'；沒有可遮蓋的圖示

可遮蓋圖示是一種新的圖示格式，可確保 PWA 圖示的外觀 在所有 Android 裝置上都極佳在較新的 Android 裝置上，未追蹤的 PWA 圖示 可遮蓋的圖示格式會以白色背景標示。使用遮罩時 圖示，可確保圖示填滿 Android 提供的所有空間。

Lighthouse 可遮蓋圖示稽核結果如何失敗

Lighthouse 標記不支援可遮蓋圖示的網頁：

Lighthouse 報告 UI 中可遮蓋的圖示稽核項目。

為了通過稽核：

  • 網頁應用程式資訊清單必須存在。
  • 網頁應用程式資訊清單必須包含 icons 陣列。
  • icons 陣列必須包含一個含 purpose 屬性的物件。 且 purpose 屬性的值必須包含 maskable。
，瞭解如何調查及移除這項存取權。

如何在 PWA 中新增可遮蓋的圖示

  1. 使用 Maskable.app Editor，將現有圖示轉換成可遮蓋的圖示。

  2. 將 purpose 屬性新增至網頁應用程式資訊清單中的其中一個 icons 物件。 將 purpose 的值設為 maskable。請參閱「值」一節。

    {
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
  …
}

  3. 使用 Chrome 開發人員工具，確認可遮蓋的圖示是否正確顯示。 請參閱「我目前的圖示已準備好了嗎？」

資源