Apache Cordova 앱에 푸시 알림 추가

개요

이 자습서에서는 Apache Cordova 빠른 시작 프로젝트에 푸시 알림을 추가하여 레코드가 삽입될 때마다 디바이스에 푸시 알림을 보냅니다.

다운로드한 빠른 시작 서버 프로젝트를 사용하지 않는 경우 푸시 알림 확장 패키지가 필요합니다. 자세한 내용은 Mobile Apps용 .NET 백 엔드 서버 SDK 작업을 참조하세요.

필수 조건

이 자습서에서는 Visual Studio 2015로 개발된 Apache Cordova 애플리케이션이 있다고 가정합니다. 이 디바이스는 Google Android Emulator, Android 디바이스, Windows 디바이스 또는 iOS 디바이스에서 실행되어야 합니다.

이 자습서를 완료하려면 다음이 필요합니다.

Visual Studio Community 2015 이상의 PC
Visual Studio Tools for Apache Cordova
활성 Azure 계정
완료된 Apache Cordova 빠른 시작 프로젝트
(Android) 확인된 전자 메일 주소가 있는 Google 계정
(iOS) Apple 개발자 프로그램 멤버 자격 및 iOS 디바이스(iOS 시뮬레이터는 푸시 알림을 지원하지 않음)
(Windows) Microsoft Store 개발자 계정 및 Windows 10 디바이스

알림 허브 구성

Azure App Service의 Mobile Apps 기능은 Azure Notification Hubs 를 사용하여 푸시를 보내므로 모바일 앱에 대한 알림 허브를 구성합니다.

Azure Portal에서 App Services로 이동한 다음, 앱 백 엔드를 선택합니다. 설정에서, 푸시를선택합니다.
앱에 알림 허브 리소스를 추가하려면 연결을 선택합니다. 허브를 만들거나 기존 허브에 연결할 수 있습니다.

이제 Mobile Apps 백 엔드 프로젝트에 알림 허브를 연결했습니다. 나중에 디바이스에 푸시할 PNS(플랫폼 알림 시스템)에 연결하도록 이 알림 허브를 구성합니다.

이 섹션의 단계를 보여 주는 비디오를 시청하세요.

서버 프로젝트 업데이트

이 섹션에서는 새 항목이 추가 될 때마다 푸시 알림을 보내도록 기존 Mobile Apps 백 엔드 프로젝트의 코드를 업데이트합니다. 이 프로세스는 플랫폼 간 푸시를 가능하게 하는 Azure Notification Hubs의 템플릿 기능을 통해 제공됩니다. 다양한 클라이언트는 템플릿을 사용하여 푸시 알림에 등록되며 단일 유니버설 푸시는 모든 클라이언트 플랫폼에 연결할 수 있습니다.

백 엔드 프로젝트 유형과 일치하는 다음 절차 중 하나( .NET 백 엔드 또는 Node.js 백 엔드)를 선택합니다.

.NET 백 엔드 프로젝트

Visual Studio에서 서버 프로젝트를 마우스 오른쪽 단추로 클릭합니다. 그런 다음 , NuGet 패키지 관리를 선택합니다. Microsoft.Azure.NotificationHubs검색한 다음 설치 선택합니다. 이 프로세스는 백 엔드에서 알림을 보내기 위한 Notification Hubs 라이브러리를 설치합니다.
서버 프로젝트에서 컨트롤러>TodoItemController.cs 엽니다. 그런 후 아래의 using 구문을 추가합니다.
```
using System.Collections.Generic;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Azure.Mobile.Server.Config;
```

PostTodoItem 메서드에서 InsertAsync 호출 뒤에 다음 코드를 추가합니다.

// Get the settings for the server project.
HttpConfiguration config = this.Configuration;
MobileAppSettingsDictionary settings =
    this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();

// Get the Notification Hubs credentials for the mobile app.
string notificationHubName = settings.NotificationHubName;
string notificationHubConnection = settings
    .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;

// Create a new Notification Hub client.
NotificationHubClient hub = NotificationHubClient
.CreateClientFromConnectionString(notificationHubConnection, notificationHubName);

