빠른 시작: 타일 업데이트 보내기(HTML)

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

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

타일은 앱이 처음 설치될 때 표시되고 매니페스트에 정의되어 있는 기본 타일로 시작됩니다. 앱을 설치하고 나면 알림을 통해 타일의 콘텐츠를 변경할 수 있습니다.이 빠른 시작에서는 새 타일 콘텐츠를 정의하고, 알림을 타일로 보내고, 더 이상 필요 없는 경우 알림을 제거하는 과정을 안내합니다. 이러한 작업은 가장 단순하게 구현할 수 있는 알림인 로컬 알림을 사용하여 설명됩니다. 다음 단계에 대해 살펴보겠습니다.

• 알림에 사용할 템플릿 지정
• 템플릿의 빈 XML 콘텐츠 검색
• 알림에 텍스트 추가
• 알림에 이미지 추가
• 다양한 타일 크기에 대한 여러 가지 알림 버전을 단일 페이로드에 패키징
• 알림의 만료 시간 설정
• 업데이트를 로컬 알림으로 타일에 보내기

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.: Windows 스토어 앱 UI 전체 프로세스

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

사전 요구 사항

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

• 타일 및 알림 용어와 개념에 대한 기본 지식. 자세한 내용은 타일, 배지 및 알림을 참조하세요.
• 타일 XML 스키마를 사용한 경험 자세한 내용은 타일 스키마를 참조하세요.
• Windows 런타임 API를 사용하여 JavaScript로 기본 Windows 스토어 앱을 만들 수 있는 능력 자세한 내용은 JavaScript를 사용하는 첫 번째 Windows 스토어 앱 만들기를 참조하세요.
• 앱의 매니페스트에 정의되어 있는 앱의 기존 기본 타일. 자세한 내용은 빠른 시작: Microsoft Visual Studio 매니페스트 편집기를 사용하여 기본 타일 만들기를 참조하세요.
• DOM(문서 개체 모델) API에서 XML 사용 및 XML 조작에 대한 경험

지침

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

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

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

var notifications = Windows.UI.Notifications;

2. 타일에 사용할 템플릿 선택 및 XML 콘텐츠 검색

시스템이 제공한 템플릿 카탈로그에서 콘텐츠의 레이아웃 요구에 맞는 템플릿을 선택합니다. 전체 템플릿 목록을 보려면 TileTemplateType 열거를 참조하세요. 보낼 알림마다 다른 템플릿을 사용할 수 있습니다.

이 예에서는 TileWide310x150ImageAndText01 템플릿을 사용하며, 이 템플릿에는 한 개의 이미지와 한 개의 텍스트 문자열이 필요합니다. 예를 들어 다음과 같습니다.

var template = notifications.TileTemplateType.tileWide310x150ImageAndText01;                      
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

GetTemplateContent 메서드는 XmlDocument를 반환합니다. 위 코드는 다음 XML 형식을 검색하며, 표준 DOM(문서 개체 모델) 함수를 통해 이후 단계에서 자세한 내용을 입력합니다.

참고  Windows 8 시스템에서 getTemplateContent를 호출하면 버전 1 템플릿이 반환됩니다. Windows 8.1 시스템에서 이 메서드를 호출하면 Windows Phone 전용 템플릿의 경우 버전 2 템플릿 또는 버전 3 템플릿이 반환됩니다. 앱의 매니페스트에 Windows 8 호환성이 지정된 경우 이 메서드는 Windows 버전에 관계없이 버전 1 템플릿을 반환합니다. 이 항목에서는 버전 2 템플릿을 사용합니다.

<tile>
    <visual version="2">
        <binding template="TileWide310x150ImageAndText01" fallback="TileWideImageAndText01">
            <image id="1" src=""/>
            <text id="1"></text>
        </binding>
    </visual>
</tile>

3. 알림에 사용할 텍스트 콘텐츠 제공

이 코드는 먼저 태그 이름이 "text"인 템플릿에서 모든 요소를 검색합니다. TileWide310x150ImageAndText01 템플릿에는 단일 텍스트 문자열만 포함되어 있으며, 코드에서 할당합니다. 이 문자열은 최대 2줄로 줄바꿈될 수 있으므로 문자열 길이는 잘림이 방지되도록 그에 맞게 설정해야 합니다.

var tileTextAttributes = tileXml.getElementsByTagName("text");   
tileTextAttributes[0].appendChild(tileXml.createTextNode("Hello World! My very own tile notification"));

4. 알림에 사용할 이미지 제공

이 코드는 먼저 태그 이름이 "image"인 템플릿에서 모든 요소를 검색합니다. TileWide310x150ImageAndText01 템플릿에는 단일 이미지가 포함되어 있습니다. 일부 타일 템플릿에는 이미지가 없고, 텍스트만 있습니다.

