マニフェストにマスカブルアイコンがない

マスカブルアイコンは、すべての Android デバイスにおいて PWA アイコンが適切に表示されることを保証する新しいアイコン形式です。新しい Androidデバイスでは、マスカブルアイコンの形式に従わない PWA アイコンは、背景色が白になります。マスカブルアイコンを使用すると、Android がそのアイコン用に提供するスペース全体にそのアイコンが表示されます。

# Lighthouse によるマスカブルアイコンの監査が失敗する原因

Lighthouse は、マスカブルアイコンをサポートしていないページをフラグします。

監査に合格するには、以下が必要です。

• ウェブアプリのマニフェストがある。
• ウェブアプリのマニフェストに icons 配列がある。
• icons 配列に purpose プロパティを持つオブジェクトが 1 つ含まれている。また、その purpose プロパティに maskable が含まれている。

# PWA にマスカブルアイコンのサポートを追加する方法

1. Maskable.app Editor を使用して、既存のアイコンをマスカブルアイコンに変換します。

2. ウェブアプリのマニフェストの icons オブジェクトの1つに purpose プロパティを追加します。purpose の値を maskable{/code4 } もしくは <code data-md-type="codespan">any maskable に設定します。Values (値) を参照してください。

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

3. Chrome DevTools を使用して、マスカブルアイコンが正しく表示されていることを確認します。Are my current icons ready? (私の現在のアイコンは使用できるか？) を参照してください。

# リソース

• Manifest doesn't have a maskable icon (マニフェストにマスカブルアイコンがない) 監査のソースコード
• Adaptive icon support in PWAs with maskable icons (マスカブルアイコンを使用した PWA におけるアダプティブアイコンサポート)
• Maskable.app エディター
• Add a web app manifest (ウェブアプリのマニフェストを追加する)
• MDNの icons プロパティ