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

公開日

翻訳先言語: English, Español, Português, 한국어, 中文, Pусский

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

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

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

Lighthouse レポートの UI に表示されているマスカブルアイコンの監査。

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

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

Lighthouse は、マスカブルアイコンとして指定された画像を検査しません。画像が適切に表示されることは、自分で確認する必要があります。

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

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? (私の現在のアイコンは使用できるか?) を参照してください。

リソース

最終更新日: 記事を改善する

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.