【PWA】Webプッシュ通知のbadge画像が表示されない時の原因

Webプッシュ通知のバッジ(badge)画像がなぜか表示されず苦戦したので備忘です。

バッジ画像の条件

バッジ画像は以下の条件である必要があります。これを満たさないと、バッジ画像が表示されません。(黒い資格になったりChromeアイコンになったりします)

  • 72 x 72サイズ(か、それ以上)
  • 画像の種類はpng, gif, webp, ico, cur, bmp
    →svgは対応していない
  • HTTPS URLであること
  • アルファチャンネルであること

特にアルファチャンネルであることを見落としており、ずっとはまっていました。バッジ画像は白地や黒地に表示されるので透明である必要があるようです。

ついでにアイコンやイメージ画像の条件も書いておきます。

アイコン画像の条件

  • 256 x 256サイズ(か、それ以上)
  • 画像のファイルはjpgpnggifwebpicocurbmp
    →svgは対応していない

イメージの条件

  • 2:1のアスペクト比推奨(横長)
  • 幅は300-2000px
  • 画像のファイルはjpgpnggifwebpicocurbmp
    →svgは対応していない
カテゴリーPWA

コメントを残す

メールアドレスが公開されることはありません。