マニフェストにマスク可能なアイコンが含まれていません
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
マスク可能なアイコンは、すべての Android デバイスで PWA アイコンが美しく表示されるようにする新しいアイコン形式です。新しい 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。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2024-04-16 UTC。"],[],[]]