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

可遮罩的圖示是一種新的圖示格式,可確保您的 PWA 圖示在所有 Android 裝置上都看起來很棒。在較新的 Android 裝置上,如果 PWA 圖示不符合可遮罩圖示格式,就會顯示白色背景。使用可遮蓋的圖示時,系統會確保圖示占用 Android 提供的所有空間。

Lighthouse 可遮蓋圖示稽核失敗的原因

Lighthouse 會標記不支援可遮蓋圖示的頁面:

Lighthouse 報表 UI 中的可遮罩圖示稽核。

如要通過稽核,請按照下列步驟操作:

  • 必須有網頁應用程式資訊清單。
  • 網頁應用程式資訊清單必須包含 icons 陣列。
  • icons 陣列必須包含一個含有 purpose 屬性的物件,且該 purpose 屬性的值必須包含 maskable

如何為 PWA 新增可遮罩圖示支援

  1. 使用 Maskable.app 編輯器將現有圖示轉換為可遮罩圖示。
  2. purpose 屬性新增至網頁應用程式資訊清單中的其中一個 icons 物件。將 purpose 的值設為 maskable。請參閱「」。

    {
      …
      "icons": [
        …
        {
          "src": "path/to/maskable_icon.png",
          "sizes": "196x196",
          "type": "image/png",
          "purpose": "maskable"
        }
      ]
      …
    }
    
  3. 使用 Chrome 開發人員工具,確認可遮罩圖示是否正確顯示。請參閱「我是否已備妥現有的圖示?」一節。

資源