// Send the message so that all template registrations that contain "messageParam"
// receive the notifications. This includes APNS, GCM, WNS, and MPNS template registrations.
Dictionary<string,string> templateParams = new Dictionary<string,string>();
templateParams["messageParam"] = item.Text + " was added to the list.";

try
{
    // Send the push notification and log the results.
    var result = await hub.SendTemplateNotificationAsync(templateParams);

    // Write the success result to the logs.
    config.Services.GetTraceWriter().Info(result.State.ToString());
}
catch (System.Exception ex)
{
    // Write the failure result to the logs.
    config.Services.GetTraceWriter()
        .Error(ex.Message, null, "Push.SendAsync Error");
}

이 프로세스는 항목이 포함된 템플릿 알림을 보냅니다. 새 항목이 삽입될 때의 텍스트입니다.

서버 프로젝트를 다시 게시합니다.

Node.js 백 엔드 프로젝트

백 엔드 프로젝트를 설정합니다.

todoitem.js 기존 코드를 다음 코드로 바꿉다.

var azureMobileApps = require('azure-mobile-apps'),
promises = require('azure-mobile-apps/src/utilities/promises'),
logger = require('azure-mobile-apps/src/logger');

var table = azureMobileApps.table();

table.insert(function (context) {
// For more information about the Notification Hubs JavaScript SDK,
// see https://aka.ms/nodejshubs.
logger.info('Running TodoItem.insert');

// Define the template payload.
var payload = '{"messageParam": "' + context.item.text + '" }';  

// Execute the insert. The insert returns the results as a promise.
// Do the push as a post-execute action within the promise flow.
return context.execute()
    .then(function (results) {
        // Only do the push if configured.
        if (context.push) {
            // Send a template notification.
            context.push.send(null, payload, function (error) {
                if (error) {
                    logger.error('Error while sending push notification: ', error);
                } else {
                    logger.info('Push notification sent successfully!');
                }
            });
        }
        // Don't forget to return the results from the context.execute().
        return results;
    })
    .catch(function (error) {
        logger.error('Error while running context.execute: ', error);
    });
});

module.exports = table;

이 프로세스는 새 항목이 삽입될 때 item.text가 포함된 템플릿 알림을 보냅니다.

로컬 컴퓨터에서 파일을 편집할 때 서버 프로젝트를 다시 게시합니다.

Cordova 앱 수정

Apache Cordova 앱 프로젝트가 푸시 알림을 처리할 준비가 되었는지 확인하려면 Cordova 푸시 플러그 인과 플랫폼별 푸시 서비스를 설치합니다.

프로젝트에서 Cordova 버전을 업데이트합니다.

프로젝트에서 버전 6.1.1 이전의 Apache Cordova 버전을 사용하는 경우 클라이언트 프로젝트를 업데이트합니다. 프로젝트를 업데이트하려면 다음 단계를 수행합니다.

구성 디자이너를 열려면 config.xml마우스 오른쪽 단추로 클릭합니다.
플랫폼 탭 을 선택합니다.
Cordova CLI 텍스트 상자에서 6.1.1을 선택합니다.
프로젝트를 업데이트하려면 빌드 선택한 다음, 솔루션 빌드 선택합니다.

푸시 플러그 인 설치

Apache Cordova 애플리케이션은 기본적으로 디바이스 또는 네트워크 기능을 처리하지 않습니다. 이러한 기능은 npm 또는 GitHub에 게시되는 플러그 인에서 제공됩니다. phonegap-plugin-push 플러그 인은 네트워크 푸시 알림을 처리합니다.

다음 방법 중 하나로 푸시 플러그 인을 설치할 수 있습니다.

명령 프롬프트에서:

다음 명령을 실행합니다.

cordova plugin add phonegap-plugin-push

Visual Studio 내에서 :

솔루션 탐색기에서 config.xml 파일을 엽니다. 다음으로 , 플러그 인>사용자 지정을 선택합니다. 그런 다음 설치 원본으로 Git 을 선택합니다.
원본으로 https://github.com/phonegap/phonegap-plugin-push 입력합니다.
설치 원본 옆에 있는 화살표를 선택합니다.
SENDER_ID Google 개발자 콘솔 프로젝트에 대한 숫자 프로젝트 ID가 이미 있는 경우 여기에 추가할 수 있습니다. 그렇지 않으면 자리 표시자 값(예: 777777)을 입력합니다. Android를 대상으로 하는 경우 나중에 config.xml 파일에서 이 값을 업데이트할 수 있습니다.

