.png)
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ごと違いを詳しく紹介していきます。
① ブラウザーアイコン： Google Chromeのアイコン
② タイトル：60-80文字に制限
③ ドメイン：ウェブサイトのドメイン
④ アイコン：192x192px以上。PNG、JPG、GIF（アニメーションは不可）。
⑤ ボディメッセージ：アイコンの有無、文字により 120～150 文字に制限
⑥ アクションボタン：最大 2 つのボタンに対応
macOS Monterey版の Chromeと同様です。
① ブラウザーアイコン：Firefoxアイコン
② タイトル：60-80文字に制限
③ ドメイン：ウェブサイトのドメイン
④ アイコン：192x192px 以上。PNG、JPG、GIF（アニメーションは不可）
⑤ ボディメッセージ：アイコンの有無、文字により 120～150 文字に制限
⑥ アクションボタン：最大 2 つのボタンに対応。
① アイコン
一度設定すると、個々のメッセージごとに変更することはできません。256x256px必要があるPNG、JPG、GIF（アニメーションは不可）ファイル
② タイトル：60～80 文字に制限
③ ぼでぃぼでぃ：120〜150 文字に制限。
① バナー画像
360x180 または 2:1 のアスペクト比
PNG、JPG、GIF（アニメーションは不可）
② ブラウザ + ブラウザアイコン：変更不可
③ アイコン：192x192 以上、PNG、 JPG、 GIF (アニメーション不可)。
④ アクションボタン：最大 2 つのボタンに対応
⑤その他のオプション：通知設定、フォーカスアシストを含む
⑥ Dismissボタン：通知を終了
⑦ タイトル：60 文字以内
⑧ ボディメッセージ：120 文字以内
⑨ ドメイン：ウェブサイトのドメイン
Windows 11版Chromeと同様です。
① バナー画像
360x180 または 2:1 のアスペクト比
PNG、JPG、GIF（アニメーションは不可）
② ブラウザ + ブラウザアイコン：変更不可
③ アイコン：192x192 以上、PNG, JPG, GIF (アニメーション不可)
④ アクションボタン：最大 2 つのボタンに対応
⑤その他のオプション：通知設定、フォーカスアシストを含む
⑥ Dismiss：通知を終了
⑦ タイトル：60 文字以内
⑧ ボディメッセージ：120 文字以内
⑨ ドメイン：ウェブサイトのドメイン
Windows 11のFirefoxは、Microsoft EdgeやChromeと異なり、画像バナーやアクションボタンがありません。
① ブラウザ + ブラウザアイコン: 変更不可
② アイコン：192x192 以上、PNG、JPG、GIF（アニメーションは不可）。
③ その他のオプション：通知設定、フォーカスアシストを含む。
④ Dismissボタン：通知を終了
⑤ タイトル：60 文字以内
⑥ ボディメッセージ：120 文字以内
⑥ ドメイン：ウェブサイトのドメイン
① バッジ：72x72 以上、白色で背景が透明のPNGファイル
② タイトル：50 文字以内
③ ボディメッセージ：150文字以内
④ 大きな画像：
1024x512 またはアスペクト比 2:1 の画像
PNG、JPG、GIF(アニメーション不可)
⑤ ブラウザ：変更不可
⑥ ドメイン：変更不可のユーザーがサブスクライブしているウェブサイト
⑦ アイコン：192x192 以上、PNG、JPG、GIF（アニメーションは不可）
⑧ アクションボタン：最大2ボタンまで対応
① バッジ：72x72 以上、白色で背景が透明のPNGファイル
② タイトル：35 文字はおすすめ
③ ボディメッセージ：150文字はおすすめ
④ アイコン：アスペクト比 1:1、200kBまで対応
⑤ ブラウザ：変更不可
⑥ ドメイン：変更不可のユーザーがサブスクライブしているウェブサイト.
全部の情報はこのチートシートにまとめられました！ぜひ保存して参考にしてください！
