マニフェストにマスク可能なアイコンが含まれていません
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
マスク可能なアイコンは、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 を使用して、マスク可能アイコンが正しく表示されることを確認します。
現在のアイコンは準備できているかをご覧ください。
リソース
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2024-04-16 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]