비고

버전 2.0.0을 기준으로 google-services.json 프로젝트의 루트 폴더에 설치하여 보낸 사람 ID를 구성해야 합니다. 자세한 내용은 설치 설명서를 참조하세요.
추가를 선택합니다.

이제 푸시 플러그 인이 설치됩니다.

디바이스 플러그 인 설치

푸시 플러그 인을 설치하는 데 사용한 것과 동일한 절차를 따릅니다. 핵심 플러그 인 목록에서 디바이스 플러그 인을 추가합니다. (찾으려면 플러그 인> 선택Core.) 플랫폼 이름을 얻으려면 이 플러그 인이 필요합니다.

애플리케이션이 시작될 때 디바이스 등록

처음에는 Android용 최소 코드를 포함합니다. 나중에 iOS 또는 Windows 10에서 실행되도록 앱을 수정할 수 있습니다.

로그인 프로세스에 대한 콜백 중에 registerForPushNotifications 호출을 추가합니다. 또는 onDeviceReady 메서드의 맨 아래에 추가할 수 있습니다.

// Log in to the service.
client.login('google')
    .then(function () {
        // Create a table reference.
        todoItemTable = client.getTable('todoitem');

        // Refresh the todoItems.
        refreshDisplay();

        // Wire up the UI Event Handler for the Add Item.
        $('#add-item').submit(addItemHandler);
        $('#refresh').on('click', refreshDisplay);

            // Added to register for push notifications.
        registerForPushNotifications();

    }, handleError);

이 예제에서는 인증에 성공한 후 registerForPushNotifications 를 호출하는 방법을 보여 줍니다. 필요한 만큼 자주 registerForPushNotifications() 호출할 수 있습니다.

다음과 같이 새 registerForPushNotifications 메서드를 추가합니다.

// Register for push notifications. Requires that phonegap-plugin-push be installed.
var pushRegistration = null;
function registerForPushNotifications() {
    pushRegistration = PushNotification.init({
        android: { senderID: 'Your_Project_ID' },
        ios: { alert: 'true', badge: 'true', sound: 'true' },
        wns: {}
    });

// Handle the registration event.
pushRegistration.on('registration', function (data) {
    // Get the native platform of the device.
    var platform = device.platform;
    // Get the handle returned during registration.
    var handle = data.registrationId;
    // Set the device-specific message template.
    if (platform == 'android' || platform == 'Android') {
        // Register for GCM notifications.
        client.push.register('gcm', handle, {
            mytemplate: { body: { data: { message: "{$(messageParam)}" } } }
        });
    } else if (device.platform === 'iOS') {
        // Register for notifications.
        client.push.register('apns', handle, {
            mytemplate: { body: { aps: { alert: "{$(messageParam)}" } } }
        });
    } else if (device.platform === 'windows') {
        // Register for WNS notifications.
        client.push.register('wns', handle, {
            myTemplate: {
                body: '<toast><visual><binding template="ToastText01"><text id="1">$(messageParam)</text></binding></visual></toast>',
                headers: { 'X-WNS-Type': 'wns/toast' } }
        });
    }
});

pushRegistration.on('notification', function (data, d2) {
    alert('Push Received: ' + data.message);
});

pushRegistration.on('error', handleError);
}

(Android) 앞의 코드에서 Google 개발자 콘솔의 앱에 대한 숫자 프로젝트 ID로 바꿉 Your_Project_ID 니다.

(선택 사항) Android에서 앱 구성 및 실행

Android에 푸시 알림을 사용하도록 설정하려면 이 섹션을 완료합니다.

Firebase Cloud Messaging 사용

처음에는 Google Android 플랫폼을 대상으로 하므로 Firebase Cloud Messaging을 사용하도록 설정해야 합니다.

