マスク可能なアイコンは、PWA アイコンの外観を確実にする新しいアイコン形式です。 すべての Android デバイスに最適。新しい Android デバイスでは、PWA アイコンがアイコンに沿って表示されない マスキング可能なアイコン形式の背景は白にします。マスキング可能な アイコンを追加することにより、Android が用意したアイコンのスペースをアイコンが占めるようになります。
Lighthouse のマスク可能なアイコンの監査で不合格になる仕組み
灯台 マスク可能なアイコンをサポートしていないページにフラグが設定されます。

監査に合格するには、以下の要件を満たす必要があります。
- ウェブアプリ マニフェストが存在している必要があります。
- ウェブアプリ マニフェストには
icons
配列が必要です。 icons
配列には、purpose
プロパティを持つオブジェクトを 1 つ含める必要があります。 そのpurpose
プロパティの値にmaskable
を含める必要があります。
PWA にマスク可能なアイコンのサポートを追加する方法
- Maskable.app Editor を使用して、既存のアイコンをマスク可能なアイコンに変換します。
ウェブアプリ マニフェストの
icons
オブジェクトのいずれかにpurpose
プロパティを追加します。purpose
の値をmaskable
に設定します。値をご覧ください。{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
Chrome DevTools を使用して、マスク可能なアイコンが正しく表示されることを確認します。 現在のアイコンを使用する準備はできていますか?をご覧ください。