[NEW]2023年4月より、Webプッシュ通知がiOSにも対応できるようになりました。

‍

iOS16.4公開に合わせて、iOS SarariにもWebプッシュ通知の解禁が発表されました。

Appleはこれまで、iOSユーザーに対してWebプッシュ通知の送信を許可していませんでしたが、PWAに対応していれば、iOS SafariユーザーにもWebプッシュ通知を送ることができるようになりました。

これまでWebプッシュ通知を送ることができなかったユーザーにも通知が送れるようになり、顧客育成の手段としての注目が集まっています。

‍

‍

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

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

こちらは、Webプッシュ通知が可能なシステムとブラウザのリストです。

（注意）シークレットモードまたはプライベートブラウザモードでは機能しません。

また、Webプッシュ通知の主な構成要素は下記の通りです。

‍

‍

❶ロゴアイコンまたは画像

❷タイトル

❸ボディメッセージ

‍

OSやブラウザによっては、アクションボタンなどの要素がある場合もあります。

その見え方をあらかじめ把握しておくことで、システムやブラウザごとのWebプッシュ通知の最適化を図ることができます。是非参考にしてみてください。

‍

‍‍

2. macOS Ventura版のGoogle Chrome

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

‍

3. macOS Ventura版のFirefox

macOS Monterey版の Chromeと同様です。

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

‍‍

4. macOS Ventura版の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. iOS 16.5版のSafari

①　タイトル:　20文字以内
②　アイコン：40x40 以上、PNG、JPG、GIF（アニメーションは不可）。
③　ボディメッセージ：100-120文字以内

‍

‍

‍

‍

‍

9. Android 12版のGoogle Chrome

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

‍

10. Android 12版のFirefox

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

‍

11.Webプッシュ通知の対応OS・ブラウザ一覧

こちらに一覧としてまとめました！これからWebプッシュ通知を活用していきたい担当者のみなさま、ぜひ参考にされてください。