Skip to content

代替 Web プッシュドメイン

Web プッシュを統合するには、ドメインがセキュアである必要があります。一般にこれは、https、localhost、および W3C プッシュ標準で定義されているその他の例外である必要があります。また、ドメインのルートにサービスワーカーを登録するか、少なくともそのファイルの HTTP ヘッダーを制御できる必要もあります。この記事では、代替ドメイン上で Braze Web プッシュを統合する方法について説明します。

これらの条件をすべて満たすことができない場合は、このガイドを使用して、Web サイトにプッシュプロンプトダイアログを追加できる回避策を設定します。たとえば、ユーザーがhttp(安全でない)Web サイトからオプトインするか、プッシュプロンプトが表示されないブラウザ拡張ポップアップからオプトインする場合に、この記事は役立ちます。

注意事項

Web上の多くの回避策と同様に、ブラウザは継続的に進化し、将来は意図したとおりに動作しない可能性があることに留意してください。

  • これには以下が必要です。
    • 別のセキュア・ドメイン(https://)を所有し、そのドメインにサービス・ワーカーを登録するためのアクセス権を持っていること。
    • Web サイトにログインするユーザーは、プッシュトークンが同じプロファイルに関連付けられていることを確認する必要があります。

統合

次の例をわかりやすくするために、訪問者を http://insecure.com でのプッシュに登録させることを目的として、http://insecure.com と https://secure.com の2つのドメインを使用します。この例題は、ブラウザー拡張のポップアップページのchrome-extension://スキームにアプリ当てはまるかもしれません。

ステップ1:プロンプトフローを開始する

insecure.com で、URL パラメータを使用してセキュアドメインに新しいウィンドウを開封し、現在ログイン中のユーザーのBraze外部ID を渡します。

http://insecure.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<button id="opt-in">Opt-In For Push</button>
<script>
// the same ID you would use with `braze.changeUser`:
const user_id = getUserIdSomehow();
// pass the user ID into the secure domain URL:
const secure_url = `https://secure.com/push-registration.html?external_id=${user_id}`;

// when the user takes some action, open the secure URL in a new window
document.getElementById("opt-in").onclick = function(){
    if (!window.open(secure_url, 'Opt-In to Push', 'height=500,width=600,left=150,top=150')) {
        window.alert('The popup was blocked by your browser');
    } else {
        // user is shown a popup window
        // and you can now prompt for push in this window
    }
}
</script>

ステップ2:プッシュを登録する

この時点で、secure.com はポップアップウィンドウを開封します。ポップアップウィンドウでは、同じユーザー IDのBraze Web SDKを初期化し、Webプッシュに対するユーザーの権限をリクエストできます。

https://secure.com/push-registration.html

ステップ3:ドメイン間で通信する (オプション)

ユーザーは insecure.com から発生したこのワークフローからオプトインできるようになったため、ユーザーがすでにオプトインしているかどうかに基づいてサイトを変更できます。ユーザーがすでにプッシュを登録している場合、それを尋ねることに意味はありません。

iFrames と postMessage API を使用して、2つのドメイン間で通信できます。

insecure.com

insecure.com ドメインで、現在のユーザーのプッシュ登録に関する情報を (プッシュが_実際に_登録されている) セキュアドメインに問い合わせます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- Create an iframe to the secure domain and run getPushStatus onload-->
<iframe id="push-status" src="https://secure.com/push-status.html" onload="getPushStatus()" style="display:none;"></iframe>

<script>
function getPushStatus(event){
    // send a message to the iframe asking for push status
    event.target.contentWindow.postMessage({type: 'get_push_status'}, 'https://secure.com');
    // listen for a response from the iframe's domain
    window.addEventListener("message", (event) => {
        if (event.origin === "http://insecure.com" && event.data.type === 'set_push_status') {
            // update the page based on the push permission we're told
            window.alert(`Is user registered for push? ${event.data.isPushPermissionGranted}`);
        }
    }   
}
</script>

secure.com/push-status.html

Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!