Firebase 콘솔에 로그인합니다. 아직 없는 경우 새 Firebase 프로젝트를 만듭니다.
프로젝트를 만든 후 Android 앱에 Firebase 추가를 선택합니다.
Android 앱에 Firebase 추가 페이지에서 다음 단계를 수행합니다.
1. Android 패키지 이름의 경우 애플리케이션의 build.gradle 파일에서 applicationId의 값을 복사합니다. 이 예제에서는 com.fabrikam.fcmtutorial1app.
2. 앱 등록을 선택합니다.
google-services.json다운로드를 선택하고 파일을 프로젝트의 앱 폴더에 저장한 다음, 다음을 선택합니다.
Android Studio에서 프로젝트에 대해 다음과 같은 구성을 변경 합니다.
1. 프로젝트 수준 build.gradle 파일(<project>/build.gradle)에서 종속성 섹션에 다음 문을 추가합니다.
```
classpath 'com.google.gms:google-services:4.0.1'
```
2. 앱 수준 build.gradle 파일(<project>/app-module>/<build.gradle)에서 종속성 섹션에 다음 문을 추가합니다.
```
implementation 'com.google.firebase:firebase-core:16.0.8'
implementation 'com.google.firebase:firebase-messaging:17.3.4'
```
3. app-level build.gradle 파일 끝부분에서 dependencies 섹션 다음에 다음 줄을 추가하십시오.
```
apply plugin: 'com.google.gms.google-services'
```
4. 도구 모음에서 지금 동기화 를 선택합니다.
다음을 선택합니다.
이 단계 건너뛰기 선택
Firebase 콘솔에서 프로젝트의 톱니바퀴를 선택합니다. 그런 다음 프로젝트 설정을 선택합니다.
Android Studio 프로젝트의 앱 폴더에 google-services.json 파일을 다운로드하지 않은 경우 이 페이지에서 다운로드할 수 있습니다.
위쪽의 클라우드 메시징 탭으로 전환합니다.
나중에 사용할 수 있는 서버 키를 복사하고 저장합니다. 이 값을 사용하여 허브를 구성합니다.

FCM을 사용하여 푸시 요청을 보내도록 모바일 앱 백 엔드 구성

Azure 포털에서 모두 찾아보기를 선택한 다음 App Services를 선택합니다. 그런 다음 Mobile Apps 백 엔드를 선택합니다.
설정에서, 푸시를선택합니다. 그런 다음 푸시 알림 서비스 구성을 선택합니다.
GCM(Google)으로 이동합니다. Firebase 콘솔에서 가져온 FCM 레거시 서버 키를 입력한 다음 저장을 선택합니다.

이제 서비스가 Firebase Cloud Messaging과 작동하도록 구성되었습니다.

Android용 Cordova 앱 구성

Cordova 앱에서 config.xml엽니다. 그런 다음 Google 개발자 콘솔에서 앱의 숫자 프로젝트 ID로 바꿉 Your_Project_ID 니다.

<plugin name="phonegap-plugin-push" version="1.7.1" src="https://github.com/phonegap/phonegap-plugin-push.git">
    <variable name="SENDER_ID" value="Your_Project_ID" />
</plugin>

index.js엽니다. 그런 다음 숫자 프로젝트 ID를 사용하도록 코드를 업데이트합니다.

pushRegistration = PushNotification.init({
    android: { senderID: 'Your_Project_ID' },
    ios: { alert: 'true', badge: 'true', sound: 'true' },
    wns: {}
});

USB 디버깅을 위한 Android 디바이스 구성

Android 디바이스에 애플리케이션을 배포하려면 USB 디버깅을 사용하도록 설정해야 합니다. Android 휴대폰에서 다음 단계를 수행합니다.

설정>전화정보로 이동합니다. 그런 다음 개발자 모드가 활성화될 때까지 빌드 번호를 탭합니다(약 7회).
설정>개발자 옵션으로 돌아가서 USB 디버깅을 사용하도록 설정합니다. 그런 다음 USB 케이블을 사용하여 개발 PC에 Android 휴대폰을 연결합니다.

Android 6.0(Marshmallow)을 실행하는 Google Nexus 5X 디바이스를 사용하여 이 테스트를 수행했습니다. 그러나 이 기술은 모든 최신 Android 릴리스에서 일반적입니다.

Google Play 서비스 설치

푸시 플러그 인은 푸시 알림을 위해 Android Google Play 서비스를 사용합니다.

