マニフェストにマスク可能なアイコンが含まれていません

マスク可能なアイコンは、PWA アイコンの外観を確実にする新しいアイコン形式です。 すべての Android デバイスに最適。新しい Android デバイスでは、PWA アイコンがアイコンに沿って表示されない マスキング可能なアイコン形式の背景は白にします。マスキング可能な アイコンを追加することにより、Android が用意したアイコンのスペースをアイコンが占めるようになります。

Lighthouse のマスク可能なアイコンの監査で不合格になる仕組み

灯台 マスク可能なアイコンをサポートしていないページにフラグが設定されます。

Lighthouse レポート UI のマスク可能なアイコンの監査。

監査に合格するには、以下の要件を満たす必要があります。

  • ウェブアプリ マニフェストが存在している必要があります。
  • ウェブアプリ マニフェストには icons 配列が必要です。
  • icons 配列には、purpose プロパティを持つオブジェクトを 1 つ含める必要があります。 その purpose プロパティの値に maskable を含める必要があります。
で確認できます。

PWA にマスク可能なアイコンのサポートを追加する方法

  1. Maskable.app Editor を使用して、既存のアイコンをマスク可能なアイコンに変換します。

  2. ウェブアプリ マニフェストの icons オブジェクトのいずれかに purpose プロパティを追加します。 purpose の値を maskable に設定します。値をご覧ください。

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

  3. Chrome DevTools を使用して、マスク可能なアイコンが正しく表示されることを確認します。 現在のアイコンを使用する準備はできていますか？をご覧ください。

リソース