빠른 시작: 보조 타일에 알림 보내기(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
참고 JavaScript를 사용하지 않는 경우 빠른 시작: 보조 타일에 알림 보내기(XAML)를 참조하세요.
이 빠른 시작에서는 로컬 알림을 보내서 앱의 보조 타일을 업데이트하는 방법을 보여 줍니다. 보조 타일에 알림을 보내는 절차와 앱의 기본 타일에 알림을 보내는 절차는 최종 단계를 제외하고 동일합니다. 두 절차 간의 유일한 차이점은 보조 타일의 경우 보조 타일과 관련된 타일 업데이트 프로그램(CreateTileUpdaterForSecondaryTile)을 사용한다는 것입니다.
전체 샘플에서 사용된 이 항목의 코드를 보려면 보조 타일 샘플을 참조하세요. 샘플은 JavaScript, C#, C++ 및 Visual Basic 버전으로 제공됩니다.
앱이 시작될 때 인식할 수 없는 추가 또는 삭제가 있을 경우 항상 보조 타일을 열거해야 합니다. 사용자가 보조 타일을 삭제하면 Windows는 단순히 타일을 제거합니다. 앱 자체가 보조 타일에서 사용된 리소스를 해제해야 합니다. Windows가 클라우드를 통해 보조 타일을 복사하는 경우 보조 타일의 현재 타일 또는 배지 알림, 예약된 알림, 푸시 알림 채널 및 정기 알림에 사용된 URI(Uniform Resource Identifier)은 보조 타일과 함께 복사되지 않으며 다시 설정해야 합니다.
참고 이 빠른 시작에서는 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. 빈 타일 템플릿 검색
모든 타일 템플릿을 보조 타일에 사용할 수 있습니다. 여기서는 단순한 텍스트 전용 템플릿인 TileWide310x150Text04를 사용합니다.
var wideTemplate = notifications.TileTemplateType.tileWide310x150Text04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(wideTemplate);
3. 알림에 텍스트 할당
TileWide310x150Text04 템플릿에는 단일 텍스트 요소가 포함되어 있으며, 여기에 문자열을 할당합니다.
var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("This text was delivered through a notification"));
4. 알림의 중간 크기 버전 제공
타일에 전송된 알림 페이로드에서 앱이 지원하는 각 타일 크기에 대한 바인딩을 항상 제공하는 것이 좋습니다. 사용자는 고정 작업의 일부로 개발자가 제공하는 옵션에서 보조 타일 크기를 선택할 수 있습니다. 각 알림에서 각 해당 크기 옵션에 대한 바인딩을 제공하면 타일 크기에 관계없이 알림이 표시됩니다. 큰 보조 타일도 지원하는 경우에는 큰 템플릿 중 하나에 대해 이 단계와 다음 단계를 반복합니다.
참고 보조 타일을 포함하여 모든 타일은 사용자가 크기를 조정한 후 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("This text was delivered through a notification"));
5. 와이드 알림 페이로드에 중간 크기 알림 추가
var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXml.getElementsByTagName("visual").item(0).appendChild(node);
6. 최종 XML을 타일 알림으로 패키징
var tileNotification = new notifications.TileNotification(tileXml);
7. 보조 타일 업데이트 프로그램 만들기
이 단계까지는 표준 타일 알림과 프로세스가 동일합니다. 하지만 이 단계에서는 보조 타일과 관련된 createTileUpdaterForSecondaryTile 메서드를 사용합니다. 이 메서드에는 대상 보조 타일의 고유 ID가 필요합니다. 이 예제에서는 ID가 appbarTileId 변수에 저장된 보조 타일이 현재 시작 화면에 고정되어 있다고 가정합니다.
var updater = notifications.TileUpdateManager.createTileUpdaterForSecondaryTile(appbarTileId);
8. 보조 타일에 알림 보내기
updater.update(tileNotification);
9. 옵션: 보조 타일의 로고 업데이트
보조 타일을 만들 때 로고 이미지를 제공해야 합니다. 로고 이미지(일반적으로 앱의 로고를 표시하므로 그렇게 이름이 지정됨)는 알림을 받기 전에 타일에 표시되는 전체 타일 이미지입니다. 알림이 제거되거나 만료되면 타일이 로고 이미지로 돌아갑니다. 일부 시나리오에서는 전체 알림 업데이트를 보내지 않으려는 경우 고정된 콘텐츠의 변경을 나타내기 위해 기본 로고 이미지를 변경할 수 있습니다. 이 단계에서는 앱의 로컬 저장소에 있는 이미지를 사용하여 ID가 appbarTileId 변수에 저장된 보조 타일의 로고를 변경하는 방법을 보여 줍니다. 이 예제는 Windows.Foundation.Uri 클래스를 참조합니다.
var tileToUpdate = new Windows.UI.StartScreen.SecondaryTile("SecondaryTile.01");
var uriUpdatedLogo = new Windows.Foundation.Uri("ms-appdata:///local/NewSecondaryTileDefault.png");
tileToUpdate.logo = uriUpdatedLogo;
tileToUpdate.updateAsync();
요약 및 다음 단계
이 빠른 시작에서는 앱과 관련된 보조 타일에 알림을 보냈습니다. 앱의 기본 타일에 알림을 보내는 것과 보조 타일 중 하나에 알림을 보내는 것 간에 하나의 작은 차이점만 있다는 것을 배웠습니다. 또한 보조 타일의 기본 로고 이미지를 업데이트했습니다.
이 빠른 시작에서는 보조 타일 업데이트를 로컬 알림으로 보냈습니다. 다른 알림 전달 방법(예약된 알림, 정기 알림 및 푸시 알림)을 탐색할 수도 있습니다. 자세한 내용은 알림 전달을 참조하세요.