Visual Studio에서 도구>Android>Android SDK Manager를 선택합니다. 그런 다음 Extras 폴더를 확장합니다 . 적절한 확인란을 선택하여 다음 SDK가 각각 설치되어 있는지 확인합니다.
- Android 2.3 이상
- Google 리포지토리 수정 버전 27 이상
- Google Play 서비스 9.0.2 이상
설치 패키지선택합니다. 그런 다음 설치가 완료되기를 기다립니다.

현재 필요한 라이브러리는 phonegap-plugin-push 설치 설명서에 나열됩니다.

Android의 앱에서 푸시 알림 테스트

이제 앱을 실행하고 TodoItem 테이블에 항목을 삽입하여 푸시 알림을 테스트할 수 있습니다. 동일한 백 엔드를 사용하는 한 동일한 디바이스 또는 두 번째 디바이스에서 테스트할 수 있습니다. 다음 방법 중 하나로 Android 플랫폼에서 Cordova 앱을 테스트합니다.

물리적 디바이스에서: USB 케이블을 사용하여 개발 컴퓨터에 Android 디바이스를 연결합니다. Google Android Emulator 대신 디바이스를 선택합니다. Visual Studio는 디바이스에 애플리케이션을 배포하고 애플리케이션을 실행합니다. 그런 다음 디바이스에서 애플리케이션과 상호 작용할 수 있습니다.

Mobizen과 같은 화면 공유 애플리케이션은 Android 애플리케이션을 개발하는 데 도움이 될 수 있습니다. Mobizen은 ANDROID 화면을 PC의 웹 브라우저에 프로젝션합니다.
Android 에뮬레이터에서: 에뮬레이터를 사용할 때 필요한 추가 구성 단계가 있습니다.

AVD(Android Virtual Device) 관리자에 표시된 것처럼 Google API가 대상으로 설정된 가상 디바이스에 배포하고 있는지 확인합니다.

더 빠른 x86 에뮬레이터를 사용하려면 HAXM 드라이버를 설치한 다음 이를 사용하도록 에뮬레이터를 구성합니다.

앱>설정> 추가 계정을 선택하여 Android 디바이스에 Google계정을 추가합니다. 그런 다음, 표시되는 메시지를 따릅니다.

이전과 같이 todolist 앱을 실행하고 새 할 일 항목을 삽입합니다. 이번에는 알림 영역에 알림 아이콘이 표시됩니다. 알림 서랍을 열어 알림의 전체 텍스트를 볼 수 있습니다.

보기

(선택 사항) iOS에서 구성 및 실행

이 섹션은 iOS 디바이스에서 Cordova 프로젝트를 실행하기 위한 것입니다. iOS 디바이스로 작업하지 않는 경우 이 섹션을 건너뛸 수 있습니다.

Mac 또는 클라우드 서비스에서 iOS 원격 빌드 에이전트 설치 및 실행

Visual Studio를 사용하여 iOS에서 Cordova 앱을 실행하려면 iOS 설치 가이드 의 단계를 수행하여 원격 빌드 에이전트를 설치하고 실행합니다.

iOS용 앱을 빌드할 수 있는지 확인합니다. Visual Studio에서 iOS용 앱을 빌드하려면 설치 가이드의 단계가 필요합니다. Mac이 없는 경우 MacInCloud와 같은 서비스에서 원격 빌드 에이전트를 사용하여 iOS용으로 빌드할 수 있습니다. 자세한 내용은 클라우드에서 iOS 앱 실행을 참조하세요.

비고

iOS에서 푸시 플러그 인을 사용하려면 Xcode 7 이상이 필요합니다.

앱 ID로 사용할 ID 찾기

푸시 알림을 위해 앱을 등록하기 전에 Cordova 앱에서 config.xml 열고 위젯 요소에서 id 특성 값을 찾은 다음 나중에 사용할 수 있도록 복사합니다. 다음 XML에서 ID는 io.cordova.myapp7777777.

<widget defaultlocale="en-US" id="io.cordova.myapp7777777"
    version="1.0.0" windows-packageVersion="1.1.0.0" xmlns="https://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="https://schemas.microsoft.com/appx/2014/htmlapps">

