iOSでWEBプッシュを使用する手順について説明します。
- iOS16.4より、iPhone safariへのプッシュ通知が送信可能となりました。
- これにより、国内でシェア率の高いiPhoneユーザーへの訴求が出来るようになりました。
事前準備
すでにWEBプッシュをご契約のお客様は、新たに専用ファイルの設置とサイトへのタグ設置が必要です。
設置方法
- josnファイルのダウンロードと設置
WEBプッシュの設定ページにiOS専用のjsonファイルをご用意しておりますので、ダウンロードしてサーバーに保存してください。
※「serviceworker.js」 と同じ場所に格納することを推奨しております。
<link>タグの設置
サイト全体に以下のlinkタグをhead内に追記してください。<link rel="manifest" href="/manifest.json">
※
href="/manifest.json"部分は、ルート直下に設置した場合で記載しております
※実際はjsonファイルを設定した箇所までのパスをご記載ください。
iPhone端末でプッシュ通知を受け取る手順
iOSでプッシュ通知を受け取る場合、サイトをiPhoneのホーム画面へ追加する必要があります。
- カスタマイズポップアップを用意
「WEBプッシュ ＞ 設定」より、「ポップアップ方式」でiOSを選択します。
カスタマイズポップアップ、またはカスタマイズボタンのどちらかを選択して設定します。
※この例ではカスタマイズポップアップを選択します。
- 通知を受けたいサイトをホーム画面にアイコンとして追加
- ブラウザ下部にある共有ボタンをタップ
- 「ホーム画面に追加」を選択
- ブラウザ下部にある共有ボタンをタップ
- 「追加」をタップ
任意で名前を変更することも可能です。
- ホーム画面にアイコンが表示されたら準備完了
- 追加されたホーム画面からサイトへアクセス
オプトインするかどうかのポップアップが表示されます。
以上でオプトインは完了です。
配信設定はWEBプッシュの配信設定のマニュアルをご確認ください。
実際の表示イメージ
iPhoneに通知が届いた際のイメージです。
iOSでWEBプッシュを使用する場合、ホームに追加した際のアイコンが画像として表示されます。
