Skip to content

대체 웹 푸시 도메인

웹 푸시를 통합하려면 도메인이 보안되어야 합니다. 일반적으로 https, localhostW3C 푸시 표준에 정의된 기타 예외를 의미합니다. 또한 도메인 루트에 서비스 종사자를 등록할 수 있거나 최소한 해당 파일의 HTTP 헤더를 제어할 수 있어야 합니다. 이 문서에서는 대체 도메인에서 Braze 웹 푸시를 통합하는 방법을 다룹니다.

이러한 기준을 모두 충족할 수 없는 경우 이 가이드를 사용하여 웹사이트에 푸시 프롬프트 대화 상자를 추가할 수 있는 해결 방법을 설정하세요. 예를 들어, 사용자가 http(비보안) 웹사이트 또는 푸시 프롬프트의 표시를 차단하는 브라우저 확장 팝업에서 옵트인하도록 하려는 경우 이 문서가 도움이 될 수 있습니다.

주의 사항

웹의 많은 해결 방법과 마찬가지로 브라우저도 계속 발전하고 있으며, 향후 해결 방법이 의도한 대로 작동하지 않을 수도 있습니다.

  • 이를 위해서는 다음이 필요합니다:
    • 별도의 보안 도메인(https://)을 소유하고 있으며 해당 도메인에 서비스 종사자를 등록할 수 있는 액세스 권한이 있습니다.
    • 푸시 토큰이 동일한 프로필에 연결되도록 웹사이트에 로그인한 사용자가 필요합니다.

통합

다음 예제를 명확히 살펴보기 위해 방문자가 http://insecure.com 에서 푸시를 등록하는 것을 목표로 http://insecure.comhttps://secure.com을 두 개의 도메인으로 사용합니다. 이 예제는 브라우저 확장의 팝업 페이지에 대한 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 웹 SDK를 초기화하고 웹 푸시에 대한 사용자의 권한을 요청할 수 있는 팝업 창이 열립니다.

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

3단계: 도메인 간 통신(선택 사항)

사용자가 insecure.com에서 시작된 이 워크플로우에서 옵트인할 수 있으므로 사용자가 이미 옵트인했는지 여부에 따라 사이트를 수정할 수 있습니다. 이미 푸시 등록을 한 사용자에게 푸시 등록을 요청하는 것은 의미가 없습니다.

아이프레임과 postMessage API를 사용하여 두 도메인 간에 통신할 수 있습니다.

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

이 페이지가 얼마나 도움이 되었나요?
New Stuff!