중요  여기서 사용되는 이미지 "redWide.png"는 하나의 예일 뿐이며 Microsoft Visual Studio 프로젝트에 포함되지 않습니다. "redWide.png"를 이 알림을 보내기 전에 프로젝트에 추가한 고유한 실제 이미지의 이름으로 바꿔야 합니다. 바꾸지 않으면 알림이 배달되지 않습니다.

var tileImageAttributes = tileXml.getElementsByTagName("image");

이미지는 앱의 패키지, 앱의 로컬 저장소 또는 웹에서 가져와 사용할 수 있습니다. 이 단계에서 버전은 이미지 원본별로 표시됩니다. 여러 이미지가 포함된 타일 알림에서는 해당 이미지 요소가 이미지 원본 유형의 모든 조합을 사용할 수 있습니다. 템플릿에서 사용되는 이미지는 크기가 200 KB 미만이고 1024 x 1024 픽셀보다 작아야 합니다. 자세한 내용은 타일 및 알림 이미지 크기를 참조하세요.

다음 코드에서는 앱의 패키지에서 가져온 로컬 이미지를 사용합니다. 이 형식의 이미지는 Visual Studio 솔루션 파일에 포함되며 앱의 일부로 패키징됩니다. 이러한 이미지는 "ms-appx:///" 접두사를 사용하여 액세스합니다. 화면 읽기 프로그램 등의 접근성 용도로 선택적 대체 텍스트도 할당하는 것이 가장 좋습니다.

