はじめに

このマニュアルではPUSHCODEの導入方法について説明します。

2023年3月にリリースされたiOS16.4からiPhone safariにもWEBプッシュを配信できるようになりました。ただし、iOSにWEBプッシュを配信するためには、ウェブサイトをPWAにする必要があります。

iOSにWEBプッシュを配信するために必要なPWAの導入も併せて説明します。

PWAとは？

PWAについての説明とメリットはこちらの記事をご参照ください。

ステップ1：新規ドメインの登録

アカウントにログインし、サイト設定ページに移動します。新規サイト作成ボタンをクリックすると、新規サイト作成フォームが表示され、新しいドメインを登録することができます。

項目	説明
サイト名	WEBプッシュを配信するウェブサイトの名前
サイトURL	WEBプッシュを配信するウェブサイトのURL ※PUSHCODEでは、ウェブサイトがHTTPSであることを前提としています。https://から入力してください。
Googleアナリティクス utmパラメータ連携	これらの値を設定すると、送信するWEBプッシュ通知のリンクに自動的にutmパラメータが付与されます。 [push_id]という値は、送信されるWebプッシュ通知のIDと自動的に交換されます。これを使用すると、Google Analyticsでの結果をより詳細に分析することができます。他のデータ分析ツールを使用している場合は、Webプッシュ通知を作成する際にURLパラメータを設定することができます。詳細は、「Webプッシュ通知の配信」ページをご確認ください。
iOS配信	iOSにWEBプッシュを配信する場合、チェックを入れてください。ウェブサイトをPWAに変換し、iOSへの配信が可能となります。
アプリ名	スマートフォンのホーム画面に表示されるアプリの名称です。名前は半角12 文字を超えないことが推奨されます。半角12文字を超えると一部省略されることがあります。
アイコンURL	スマートフォンのホーム画面に表示するアイコン画像のファイルパスです。 PUSHCODEに登録してるドメインで画像ファイルのURLを入力してください。例：https://www.pushcode.jp/static/img/pwa_icon.png アイコン画像は512x512のpngのアイコンをご用意ください。

ステップ2：サービスワーカー（pushcode_sw.js）のダウンロード

ウェブサイトの登録が完了すると、サイト設定の一覧からサービスワーカー（pushcode_sw.js）をダウンロードできます。

ダウンロードしたサービスワーカーを、サイト設定したドメインのルートディレクトリに追加してください。

ルートディレクトリに追加ができない場合は、こちらのマニュアルをご参照ください。

ステップ3：マニフェストファイルのダウンロード

サイト設定の一覧からマニフェストファイル（manifest.json）をダウンロードできます。

ダウンロードしたマニフェストファイルを、サイト設定したドメインのルートディレクトリに追加してください。

マニフェストファイルはダウンロードしたものをそのままご利用可能ですが、必要に応じて変更頂けます。

PUSHCODEが提供しているマニフェストファイルについての詳細はこちらの記事をご参照ください。

ステップ4：アイコン画像の設置

新規サイト登録画面で指定したPWAアイコンパスに、アイコンの画像ファイルを追加してください。

ステップ5：確認待ちボタンの押下

1から4の対応が完了したら、サイト設定画面のサイト一覧にある【確認待ち】ボタンを押下してください。各ファイルの設置を確認できたらステータスがチェックマークに変わります。

ステップ6：通知許諾タグの設置

ユーザーがWEBプッシュを許諾する際に表示される許諾枠の設定を行います。サイト設定画面のサイト一覧にある通知許諾タグ表示のアイコンを押下してください。

表示されるJacaScriptコードをコピーして、HTMLソースの</head>タグの直前に追加してください。

以上でPWA化の対応、WEBプッシュの導入は完了です。最後にウェルカム通知を設定し、通知の確認をしましょう。

ステップ7：ウェルカム通知の設定

ウェルカム通知を設定することで、通知を許諾したユーザーに自動で許諾確認の通知を送ることができます。

ウェルカム通知の設定方法はこちらをご参照ください。

ステップ8：PWAにしたウェブサイトでプッシュ通知を受け取る

各設定が完了したら、実際にPWAにしたウェブサイトでプッシュ通知を受け取ってみましょう。以下の手順でプッシュ通知の受信を確認できます。

ホームアイコンに追加
PWA対応のウェブサイトにアクセスし、ホームアイコンに追加するには、ブラウザのメニュー（通常はアドレスバーの横にある3つのドットアイコン）をタップし、「ホーム画面に追加」または「Install」などのオプションを選択します。ホーム画面に追加されたアイコンをタップすることで、PWAが起動します。
プッシュ通知の許諾
PWAを起動すると、プッシュ通知の許可を求めるダイアログが表示されます。許可を与えるには、「許可」または「Allow」ボタンをクリックします。数秒から数十秒後にウェルカム通知が届きます。

以上で、iOSデバイスにもWEBプッシュ通知を配信できるようになりました。今後もPUSHCODEをご活用いただき、ユーザーとの円滑なコミュニケーションを築いていただけることを心より願っております。引き続き、お客様のビジネス発展の一助となるよう、サポートに努めてまいります。どうぞ宜しくお願い申し上げます。