ブログ

【2022年版】Webプッシュ通知の全ての最新対応ブラウザとOSを解説します!

2022-05-24
最も効果的なWebプッシュ通知を設定するために、2022年のすべての最新OSとブラウザで、文字制限やメディアサイズなど、Webプッシュ通知の全要素を解説していきます。

目次

  1. Webプッシュ通知の利用可能なシステムと一般的な要素
  2. macOS Monterey版のGoogle Chrome
  3. macOS Monterey版のFirefox
  4. macOS Monterey版のSafari
  5. Windows 11版のGoogle Chrome
  6. Windows 11版のMicrosoft Edge
  7. Windows 11版のFirefox
  8. Android 12版のGoogle Chrome 
  9. Android 12版のFirefox
  10. チートシート

1. Webプッシュ通知の利用可能なシステムと一般的な要素

Webプッシュ通知とは、スマートフォンで受け取るアプリのプッシュ通知と同様に、Webサイトからユーザーに送信される通知メッセージです。内容は、新着メッセージの通知、新しいニュースの通知、オンラインショップのカート忘れに関するリマインダーなど、さまざまです。

2014年の登場以来、Webプッシュ通知は広く利用され、様々なシステムでサポートされています。ここでは、サポートされているシステムとブラウザの包括的なリストを以下に示します。


以下の条件では、Webプッシュ通知はサポートされません。

🚫 Safari、Chrome、Firefox を含むすべての iOS ブラウザは、Webプッシュ通知に対応していません。
🚫 シークレットモードまたはプライベートブラウザモードでは機能しません。

ただし、SafariでのWebプッシュ通知の需要は長年高いため、iOSでのWebプッシュ通知のサポートは2023年と発表されました。iOSにおけるWebプッシュ通知のサポートは、iOS 15.4の最初のベータ版で登場しました。

また、2022年6月のWWDC(世界開発者会議)とAppleのウエブサイトによると、次のiOSアップデートである2023年公開予定のiOS 16では、ついにiOSでもWebプッシュ通知が対応されるのではないかと、期待されています。

一般的にWebプッシュ通知は、以下の要素で構成されています。

  • タイトル
  • ボディメッセージ
  • 画像
  • ロゴアイコン

また、OSやブラウザによってアクションボタンなどの要素がある場合もあります。管理しているサイトをWebプッシュ通知に最適化するためにも、これらの違いを理解しておくことが重要です。

ここまでは、Webプッシュ通知についての全般的な解説でした。次に、ブラウザやOSごと違いを詳しく紹介していきます。

2. macOS Monterey版のGoogle Chrome

① ブラウザーアイコン: Google Chromeのアイコン
② タイトル:60-80文字に制限
③ ドメイン:ウェブサイトのドメイン
④ アイコン:192x192px以上。PNG、JPG、GIF(アニメーションは不可)。
⑤ ボディメッセージ:アイコンの有無、文字により 120~150 文字に制限
⑥ アクションボタン:最大 2 つのボタンに対応

3. macOS Monterey版のFirefox

macOS Monterey版の Chromeと同様です。

① ブラウザーアイコン:Firefoxアイコン
② タイトル:60-80文字に制限
③ ドメイン:ウェブサイトのドメイン
④ アイコン:192x192px 以上。PNG、JPG、GIF(アニメーションは不可)
⑤ ボディメッセージ:アイコンの有無、文字により 120~150 文字に制限
⑥ アクションボタン:最大 2 つのボタンに対応。

4. macOS Monterey版のSafari

① アイコン
一度設定すると、個々のメッセージごとに変更することはできません。256x256px必要があるPNG、JPG、GIF(アニメーションは不可)ファイル
② タイトル:60~80 文字に制限
③ ぼでぃぼでぃ:120〜150 文字に制限。

5. Windows11版のGoogle Chrome

① バナー画像
360x180 または 2:1 のアスペクト比
PNG、JPG、GIF(アニメーションは不可)
② ブラウザ + ブラウザアイコン:変更不可
③ アイコン:192x192 以上、PNG、 JPG、 GIF (アニメーション不可)。
④ アクションボタン:最大 2 つのボタンに対応
⑤その他のオプション:通知設定、フォーカスアシストを含む
⑥ Dismissボタン:通知を終了
⑦ タイトル:60 文字以内
⑧ ボディメッセージ:120 文字以内
⑨ ドメイン:ウェブサイトのドメイン

6. Windows 11版のMicrosoft Edge

Windows 11版Chromeと同様です。

① バナー画像
360x180 または 2:1 のアスペクト比
PNG、JPG、GIF(アニメーションは不可)
② ブラウザ + ブラウザアイコン:変更不可
③ アイコン:192x192 以上、PNG, JPG, GIF (アニメーション不可)
④ アクションボタン:最大 2 つのボタンに対応
⑤その他のオプション:通知設定、フォーカスアシストを含む
⑥ Dismiss:通知を終了
⑦ タイトル:60 文字以内
⑧ ボディメッセージ:120 文字以内
⑨ ドメイン:ウェブサイトのドメイン

7. Windows 11のFirefox

Windows 11のFirefoxは、Microsoft EdgeやChromeと異なり、画像バナーやアクションボタンがありません。

① ブラウザ + ブラウザアイコン: 変更不可
② アイコン:192x192 以上、PNG、JPG、GIF(アニメーションは不可)。
③ その他のオプション:通知設定、フォーカスアシストを含む。
④ Dismissボタン:通知を終了
⑤ タイトル:60 文字以内
⑥ ボディメッセージ:120 文字以内
⑥ ドメイン:ウェブサイトのドメイン

8. Android 12版のGoogle Chrome

① バッジ:72x72 以上、白色で背景が透明のPNGファイル
② タイトル:50 文字以内
③ ボディメッセージ:150文字以内
④ 大きな画像:
1024x512 またはアスペクト比 2:1 の画像
PNG、JPG、GIF(アニメーション不可)
⑤ ブラウザ:変更不可
⑥ ドメイン:変更不可のユーザーがサブスクライブしているウェブサイト
⑦ アイコン:192x192 以上、PNG、JPG、GIF(アニメーションは不可)
⑧ アクションボタン:最大2ボタンまで対応

9. Android 12版のFirefox

① バッジ:72x72 以上、白色で背景が透明のPNGファイル
② タイトル:35 文字はおすすめ
③ ボディメッセージ:150文字はおすすめ
④ アイコン:アスペクト比 1:1、200kBまで対応
⑤ ブラウザ:変更不可
⑥ ドメイン:変更不可のユーザーがサブスクライブしているウェブサイト.

10. チートシート

全部の情報はこのチートシートにまとめられました!ぜひ保存して参考にしてください!


PUSHCODE

とは

PUSHCODEは、アプリがなくてもWebサイトさえあればユーザーへ通知が送れるWebプッシュサービスです。

ユーザーからの許諾を得ることで、非会員へもアプローチができるので、これまでアプローチできなかった層へリーチが広がります。 また、タイムリーにユーザーの行動をサポートすることで、サイトのコンバージョンを高め、カスタマーサクセスにつなげることができます。

PUSHCODEの料金プランは、月間5,000配信までは無料、それ以降はテーブル制による料金プランとなっていて、大規模配信でもコストが膨らみません。 また、無料プランでもすべての機能が使え、導入サポートも付いています。APIも公開されているので自社システムと統合でき、運用負荷が大幅に軽減できます。 ぜひユーザーとのコミュニケーションツールとしてPUSHCODEをお試しください。