Alternate web push domain

To integrate web push, your domain must be secure, which generally means https, localhost, and other exceptions as defined in the W3C push standard. You’ll also need to be able to register a Service Worker at the root of your domain, or at least be able to control the HTTP headers for that file. This article covers how to integrate Braze Web Push on an alternate domain.

If you aren’t able to meet all of those criteria, use this guide to set up a workaround that lets you add a push prompt dialog to your website. For example, this article would be helpful if you want the user to opt-in from an http (insecure) website or from a browser extension popup that prevents the push prompt from displaying.

Caveats

Keep in mind that like many workarounds on the web, browsers continually evolve, and in the future, this may not work as intended.

• This requires that:
  • You own a separate secure domain (https://) and have access to register a Service Worker on that domain.
  • Users to be logged in to your website to ensure that push tokens are tied to the same profiles.

Integration

To make the following example clear, we’ll use use http://insecure.com and https://secure.com as our two domains with the goal of getting visitors to register for push on http://insecure.com. This example could also be applied to a chrome-extension:// scheme for a browser extension’s popup page.

Step 1: Initiate prompting flow

On insecure.com, open a new window to your secure domain using a URL parameter to pass the currently logged-in user’s Braze external 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>

Step 2: Register for push

At this point, secure.com will open a popup window in which you can initialize the Braze Web SDK for the same user ID and request the user’s permission for Web push.

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

Step 3: Communicate between domains (optional)

Now that users can opt-in from this workflow originating on insecure.com, you may want to modify your site based on if the user is already opted-in or not. There’s no point in asking the user to register for push if they already are.

You can use iFrames and the postMessage API to communicate between your two domains.

insecure.com

On our insecure.com domain, we will ask the secure domain (where push is actually registered) for information on the current user’s push registration:

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