나중에 Apple 개발자 포털에서 앱 ID를 만들 때 이 식별자를 사용합니다. 개발자 포털에서 다른 앱 ID를 만드는 경우 이 자습서의 뒷부분에서 몇 가지 추가 단계를 수행해야 합니다. 위젯 요소의 ID는 개발자 포털의 앱 ID와 일치해야 합니다.

Apple 개발자 포털에서 푸시 알림에 대한 앱 등록

앱의 앱 ID를 등록합니다. 명시적 앱 ID(와일드카드 앱 ID 아님)를 만들고 번들 ID의 경우 Xcode 빠른 시작 프로젝트에 있는 정확한 번들 ID를 사용합니다. 푸시 알림 옵션을 선택하는 것도 중요합니다.
그런 다음 푸시 알림 구성을 준비하려면 "개발" 또는 "배포" SSL 인증서를 만듭니다.

비슷한 단계를 보여 주는 비디오 보기

푸시 알림을 보내도록 Azure 구성

Mac에서 키 집합 액세스를 시작합니다. 왼쪽 탐색 모음의 범주 아래에서 내 인증서를 엽니다. 이전 섹션에서 다운로드한 SSL 인증서를 찾은 다음 해당 내용을 공개합니다. 인증서만 선택합니다(프라이빗 키를 선택하지 않음). 그런 다음 내보냅니다.
Azure portal에서 모두 찾아보기>App Services를 선택합니다. 그런 다음 Mobile Apps 백 엔드를 선택합니다.
설정에서 App Service 푸시를 선택합니다. 그런 다음 알림 허브 이름을 선택합니다.
Apple Push Notification Services업로드 인증서로 > 이동합니다. .p12 파일을 업로드하고 올바른 모드 를 선택합니다(이전의 클라이언트 SSL 인증서가 프로덕션 또는 샌드박스인지 여부에 따라 다름). 변경 내용을 저장합니다.

이제 서비스가 iOS에서 푸시 알림으로 작동하도록 구성되었습니다.

앱 ID가 Cordova 앱과 일치하는지 확인

Apple 개발자 계정에서 만든 앱 ID가 이미 config.xml 파일의 위젯 요소 ID와 일치하는 경우 이 단계를 건너뛸 수 있습니다. 그러나 ID가 일치하지 않는 경우 다음 단계를 수행합니다.

프로젝트에서 플랫폼 폴더를 삭제합니다.
프로젝트에서 플러그 인 폴더를 삭제합니다.
프로젝트에서 node_modules 폴더를 삭제합니다.
Apple 개발자 계정에서 만든 앱 ID를 사용하도록 config.xml 파일에서 위젯 요소의 ID 특성을 업데이트합니다.
프로젝트를 다시 빌드합니다.

iOS 앱에서 푸시 알림 테스트

Visual Studio에서 iOS 가 배포 대상으로 선택되어 있는지 확인합니다. 그런 다음 디바이스 를 선택하여 연결된 iOS 디바이스에서 푸시 알림을 실행합니다.

iTunes를 사용하여 PC에 연결된 iOS 디바이스에서 푸시 알림을 실행할 수 있습니다. iOS 시뮬레이터는 푸시 알림을 지원하지 않습니다.
Visual Studio에서 실행 단추 또는 F5 를 선택하여 프로젝트를 빌드하고 iOS 디바이스에서 앱을 시작합니다. 그런 다음 확인을 선택하여 푸시 알림을 수락합니다.

비고

앱은 첫 번째 실행 중에 푸시 알림에 대한 확인을 요청합니다.
앱에서 작업을 입력한 다음 더하기 (+) 아이콘을 선택합니다.
알림이 수신되었는지 확인합니다. 그런 다음 확인을 선택하여 알림을 해제합니다.

(선택 사항) Windows에서 구성 및 실행

이 섹션에서는 Windows 10 디바이스에서 Apache Cordova 앱 프로젝트를 실행하는 방법을 설명합니다(PhoneGap 푸시 플러그 인은 Windows 10에서 지원됨). Windows 디바이스를 사용하지 않는 경우 이 섹션을 건너뛸 수 있습니다.

WNS를 사용하여 푸시 알림에 대한 Windows 앱 등록

Visual Studio의 스토어 옵션을 사용하려면 Windows-x64 또는 Windows-x86 과 같은 솔루션 플랫폼 목록에서 Windows 대상을 선택합니다. (푸시 알림의 경우 "Windows-AnyCPU" 를 피하세요.)

