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

「遮罩圖示」是全新的圖示格式，可確保 PWA 圖示在所有 Android 裝置上都能完美呈現。在較新的 Android 裝置上，未遵循可遮蓋圖示格式的 PWA 圖示將以白色為背景。使用可遮蓋的圖示時，系統會確保圖示佔滿 Android 為其提供的所有空間。

Lighthouse 可遮蓋圖示稽核失敗情況

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

Lighthouse Report 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 開發人員工具驗證可遮蓋的圖示是否正確顯示。 請參閱「目前的圖示是否準備就緒？」一節。

資源