빠른 시작: 모바일 서비스에 대한 푸시 알림 추가(JavaScript)

아티클
12/11/2015

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

이 빠른 시작에서는 Azure 모바일 서비스를 사용하는 앱에서 푸시 알림을 사용하도록 설정하는 과정을 안내합니다. 모바일 서비스를 사용하면 WNS(Windows 푸시 알림 서비스)를 통해 앱에 푸시 알림을 쉽게 보낼 수 있습니다. 자세한 내용은 모바일 서비스 개발자 센터를 참조하세요. Microsoft Visual Studio 2013이 있을 경우 모바일 서비스 앱에서 쉽게 푸시 알림을 사용하도록 설정할 수 있습니다. 이 항목은 이전 항목인 빠른 시작: 모바일 서비스 추가를 기반으로 합니다. 완료하면 새 모바일 서비스에 푸시 알림을 추가하고 새 알림을 보내 앱을 테스트하게 됩니다.

사전 요구 사항

Visual Studio 2013 업데이트 3**
활성 Windows 스토어 계정입니다.
이전 항목인 빠른 시작: 모바일 서비스 추가를 완료합니다.

앱에 푸시 알림 추가 및 구성

먼저 Visual Studio 2013의 푸시 알림 추가 마법사를 사용하여 Windows 스토어에 앱을 등록하고 푸시 알림을 사용하도록 모바일 서비스를 설정한 후 앱에 코드를 추가하여 장치 채널을 등록합니다.

참고 이 항목에서는 모바일 서비스 연결이 이전 항목에서 수행된 프로젝트에 이미 추가되었다고 가정합니다. 모바일 서비스가 연결되지 않은 경우 푸시 알림 추가 마법사에서 자동으로 이 연결을 만듭니다.

Visual Studio 2013에서 솔루션 탐색기를 열고 프로젝트를 마우스 오른쪽 단추로 클릭한 후 추가, **푸시 알림...**을 차례로 클릭합니다. 푸시 알림 추가 마법사가 시작됩니다.
다음을 클릭하고 Windows 스토어 계정에 로그인한 후 새 이름 예약에 이름을 제공하고 예약을 클릭합니다. Windows 스토어에 새로운 앱 등록이 만들어집니다.
앱 이름 목록에서 새 등록을 클릭하고 다음을 클릭합니다.
빠른 시작: 모바일 서비스 추가 또는 빠른 시작: C++를 사용하여 모바일 서비스 추가를 완료할 때 만든 모바일 서비스를 선택하고 다음, 마침을 차례로 클릭합니다. WNS(Windows 푸시 알림 서비스)와 함께 작동하여 앱에 알림을 보낼 수 있도록 모바일 서비스가 구성됩니다.참고 앱이 모바일 서비스에 연결하도록 구성되지 않은 경우 마법사에서 빠른 시작: 모바일 서비스 추가에 설명된 것과 동일한 구성 작업도 완료합니다.
(선택 사항) 생성된 YourMobileService.push.register.js 코드 파일을 열고 코드를 검사합니다. 이 코드는 앱이 활성화될 때마다 장치 등록이 시도되도록 보장하며, notifyallusers 사용자 지정 API에 대한 호출을 포함합니다.
(선택 사항) 서버 탐색기에서 모바일 서비스 및 서비스 이름을 확장하고 notifyallusers.js 파일을 엽니다. 모바일 서비스에 저장되는 이 파일은 모든 등록된 사용자에게 푸시 알림을 보내는 JavaScript 코드를 포함합니다.
F5 키를 눌러 앱을 실행하고 모바일 서비스에서 즉시 알림이 수신되는지 확인합니다.

생성된 푸시 알림 코드 업데이트

푸시 알림 추가 마법사가 모든 등록된 사용자에 대한 테스트 알림을 트리거하는 코드를 추가합니다. 이렇게 하면 앱이 실행될 때 알림을 보여 주기 쉽지만 일반적으로 의미 있는 시나리오는 아닙니다. 따라서 notifyallusers에 대한 호출을 제거하고, 코드를 일부 변경해서 TodoItem 테이블에서 삽입 작업이 수행될 때 모든 등록된 장치에 알림을 보내는 코드로 바꿉니다.

서버 탐색기에서 모바일 서비스, 서비스 이름 및 notifyallusers.js를 차례로 확장합니다. 여기에는 푸시 알림을 보내는 코드가 포함됩니다. 참고 등록된 모든 스크립트 파일에 푸시 알림을 보내는 코드를 포함할 수 있습니다. 이 스크립트의 위치는 알림이 트리거되는 방법에 따라 달라집니다. 테이블에 대한 삽입, 업데이트, 삭제 또는 읽기 작업에 예약된 작업이나 사용자 지정 API로 스크립트를 등록할 수 있습니다. 자세한 내용은 모바일 서비스에서 서버 스크립트 작업을 참조하세요. 이 경우 이 코드는 TodoItem 테이블에 대한 삽입 작업에 등록된 스크립트 파일로 이동됩니다.

TodoItem 테이블을 확장하고, insert.js 파일을 열고, 현재 삽입 함수를 다음 코드로 바꾼 후 변경 사항을 저장합니다.

function insert(item, user, request) {
// Define a payload for the Windows Store toast notification.
var payload = '<?xml version="1.0" encoding="utf-8"?><toast><visual>' +    
    '<binding template="ToastText01">  <text id="1">' +
    item.text + '</text></binding></visual></toast>';

request.execute({
    success: function() {
        // If the insert succeeds, send a notification.
        push.wns.send(null, payload, 'wns/toast', {
            success: function(pushResponse) {
                console.log("Sent push:", pushResponse);
                request.respond();
                },              
                error: function (pushResponse) {
                    console.log("Error Sending push:", pushResponse);
                    request.respond(500, { error: pushResponse });
                    }
                });
            }
        });
}

insert.js 파일에 변경 사항을 저장하면 새 버전의 스크립트가 모바일 서비스에 업로드됩니다.

이제 새 TodoItem을 삽입하면 삽입 요청을 수행한 장치에 새로운 푸시 알림이 즉시 전송됩니다.

Visual Studio에서 F5 키를 눌러 앱을 실행합니다.
앱에서 Insert a TodoItem에 텍스트를 입력하고 Save를 클릭합니다. Azure에서 테이블에 삽입 시 즉시 장치에 알림이 다시 전송됩니다.
(옵션) 동시에 두 컴퓨터에서 앱을 실행하고 이전 단계를 반복합니다. 실행 중인 모든 앱 인스턴스에 알림이 전송되는지 확인합니다.

요약 및 다음 단계

지금까지 모바일 서비스를 사용하여 Windows 스토어 앱에 푸시 알림 기능을 추가하는 방법을 배웠습니다.

다음에는 모바일 서비스를 사용하여 Microsoft 계정, Facebook, Twitter 또는 Google ID 공급자를 통해 사용자를 인증하는 방법을 알아보세요. 자세한 내용은 인증 시작을 참조하세요.

빠른 시작: 모바일 서비스에 대한 푸시 알림 추가(JavaScript)

사전 요구 사항

앱에 푸시 알림 추가 및 구성

생성된 푸시 알림 코드 업데이트

요약 및 다음 단계

관련 항목

추가 리소스