Visual Studio 솔루션 탐색기에서 Windows 스토어 앱 프로젝트를 마우스 오른쪽 단추로 클릭합니다. 그런 다음 스토어>스토어와 앱을 연결하기를 선택합니다.
마법사에서 다음을 선택합니다. 그런 다음 Microsoft 계정으로 로그인합니다. 새 앱 이름 예약에서 앱의 이름을 입력한 다음 예약을 선택합니다.
앱 등록이 성공적으로 만들어지면 새 앱 이름을 선택합니다. 다음을 선택한 다음, 연결을 선택합니다. 이 프로세스는 필요한 Windows 스토어 등록 정보를 애플리케이션 매니페스트에 추가합니다.
이전에 Windows 스토어 앱에 대해 만든 것과 동일한 등록을 사용하여 Windows Phone 스토어 앱 프로젝트에 대해 1단계와 3단계를 반복합니다.
Windows 개발자 센터로 이동한 다음 Microsoft 계정으로 로그인합니다. 내 앱에서 새 앱 등록을 선택합니다. 그런 다음 서비스>푸시 알림을 확장합니다.
푸시 알림 페이지의 WNS(Windows 푸시 알림 서비스) 및 Microsoft Azure Mobile Apps에서 Live Services 사이트를 선택합니다. 패키지 SID의 값과 애플리케이션 비밀의 현재 값을 기록해 둡니다.

중요합니다

애플리케이션 비밀 및 패키지 SID는 중요한 보안 자격 증명입니다. 이러한 값을 다른 사용자와 공유하거나 앱과 배포하지 마세요.

비슷한 단계를 보여 주는 비디오 보기

WNS에 대한 알림 허브 구성

Azure portal에서 모든 찾아보기>App Services를 선택합니다. 그런 다음 Mobile Apps 백 엔드를 선택합니다. 설정에서 App Service 푸시를 선택합니다. 그런 다음 알림 허브 이름을 선택합니다.
Windows(WNS)로 이동합니다. 그런 다음, Live Services 사이트에서 가져온 보안 키 (클라이언트 암호) 및 패키지 SID 를 입력합니다. 그런 다음, 저장을 선택합니다.

이제 백 엔드가 WNS를 사용하여 푸시 알림을 보내도록 구성됩니다.

Windows 푸시 알림을 지원하도록 Cordova 앱 구성

config.xml 마우스 오른쪽 버튼을 클릭하여 디자이너를 엽니다. 그런 다음 뷰 디자이너를 선택합니다. 다음으로, Windows 탭을 선택한 다음 Windows 대상 버전에서 Windows 10을 선택합니다.

기본(디버그) 빌드에서 푸시 알림을 지원하려면 build.json 파일을 엽니다. 그런 다음, "릴리스" 구성을 디버그 구성에 복사합니다.

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
    }
}

업데이트 후 build.json 파일에는 다음 코드가 포함되어야 합니다.

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        },
    "debug": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        }
    }

앱을 빌드하고 오류가 없는지 확인합니다. 이제 클라이언트 앱이 Mobile Apps 백 엔드에서 알림을 등록해야 합니다. 솔루션의 모든 Windows 프로젝트에 대해 이 섹션을 반복합니다.

Windows 앱에서 푸시 알림 테스트

Visual Studio에서 Windows 플랫폼이 배포 대상으로 선택되어 있는지 확인합니다(예: Windows-x64 또는 Windows-x86). Visual Studio를 호스팅하는 Windows 10 PC에서 앱을 실행하려면 로컬 컴퓨터 선택합니다.

실행 단추를 선택하여 프로젝트를 빌드하고 앱을 시작합니다.
앱에서 새 todoitem의 이름을 입력한 다음 더하기 (+) 아이콘을 선택하여 추가합니다.

항목이 추가될 때 알림이 수신되는지 확인합니다.

다음 단계

푸시 알림에 대해 알아보려면 Notification Hubs 에 대해 읽어보세요.
아직 수행하지 않은 경우 Apache Cordova 앱에 인증 추가하는 자습서를 계속 진행합니다.

다음 SDK를 사용하는 방법을 알아봅니다.

Last updated on 2019-06-25