빠른 시작: 배지 업데이트 보내기(HTML)

아티클
12/11/2015

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

참고 JavaScript를 사용하지 않는 경우 빠른 시작: 배지 업데이트 보내기(XAML)를 참조하세요.

이 항목에서는 타일에서 배지를 만들고 업데이트하는 방법을 보여 줍니다. 문자 모양 또는 숫자 값을 포함하는 배지 알림을 보내게 됩니다. 타일에서 배지를 제거하는 방법에 대해서도 알아봅니다.

배지는 앱 상태를 나타내기 위해 타일에 표시되는 숫자 또는 문자 모양입니다. 배지는 타일 자체의 일부가 아니라 타일 위의 오버레이입니다. 타일의 다양한 위치에 표시할 수 있습니다.

영어와 같은 왼쪽에서 오른쪽 언어를 사용하여 Windows의 오른쪽 아래 모서리에
아랍어와 같은 오른쪽에서 왼쪽 언어를 사용하여 Windows의 왼쪽 아래 모서리에
왼쪽에서 오른쪽 언어를 사용하여 Windows Phone 8.1의 오른쪽 위 모서리에
오른쪽에서 왼쪽 언어를 사용하여 Windows Phone 8.1의 왼쪽 위 모서리에

배지는 자체 API 및 스키마를 통해 조작되며 자체 알림을 통해 업데이트됩니다. 이 항목에서는 배지 콘텐츠를 정의하고, 알림을 통해 보내고, 더 이상 필요 없는 경우 콘텐츠를 제거하는 과정을 안내합니다. 이러한 작업은 가장 단순하게 구현할 수 있는 알림인 로컬 알림을 사용하여 설명됩니다.

참고 이 항목에서는 XML DOM(문서 개체 모델)에서 직접 알림 콘텐츠를 조작합니다. NotificationsExtensions 라이브러리에서 선택적 접근 방법을 사용할 수 있습니다. 여기에서는 Intellisense를 비롯한 개체 속성으로 XML 콘텐츠를 나타냅니다. 자세한 내용은 빠른 시작: 코드에 NotificationsExtensions 라이브러리 사용을 참조하세요. 이 항목에서 NotificationsExtenstions를 사용하여 표현된 코드를 보려면 앱 타일 및 배지 샘플을 참조하세요.

사전 요구 사항

이 항목을 이해하기 위해 필요한 항목은 다음과 같습니다.

배지 및 알림 용어와 개념에 대한 기본 지식 자세한 내용은 타일, 배지 및 알림을 참조하세요.
배지 XML 스키마를 사용한 경험 자세한 내용은 배지 스키마를 참조하세요.
Windows 런타임 API를 사용하여 JavaScript로 기본 Windows 스토어 앱을 만들 수 있는 능력 자세한 내용은 JavaScript를 사용하는 첫 번째 Windows 스토어 앱 만들기를 참조하세요.
DOM(문서 개체 모델) API에서 XML 사용 및 XML 조작에 대한 경험

지침

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

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

참고 이 항목에 있는 코드의 나머지 부분에서는 이 변수가 선언된 것으로 가정합니다.


var notifications = Windows.UI.Notifications;

2. 숫자를 표시할지, 문자 모양을 표시할지 선택

배지는 0-99의 숫자 또는 시스템 정의 상태 문자 모양의 집합 중 하나를 표시할 수 있습니다. 배지 선택은 시나리오에 따라 다릅니다. 예를 들어 메일 프로그램에서는 읽지 않은 메일의 수를 표시하거나 새 메일 도착 시 "새 메시지" 문자 모양을 표시할 수 있습니다. 사용 가능한 문자 모양에 대한 자세한 내용은 배지 개요를 참조하세요. 언제 숫자 또는 문자 모양을 사용할지에 대한 자세한 내용은 타일 및 배지에 대한 지침 및 검사 목록을 참조하세요.

참고 Windows Phone 8.1부터 "경고" 및 "주의" 상태 문자 모양과 숫자만 휴대폰 배지에 지원됩니다. 다른 문자 모양을 휴대폰으로 보내면 배지가 지워집니다.

숫자 배지 및 문자 모양 배지는 각각에 대한 특정 배지 템플릿을 통해 정의됩니다. 결정을 내린 배지 유형에 대한 적절한 템플릿을 검색해야 합니다. 이 예제에서는 숫자 배지용 템플릿을 검색합니다.


var badgeType = notifications.BadgeTemplateType.badgeNumber;
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(badgeType);

이 예제에서는 문자 모양 배지용 템플릿을 검색합니다.


var badgeType = notifications.BadgeTemplateType.badgeGlyph;
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(badgeType);

3. 배지에 값 할당

이 예제에서는 템플릿에서 badge 요소를 검색하고 숫자 값을 할당합니다.


var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "7");

이 예제에서는 배지에 문자 모양 값을 할당합니다.


var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "newMessage");

4. 배지 알림을 만들어 배지로 보내기

이 예제에서는 정의한 XML을 알림으로 패키지하고 배지로 보냅니다.


var badgeNotification = new notifications.BadgeNotification(badgeXml);
notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

5. 옵션: 더 이상 유효하지 않은 배지 지우기

배지 숫자 또는 문자 모양을 통해 전달한 정보가 오래되었거나 더 이상 유용하지 않으면 배지를 제거해야 합니다. 다음 코드는 호출 앱의 타일에서 현재 배지를 제거합니다. Clear 메서드를 호출하지 않고 값 "none"을 배지 업데이트로 보낼 수도 있습니다.

참고 타일과 달리 배지는 클라우드를 통해 지울 수 있습니다.


notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().clear();

요약 및 다음 단계

이 빠른 시작에서는 앱 타일의 배지에 대해 새로운 내용을 정의하고 보냈으며, 더 이상 유효하지 않은 배지를 제거했습니다.

이 빠른 시작에서는 배지 업데이트를 로컬 알림으로써 보냈습니다. 다른 알림 전달 방법(예약된 알림, 정기 알림 및 푸시 알림)을 탐색할 수도 있습니다. 자세한 내용은 알림 전달을 참조하세요.