iOSでWEBプッシュを配信する方法
2023年3月にリリースされたiOS16.4からiPhone safariにもWEBプッシュを配信できるようになりました。
ただし、iOSにWEBプッシュを配信するためには、ウェブサイトをPWAにする必要があります。PUSHCODEを導入することで、WEBプッシュの導入と併せてウェブサイトをPWAにすることが可能です。
このマニュアルでは、ウェブサイトのPWAにし、iOSにWEBプッシュを配信する方法について説明します。
PWAとは？
PWAについての説明とメリットはこちらの記事をご参照ください。
ウェブサイトをPWAにしてiOSに手順
実際にPUSHCODE管理画面で、サイトをPWA化してiOSにWEBプッシュを配信する手順について説明します。
※PUSHCODEでは、ウェブサイトがHTTPSであることを前提としているため、HTTPSの導入方法については省略します。
1. サイト編集
サイト設定画面で、登録済みのサイトの【編集】ボタンを押下します。
サイト編集画面で、【ウェブサイトをPWAに変換して iOS にプッシュ通知を配信しますか？】にチェックを入れることで、PWAに必要な以下の入力項目が表示されます。
項目 | 説明 |
ホームアイコン名 | スマートフォンのホーム画面に表示されるアプリの名称です。 名前は半角12 文字を超えないことが推奨されます。半角12文字を超えると一部省略されることがあります。 |
アイコンURL | スマートフォンのホーム画面に表示するアイコン画像のファイルパスです。 PUSHCODEに登録してるドメインで画像ファイルのURLを入力してください。
アイコン画像は512x512のpngのアイコンをご用意ください。 |
2.マニフェストファイルのダウンロード
サイト設定の一覧からマニフェストファイル（manifest.json）をダウンロードできます。
ダウンロードしたマニフェストファイルを、サイト設定したドメインのルートディレクトリに追加してください。
マニフェストファイルはダウンロードしたものをそのままご利用可能ですが、必要に応じて変更頂けます。
PUSHCODEが提供しているマニフェストファイルについての詳細はこちらの記事をご参照ください
3.通知許諾タグの更新
ユーザーがWEBプッシュを許諾する際に表示される許諾枠の設定を行います。サイト設定画面のサイト一覧にある通知許諾タグ表示のアイコンを押下してください。
表示されるJavaScriptコードの赤枠のテキストを、HTMLソースに設置済みのJavaScriptコードに追加してください。
4.アイコン画像の設置
新規サイト登録画面で指定したPWAアイコンパスに、アイコンの画像ファイルを追加してください。
5.ウェルカム通知の設定
まだウェルカム通知を設定していない場合、新規プッシュ作成から設定しましょう。
ウェルカム通知を設定することで、通知を許諾したユーザーに自動で許諾確認の通知を送ることができます。
ウェルカム通知の設定方法はこちらをご参照ください。
PWAにしたウェブサイトでプッシュ通知を受け取る
各設定が完了したら、実際にPWAにしたウェブサイトでプッシュ通知を受け取ってみましょう。以下の手順でプッシュ通知の受信を確認できます。
ホームアイコンに追加
PWA対応のウェブサイトにアクセスし、ホームアイコンに追加するには、ブラウザのメニュー（通常はアドレスバーの横にある3つのドットアイコン）をタップし、「ホーム画面に追加」または「Install」などのオプションを選択します。ホーム画面に追加されたアイコンをタップすることで、PWAが起動します。プッシュ通知の許諾
PWAを起動すると、プッシュ通知の許可を求めるダイアログが表示されます。許可を与えるには、「許可」または「Allow」ボタンをクリックします。数秒から数十秒後にウェルカム通知が届きます。
以上で、iOSデバイスにもWEBプッシュ通知を配信できるようになりました。今後もPUSHCODEをご活用いただき、ユーザーとの円滑なコミュニケーションを築いていただけることを心より願っております。引き続き、お客様のビジネス発展の一助となるよう、サポートに努めてまいります。どうぞ宜しくお願い申し上げます。