マスク可能なアイコンは、PWA アイコンをすべての Android デバイスで適切に表示する新しいアイコン形式です。新しい Android デバイスでは、マスク可能なアイコン形式に従っていない PWA アイコンの背景は白になります。マスク可能なアイコンを使用すると、Android が提供するすべてのスペースをアイコンが占有します。
Lighthouse のマスク可能アイコンの監査が失敗する仕組み
Lighthouse では、マスク可能なアイコンをサポートしていないページにフラグが立てられます。
監査に合格するには:
- ウェブアプリ マニフェストが存在している必要があります。
- ウェブアプリ マニフェストには
icons
配列が必要です。 icons
配列には、purpose
プロパティを持つ 1 つのオブジェクトが含まれ、そのpurpose
プロパティの値にはmaskable
が含まれている必要があります。
PWA にマスク可能なアイコンのサポートを追加する方法
- 既存のアイコンをマスク可能なアイコンに変換するには、Maskable.app エディタを使用します。
ウェブアプリ マニフェスト内の
icons
オブジェクトのいずれかにpurpose
プロパティを追加します。purpose
の値をmaskable
に設定します。値をご覧ください。{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
Chrome DevTools を使用して、マスク可能アイコンが正しく表示されることを確認します。 現在のアイコンは準備できているかをご覧ください。