at backyard

Color my life with the chaos of trouble.

PWAアプリにmaskableアイコンを追加する方法

Lighthouseで計測したところ下記のような要修正項目が現れた。

f:id:shinshin86:20211229210212p:plain

該当する下記のページを読んでみると、maskableアイコンとはどうやらすべてのAndroidバイスで美しく表示されるアイコンフォーマットらしい。
ちなみにマスキング可能なアイコンフォーマットに従わないPWAアイコンは白い背景が与えられるとのこと。

Manifest doesn't have a maskable icon

PWAアプリにmaskable icon を追加する方法

まずは下記のMaskable.app EditorにアクセスしてMaskableアイコンを作成する。

Maskable.app Editor

上のリンクをクリックするとこんな画面が現れる。

f:id:shinshin86:20211229210301p:plain
Maskable​.app Editor

Editorの使い方はなんとなくいじっていればわかりそうな感じだったので割愛する。

Export ボタンを押すとサイズを指定してダウンロードできる。

ひとまず上のドキュメントにならって 192pxのサイズを指定した。

webmanifestファイルの icons に下記の記述を追加する。

icons: [
  ・
  ・
  {
    "src": "/<画像格納先のパス>/maskable_icon_x192.png",
    "sizes": "196x196",
    "type": "image/png",
    "purpose": "any maskable"
  }
]

これで再びLighthouseを行うと、今度はOKになっていることが確認できた。

f:id:shinshin86:20211229210429p:plain

以上、備忘録でした。