通知：この項目にはレガシー ドキュメントがありません。そのため、現在のドキュメントが表示されています。
AppleはiOSおよびiPadOS 16.4をリリースしました。これにより、iPhoneおよびiPadデバイスのホーム画面に追加されたWebアプリでWebプッシュ通知がサポートされるようになりました。このガイドでは、ウェブサイトをiPhoneおよびiPadユーザーに通知を送信できるように設定する方法を説明します。
iOSデバイスで無制限のリーチをアンロック。勢いを逃さないでください。
今日から設定を開始し、忘れる前にサイト訪問者を引き戻しましょう。無料で始め、よりスマートに送信し、サイトに合ったプランで成長しましょう。
Webプッシュ通知は、iOSおよびiPadOS 16.4以降のiPhoneおよびiPadのSafariブラウザ、Google Chrome、Edgeで利用できます。iOSでは、ユーザーがウェブサイトをホーム画面に追加し、そのアイコンをタップしてWebアプリを開く必要があります。Webアプリは、ブラウザで開くのではなく、iOSまたはiPadOS上の他のネイティブアプリのように開きます。ユーザーはプッシュ通知の受信を許可し、その後、iPhoneおよびiPad上の他のアプリと同様に、通知設定でその許可を管理できます。
開始する前に
iOSデバイスでWebプッシュキャンペーンを実行するには、いくつかのものが必要です。
- Webアプリは、displayメンバーがstandaloneまたはfullscreenに設定されたWebアプリケーションマニフェストファイル（manifest.json）を提供する必要があります。
- ユーザーはiOSまたはiPadOS 16.4以降を使用している必要があります。
- ユーザーは、共有ボタンをタップして共有メニューを開き、「ホーム画面に追加」をタップしてWebアプリをホーム画面にインストールする必要があります。
- プッシュ通知の受信を許可するには、ボタンのクリックやタップなどのユーザー操作が必要です。
お使いのウェブサイトがすでにプログレッシブウェブアプリ（PWA）である場合、iOS/iPadOS Webプッシュの準備に追加の更新を行う必要はありません。ウェブサイトがPWAかどうか不明な場合は、開発チームに確認するか、Chrome DevToolsのLighthouseを使用してください。
iOSおよびiPadOS Webプッシュ通知のためにウェブサイトを設定する
iPhoneおよびiPadのSafariにプッシュ通知を有効にして送信するには、次の手順に従ってください。
- 1. ウェブサイトにWebアプリマニフェストファイルを追加します。
- 2. ウェブサイトにPushEngageを統合します。
- 3. ウェブサイトのマニフェストをデプロイしてテストします。
- 4. サブスクリプションダイアログボックスモーダルとパーミッションプロンプトをテストします。
1. ウェブサイトにWebアプリマニフェストファイルを追加する
Webアプリマニフェストは、ブラウザにプログレッシブウェブアプリ（PWA）について、またそれがユーザーのデスクトップまたはモバイルデバイスにインストールされたときにどのように表示され、動作すべきかを伝えるJSONファイルです。アプリが起動したときに開かれるURL、ウェブアプリの名前、説明、アイコン、配色などのメタデータが含まれています。
オンラインツールを使用して、マニフェストファイルをすばやく生成できます。マニフェストファイルは任意の名前を付けることができますが、一般的にはmanifest.jsonという名前が付けられ、ウェブサイトのルートディレクトリにアップロードする必要があります。WordPressサイトにコードを追加するのに役立つ場合は、WPCodeプラグインを試してください。
典型的なマニフェストは、次のようなものになります。
{
"name": "PushEngage",
"short_name": "PushEngage",
"start_url": "/",
"display": "standalone",
"theme_color": "#3b43ff",
"background_color": "#ffffff",
"icons": [
{
"src": "icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
注意: マニフェストのdisplayメンバーの値は、standaloneまたはfullscreenのいずれかに設定する必要があります。
マニフェストファイルを作成した後、ページの<head>セクションの<link>タグを使用して、ウェブサイトのHTMLページでマニフェストを参照してください。
例：
<link rel="manifest" href="/manifest.json">
2. ウェブサイトへのPushEngageの統合
次のステップは、Service Workerの登録とページのインストールを処理するために、ウェブサイトにPushEngageを統合することです。
インストールが完了していない場合は、こちらのガイドを参照してください。WordPressユーザーの場合は、PushEngage WordPressプラグインを使用できます。これにより、Service Workerの登録が処理されます。
Service Workerが既にあり、PushEngageのService Workerとマージする必要がある場合は、こちらに記載されている手順に従ってください。
3. ウェブサイトのマニフェストのデプロイとテスト
マニフェストをアップロードし、PushEngageを統合したら、次のステップはウェブアプリをテストして、ウェブアプリのマニフェストが正しく実装されていることを確認することです。ホーム画面に追加することで、さまざまなデバイスやブラウザでウェブサイトをテストできます。
次の手順に従ってください：
- 1. iOS 16.4以降を実行しているSafariブラウザでウェブサイトを開きます。
- 2. 「共有」ボタンをクリックして、共有メニューを開きます。
- 3. 「ホーム画面に追加」オプションをクリックします。
- 4. アプリをホーム画面に保存します。
ウェブサイトがウェブプッシュ用に正常に構成されている場合、iOSまたはiPadOSでは、単なるショートカットとして機能するのではなく、他のアプリと同様にウェブアプリが開きます。
バナーをアプリ画面に表示して、ユーザーにホーム画面にアプリを追加してウェブプッシュ通知を購読するように促すことで、ユーザーに通知する必要があります。
4. 購読ダイアログボックスのテスト
iOSおよびiPadOSのホーム画面ウェブアプリでは、権限を付与するための購読ダイアログボックスを表示するために、ページ上のボタンをタップするなど、直接的なユーザー操作が必要です。権限プロンプトが機能していることをテストするには、次の手順に従ってください。
- 1. デバイスのホーム画面からアプリアイコンをタップして、ウェブアプリを開きます。
- 2. ページにPushEngage購読ダイアログボックスが表示されるまで待ちます。
- 3. PushEngageポップアップモーダルで「許可」ボタンをクリックして、権限プロンプトを表示します。
- 4. 権限プロンプトで「許可」ボタンをクリックします。
注意：購読ダイアログボックスは、ウェブサイトがHTTPSであり、アプリがホーム画面から起動された場合にのみ表示されます。PushEngageダッシュボードから購読ダイアログボックスのデザインと動作をカスタマイズできます。
iOSおよびiPadOSユーザーにウェブプッシュキャンペーンを送信する
iOSおよびiPadOSのウェブプッシュ通知に必要な上記の手順を完了したら、PushEngageダッシュボードを使用してプッシュ通知の送信を開始できます。
iOSでのWebプッシュ通知は、他のネイティブアプリと同様に機能します。Webプッシュ通知は、画面上のヘッドアップ通知、通知センター、およびロック画面に表示されます。ユーザーはiOSの設定から通知設定を管理することもできます。通知をクリックすると、Webアプリ内の目的のランディングページに移動します。
iOS Webプッシュ通知の構造
iOS Safariプッシュ通知は、現在、リッチメディア、アニメーションGIF、またはビデオをサポートしていません。これらの機能が追加され次第、有効にします。iOSユーザー向けの通知を作成するには、以下のガイドラインに従ってください。
iOSおよびiPadOSのWebプッシュ通知には、次の要素が含まれます。
- 1.アイコン – マニフェストファイルで指定されたアイコン。個々のメッセージで変更することはできません。
- 2.タイトル – タイトルは30〜40文字に制限されており、それを超えると切り捨てられます。
- 3.アプリ名 – アプリ名はマニフェストファイルで指定されており、個々のメッセージで変更することはできません。
- 4.メッセージ – テキストは120〜150文字に制限されており、それを超えると切り捨てられます。
- 5.タイムスタンプ – 通知がデバイスに配信されてからの経過時間を示します。
これで、サブスクライバーの収集を開始し、iPhoneおよびiPadユーザーにキャンペーンを送信するために必要なすべてが揃いました。
問題が発生した場合は、こちらをクリックしてお問い合わせください。サポートチームがお手伝いします。
