빠른 시작: 실행 중인 앱에 대한 푸시 알림 가로채기(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

참고 JavaScript를 사용하지 않는 경우 빠른 시작: 실행 중인 앱에 대한 푸시 알림 가로채기(XAML)를 참조하세요.

앱이 푸시 알림을 가로챈 후 기본 방식과 다른 방식으로 이 알림에 응답하도록 디자인할 수 있습니다. 이 절차는 모든 푸시 알림 유형에 사용할 수 있지만, 특히 알림 메시지와 원시 알림에 유용합니다.

앱의 클라우드 서비스가 Windows에 알림을 보낼 때 앱은 이 알림이 알림 메시지를 표시하거나, 타일 또는 배지를 업데이트하거나, 원시 알림을 백그라운드 작업에 전달하기 전에 알림을 가로채서 처리할 수 있는 기회가 있습니다. 앱은 또한 이러한 요소가 표시되거나 업데이트되지 않도록 할 수도 있습니다. 알림 전달 이벤트 처리기를 구현하는 것은 옵션입니다. 이는 앱이 들어오는 알림을 사용자에게 표시하는 대신 이 알림을 처리하여 표시하지 않도록 하려는 시나리오에 가장 유용합니다.

참고 Windows Phone 8.1의 경우 알림의 XML 콘텐츠에 ToastNotification.suppressPopup 또는 ScheduledToastNotification.suppressPopup 속성을 사용하여 전화에서 알림 메시지가 표시되지 않게 할 수 있습니다.

참고 이 절차는 실행 중인 앱에만 적용됩니다. 앱이 실행되고 있지 않고 처리기가 구현되지 않았을 때 전송되는 알림은 정상적으로 전달됩니다. 즉, 타일이 업데이트되고 알림 메시지가 표시되며 원시 알림이 백그라운드 작업(구현된 경우)에 전달됩니다.

사전 요구 사항

이 항목의 내용을 이해하거나 이 항목에서 제공하는 코드를 사용하려면 다음 사항이 필요합니다.

푸시 알림에 대한 지식. 자세한 내용은 WNS(Windows 푸시 알림 서비스) 개요를 참조하세요.
WNS(Windows 푸시 알림 서비스)로 푸시 알림을 보낼 수 있는 클라우드 서비스. 자세한 내용은 빠른 시작: 푸시 알림 보내기를 참조하세요.

지침

1. 옵션: 네임스페이스 변수 선언

이 단계에서는 전체 네임스페이스 이름을 대신하여 사용할 짧은 이름을 제공합니다. 이 이름은 C#의 "using" 문이나, Visual Basic의 "Imports" 문과 동일하여 코드를 간소화할 수 있게 해줍니다.

참고 다음 코드에서는 이 변수가 선언된 것으로 가정합니다.


var pushNotifications = Windows.Networking.PushNotifications;

2. 푸시 알림 채널 만들기

클라우드 서버에서 푸시된 알림을 받으려면 유효한 알림 채널이 필요합니다. 이벤트 수신기는 이 채널을 감시하여 알림이 도착하는지 확인합니다. 채널을 만드는 방법에 대한 자세한 내용은 알림 채널을 요청, 생성 및 저장하는 방법을 참조하세요.

성공할 경우 이 예제는 newChannel.uri를 통해 액세스할 수 있는 채널을 만듭니다.


var channel;
var channelOperation = pushNotifications.PushNotificationChannelManager.createPushNotificationChannelForApplicationAsync();

return channelOperation.then(function (newChannel) {
    channel = newChannel;
    },
    function (error) {
        // ...
    }
);

3. 푸시 알림 이벤트를 처리할 수 있는 함수 만들기

아래 예제는 모든 알림 유형을 처리하는 방법을 보여 줍니다.

이 예제의 코드 마지막 줄에서는 이벤트의 cancel 속성을 true로 설정합니다. 이렇게 하면 알림이 UI 변경을 수행하지 않습니다. 즉, 타일 또는 배지를 업데이트하거나 알림 메시지를 표시하지 않습니다. 원시 알림의 경우에는 알림이 백그라운드 작업(구현된 경우)에 전달되지 않습니다. 이렇게 해서 알림에 대한 모든 응답을 처리기에서 결정합니다.


var content;
function onPushNotification(e) {
    var notificationPayload; 

    switch (e.notificationType) { 
        case pushNotifications.PushNotificationType.toast: 
            notificationPayload = e.toastNotification.content.getXml(); 
            break; 

        case pushNotifications.PushNotificationType.tile: 
            notificationPayload = e.tileNotification.content.getXml(); 
            break; 

        case pushNotifications.PushNotificationType.badge: 
            notificationPayload = e.badgeNotification.content.getXml(); 
            break; 

        case pushNotifications.PushNotificationType.raw: 
            notificationPayload = e.rawNotification.content; 
            break; 
    } 

    e.cancel = true;
}

4. 받은 푸시 알림에 대한 이벤트 수신기 추가

1단계에서 만든 채널을 사용하여 2단계에서 만든 이벤트 처리기를 할당하여 PushNotificationReceived 이벤트를 처리합니다.


channel.addEventListener("pushnotificationreceived", onPushNotification, false);

요약

시나리오에서 필요로 하는 경우 앱이 실행되고 있는 동안 푸시 알림을 가로채서 처리하면 앱이 이러한 알림의 효과를 더 자세히 제어할 수 있습니다. 예를 들어 진행 중인 게임 위로 알림 메시지가 표시되지 않도록 하려는 경우 이벤트 처리기는 덜 방해하는 방식으로 이 알림의 내용을 게임 UI에 통합할 수 있습니다.

다음을 통해 공유