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

マスク可能なアイコンは、すべての Android デバイスで PWA アイコンが美しく表示されるようにする新しいアイコン形式です。新しい Android デバイスでは、マスク可能なアイコン形式に準拠していない PWA アイコンの背景は白くなります。マスク可能なアイコンを使用すると、Android がアイコンに割り当てるスペースをすべてアイコンが占有します。

Lighthouse のマスク可能なアイコンの監査が失敗する仕組み

Lighthouse は、マスク可能なアイコンがサポートされていないページを報告します。

Lighthouse レポートの UI で、マスク可能なアイコンの監査を確認する。

監査に合格するには:

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

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

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

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

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

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

リソース