tileImageAttributes[0].setAttribute("src", "ms-appx:///images/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

다음 코드에서는 앱의 로컬 저장소에서 가져온 로컬 이미지를 사용합니다. 이 이미지 형식은 앱에서 로컬 저장소에 저장됩니다. 이 위치는 Windows.Storage.ApplicationData.current.localFolder에서 반환된 위치입니다. 이러한 이미지는 "ms-appdata:///local/" 접두사를 사용하여 액세스합니다. 또한 화면 읽기 프로그램 등의 접근성 용도로 선택적 대체 텍스트도 할당합니다.

tileImageAttributes[0].setAttribute("src", "ms-appdata:///local/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

다음 코드에서는 웹 이미지를 사용합니다. 이러한 이미지는 이미지 경로를 지정하는 데 필요한 "http://" 또는 "https://" 프로토콜을 사용하여 액세스합니다. 웹 이미지를 사용하려면 앱의 매니페스트에 internetClient 접근 권한 값이 선언되어 있어야 합니다.

tileImageAttributes[0].setAttribute("src", "https://www.contoso.com/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

선택적 baseUri 특성을 사용하여 "https://www.microsoft.com/"과 같이 루트 경로를 지정할 수 있습니다. 즉 이미지의 src 특성에 지정된 상대 URI(Uniform Resource Identifiers)와 함께 결합됩니다. 이 특성은 전체 알림에 적용되는 visual 요소 또는 해당 바인딩에 적용되는 binding 요소에 설정할 수 있습니다. baseUri가 둘 모두에 대해 설정되면 binding 값은 visual 값을 무시합니다.

baseUri가 "https://www.contoso.com/"으로 설정된 경우 이 예제 코드에서

tileImageAttributes[0].setAttribute("src", "https://www.contoso.com/redWide.png");

줄을 다음과 같이 줄일 수 있습니다.

tileImageAttributes[0].setAttribute("src", "redWide.png");

5. 다양한 타일 크기에 대한 알림 바인딩을 페이로드에 포함합니다.

사용자는 시작 화면에서 타일의 크기를 언제든지 조정할 수 있습니다. 알림을 보낼 때 타일의 크기 상태(작은 타일, 중간 크기 타일, 와이드 타일 또는 큰 타일)를 확인할 방법은 없습니다. 타일 크기가 알림에 맞는 템플릿 바인딩이 아닌 경우 알림은 표시되지 않습니다. 따라서 항상 매니페스트에서 로고 이미지를 제공한 모든 라이브 타일 크기(중간 크기 타일, 와이드 타일, 큰 타일)에 대한 알림 버전을 페이로드에 포함하는 것이 좋습니다.

참고  Windows Phone 8.1부터 휴대폰에서 큰 타일이 지원되지 않습니다.

이 예에서는 와이드 알림에 사용한 것과 동일한 텍스트 문자열을 사용하여 텍스트 중간 크기 알림을 정의합니다.

       
var squareTemplate = notifications.TileTemplateType.tileSquare150x150Text04;
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);

var squareTileTextAttributes = squareTileXml.getElementsByTagName("text");   
squareTileTextAttributes[0].appendChild(squareTileXml.createTextNode("Hello World! My very own tile notification"));

다음에는, 와이드 타일의 페이로드에 중간 크기 타일을 추가합니다. squareTileXml 페이로드에 중간 크기 타일을 정의하는 binding 요소를 검색합니다. 와이드 타일의 형제로 binding 요소를 추가합니다.

var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXml.getElementsByTagName("visual").item(0).appendChild(node);

이전 단계를 통해 XML 페이로드의 단일 visual 요소 아래에 두 개의 binding 요소가 추가되었으며, 아래와 같이 표시됩니다.

<tile>
    <visual visual="2">
        <binding template="TileWide310x150ImageAndText01" fallback="TileWideImageAndText01">
            <image id="1" src="ms-appx:///images/redWide.png"/>
            <text id="1">Hello World! My very own tile notification</text>
        </binding>

        <binding template="TileSquare150x150Text04" fallback="TileSquareText04">
            <text id="1">Hello World! My very own tile notification</text>
        </binding>
    </visual>
</tile>

6. 지정한 XML 콘텐츠를 기준으로 알림 만들기

var tileNotification = new notifications.TileNotification(tileXml);

7. 알림의 만료 시간 설정

기본적으로 로컬 타일과 배지 알림은 만료되지 않고 푸시 알림, 정기 알림 및 예약된 알림은 3일 후에 만료됩니다. 앱에 적절한 시간을 사용하여 특히 로컬 타일과 배지 알림에 만료 시간을 설정하는 것이 좋습니다. 타일의 콘텐츠는 관련이 있을 때까지만 유지되어야 합니다. 이 경우 알림은 10분 후에 만료되고 타일에서 제거됩니다.

var currentTime = new Date();
tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);

8. 앱 타일에 알림을 보냅니다.

notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

9. 옵션: 타일 알림 지우기

이 예에서는 로컬 호출을 통해 타일 알림을 지우는 방법을 보여 줍니다. 콘텐츠의 시간이 제한된 경우 알림을 명시적으로 지우는 대신 알림에 만료 시간을 설정하는 것이 좋습니다. 다음 코드 줄은 앱의 타일에서 현재 알림을 지웁니다.

notifications.TileUpdateManager.createTileUpdaterForApplication().clear();

알림 큐가 사용하도록 설정되고 큐에 알림이 있는 타일의 경우 clear 메서드를 호출하면 큐가 비워집니다.

클라우드에서 알림을 지울 수는 없습니다. clear 메서드를 로컬에서 호출하면 알림 소스에 관계없이 타일이 지워지지만 정기 알림이나 푸시 알림은 타일을 새 콘텐츠로 업데이트할 수만 있습니다.

요약 및 다음 단계

이 빠른 시작에서는 새 콘텐츠를 정의하고 알림을 통해 앱 타일에 보냈습니다. 알림은 10분 후에 제거되었습니다. 다음 코드는 템플릿 선택에서 알림 보내기까지 위 단계를 요약합니다. 앱 패키지의 이미지가 사용됩니다.

직접 작성한 샘플에서 이 코드를 테스트하려면 샘플 UI에서 단추로 트리거되는 함수 내에 이 코드를 넣습니다. 예를 들어 default.html 파일에 단추를 넣을 수 있습니다. 실제 이미지 이름을 대체해야 합니다.

var notifications = Windows.UI.Notifications;

var template = notifications.TileTemplateType.tileWide310x150ImageAndText01;                      
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");   
tileTextAttributes[0].appendChild(tileXml.createTextNode("Hello World! My very own tile notification"));

var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "ms-appx:///assets/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

var squareTemplate = notifications.TileTemplateType.tileSquare150x150Text04;
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);
var squareTileTextAttributes = squareTileXml.getElementsByTagName("text");   
squareTileTextAttributes[0].appendChild(squareTileXml.createTextNode("Hello World! My very own tile notification"));

var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXml.getElementsByTagName("visual").item(0).appendChild(node);

var tileNotification = new notifications.TileNotification(tileXml);

var currentTime = new Date();
tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);

notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

지금까지 첫 번째 타일 업데이트를 수행했으며 알림 큐를 사용하도록 설정하여 타일 기능을 확장할 수 있습니다.

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

관련 항목

앱 타일 및 배지 샘플

타일 및 알림 이미지 크기

타일 및 타일 알림 개요

타일에 대한 지침 및 검사 목록

타일 알림 예약 방법

빠른 시작: 정기 알림 설정

빠른 시작: Visual Studio 매니페스트 편집기를 사용하여 기본 타일 만들기

타일 템플릿 카탈로그

타일 XML 스키마

Windows.UI.Notifications