Skip to content

代替 Web プッシュドメイン

Web Push を統合するには、ドメインが安全である必要があります。一般的にはhttps、localhost、と W3C プッシュ標準で定義されているその他の例外がこれに該当します。また、ドメインのルートに Service Worker を登録できるか、少なくともそのファイルの HTTP ヘッダーを制御できる必要があります。この記事では、Braze Web Push を別のドメインに統合する方法について説明します。

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

注意事項

ウェブ上の多くの回避策と同様に、ブラウザは絶えず進化しており、将来的にはこれが意図したとおりに機能しなくなる可能性があることを覚えておいてください。

  • これには以下が必要です。
    • 別の安全なドメイン (https://) を所有しており、そのドメインに Service Worker を登録するためのアクセス権があります。
    • プッシュトークンが同じプロファイルに紐付けられるように、ユーザーはウェブサイトにログインする必要があります。

統合

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

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

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

http://insecure.com ```html

// 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

### ステップ 2: プッシュ登録

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

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

<script src="https://braze-inc.github.io/embed-like-gist/embed.js?target=https%3A%2F%2Fgithub.com%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Falternate-push-domain-registration.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>

### ステップ 3: ドメイン間の通信 (オプション)

ユーザーが開始したこのワークフローからオプトインできるようになったので`insecure.com`、ユーザーがすでにオプトインしているかどうかに基づいてサイトを変更したい場合があります。すでに登録している場合、ユーザーにプッシュの登録を依頼しても意味がありません。

iFrame と [`postMessage`][3]API を使用して 2 つのドメイン間で通信できます。 

**insecure.com**

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

\`\`\`html
<!-- 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 でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!