Skip to content

プッシュ通知の統合

プッシュ通知は、重要な更新が発生したときにユーザーの画面に表示されるアラートです。プッシュ通知は、ウェブページがユーザーのブラウザで現在開いていない場合でも受信できます。プッシュ通知は、時間的制約があって関連性の高いコンテンツをユーザーに提供したり、ユーザーをアプリに再エンゲージしたりするための効果的な方法です。この参考記事では、Braze ウェブプッシュを Braze SDK と統合する方法について説明します。

その他のリソースについては、プッシュのベストプラクティスを参照してください

Web プッシュ通知は、ほとんどの主要ブラウザがサポートする W3C プッシュ標準を使用して実装されます

プッシュプロトコル標準とブラウザーサポートの詳細については、[Apple][5] [Mozilla][6]、Microsoft のリソースをご覧ください。

統合

ステップ 1:サイトのサービスワーカーを設定する

  • サービスワーカーをまだ作成していない場合は、service-worker.js次のスニペットを含む名前の新しいファイルを作成し、それをWebサイトのルートディレクトリに配置します。
  • それ以外の場合は、サイトですでにサービスワーカーを登録している場合は、次のスニペットをサービスワーカーファイルに追加し、Web SDK manageServiceWorkerExternallytrueを初期化するときに初期化オプションをに設定します。

サービスワーカーのファイル名がでない場合はservice-worker.jsserviceWorkerLocation初期化オプションを使用する必要があります

ルートディレクトリにサービスワーカーを登録できない場合はどうなりますか?

デフォルトでは、サービスワーカーは登録されている同じディレクトリ内でのみ使用できます。たとえば、Service Worker ファイルがに存在する場合/assets/service-worker.jsexample.com/assets/*assets登録できるのはフォルダ内またはフォルダのサブディレクトリだけで、ホームページ (example.com/) には登録できません。このため、Service Worker をルートディレクトリ (などhttps://example.com/service-worker.js) でホストして登録することをお勧めします。

ルートドメインにサービスワーカーを登録できない場合は、サービスワーカーファイルを提供する際に Service-Worker-AllowedHTTP ヘッダーを使用する方法もあります。Service Worker Service-Worker-Allowed: / への応答を返すようにサーバーを設定することで、ブラウザーに範囲を広げて別のディレクトリ内から使用できるように指示します。

タグマネージャーを使用してサービスワーカーを作成できますか?

いいえ、サービスワーカーはウェブサイトのサーバーでホストされている必要があり、タグマネージャーでは読み込めません。

ステップ 2: ブラウザ登録

ブラウザがプッシュ通知を受信するには、呼び出しでプッシュ通知を登録する必要がありますbraze.requestPushPermission()。これにより、ユーザーにプッシュ許可がすぐに要求されます。

プッシュ権限 (ソフト・プッシュ・プロンプト) をリクエストする前に、独自のプッシュ関連UIをユーザーに表示したい場合は、を使用してユーザーのブラウザでプッシュがサポートされているかどうかをテストできます。braze.isPushSupported()アプリ内メッセージを使用したソフトプッシュプロンプトの例を参照してください

ユーザーの登録を解除したい場合は、braze.unregisterPush()電話で行うことができます。

ステップ 3: Safari プッシュの設定 (オプション)

Mac OS X で Safari のプッシュ通知をサポートしたい場合は、以下の追加手順に従ってください。

  • Apple への登録」の手順に従って、Safari プッシュ証明書を生成します。
  • Braze ダッシュボードの設定ページ(API キーが保存されているページ)で、ウェブアプリを選択します。「Safari Push の設定」をクリックし、指示に従い、生成したプッシュ証明書をアップロードします。
  • 電話をかけるときにbraze.initialize、Safari プッシュ証明書を生成したときに使用した Web サイトのプッシュ ID とともに、safariWebsitePushIdオプションの設定オプションを指定します。以下に例を示します。

サファリモバイルプッシュ

iOSおよびiPadOSのSafari 16.4+は、[ホーム画面に追加] [ホーム画面に追加] され、[Webアプリケーションマニフェスト] [マニフェストファイル] ファイルを含むアプリのWebプッシュをサポートしています。Web プッシュ通知を統合する手順を完了したら、Safari のモバイルプッシュもサポートできます。

モバイルSafariウェブプッシュをサポートするには、ガイドはこちら に従ってください。

ソフト・プッシュ・プロンプト

ソフトプッシュプロンプト(「プッシュ入門」とも呼ばれます)は、許可を求める際のオプトイン率を最適化するのに役立ちます。

ソフトプッシュプロンプトの設定の詳細については、[ソフトプッシュプロンプト] [プッシュ入門] をご覧ください。

HTTPS 要件

ウェブ標準では、プッシュ通知の許可をリクエストするドメインは安全であることが求められます。

安全なサイトとはどのようなものでしょうか?

サイトが次のセキュアオリジンパターンのいずれかに一致する場合、そのサイトは安全とみなされます。

  • (https, , *)
  • (wss, *, *)
  • (, localhost, )
  • (, .localhost, *)
  • (, 127/8, )
  • (, ::1/128, *)
  • (file, *, —)
  • (chrome-extension, *, —)

Braze Web push の基盤となっているオープンスタンダード仕様のこのセキュリティ要件は、中間者攻撃を防ぎます。

安全なサイトが利用できない場合はどうなりますか?

業界のベストプラクティスはサイト全体を安全にすることですが、サイトドメインを保護できないお客様は、安全な方法を使用して要件を回避できます。詳細については、[代替プッシュドメイン] [28] の使用ガイドをご覧になるか、実際のデモをご覧ください

サービスワーカーの詳細設定

skipWaiting当社のサービスワーカーファイルはインストール時に自動的に呼び出されます。これを回避したい場合は、Braze をインポートする前に、サービスワーカーファイルに次のコードを追加してください。

トラブルシューティング

連携手順に従ったのに、まだプッシュ通知が届きません。 -Webプッシュ通知では、サイトがHTTPSである必要があります。 -すべてのブラウザがプッシュメッセージを受信できるわけではありません。braze.isPushSupported()trueブラウザに戻っていることを確認します。 -ユーザーがサイトプッシュアクセスを拒否した場合、ブラウザーの設定から拒否ステータスを削除しない限り、再度許可を求めるメッセージは表示されません。

「このページはどの程度役に立ちましたか?」
New Stuff!