Apache Cordova 앱에 푸시 알림 추가

아티클
06/25/2019

개요

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

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

필수 구성 요소

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

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

Visual Studio Community 2015 이상이 설치된 PC
Apache Cordova 대한 Visual Studio Tools
활성 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 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");
}

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

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

백 엔드 프로젝트 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 버전을 업데이트합니다.

프로젝트에서 v6.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) 앞의 코드에서는 Your_Project_ID를 Google 개발자 콘솔의 앱에 대한 숫자 프로젝트 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 다운로드를 선택하고 프로젝트의 app 폴더에 파일을 저장한 후 다음을 선택합니다.
Android Studio의 프로젝트에서 다음과 같은 구성 변경 작업을 수행합니다.
1. project-level build.gradle 파일(<project>/build.gradle)에서 dependencies 섹션에 다음 명령문을 추가합니다.
```
classpath 'com.google.gms:google-services:4.0.1'
```
2. app-level build.gradle 파일(<project>/<app-module>/build.gradle)에서 dependencies 섹션에 다음 명령문을 추가합니다.
```
implementation 'com.google.firebase:firebase-core:16.0.8'
implementation 'com.google.firebase:firebase-messaging:17.3.4'
```
3. app-level build.gradle 파일 끝부분에서 dependenices 섹션 다음에 다음 줄을 추가합니다.
```
apply plugin: 'com.google.gms.google-services'
```
4. 도구 모음에서 지금 동기화를 선택합니다.
다음을 선택합니다.
이 단계 건너뛰기를 선택합니다.
Firebase 콘솔에서 프로젝트의 톱니바퀴를 선택합니다. 그런 후 프로젝트 설정을 선택합니다.
Android Studio 프로젝트의 app 폴더에 google-services.json 파일을 다운로드하지 않은 경우 이 페이지에서 다운로드할 수 있습니다.
맨 위에 있는 클라우드 메시징 탭으로 전환합니다.
나중에 사용하기 위해 서버 키를 복사하고 저장합니다. 이 값을 사용하여 허브를 구성합니다.

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

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

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

Android용 Cordova 앱 구성

Cordova 앱에서 config.xml엽니다. Your_Project_ID 를 Google 개발자 콘솔의 앱에 대한 숫자 프로젝트 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회).
설정>Developer 옵션으로 돌아가서 USB 디버깅을 사용하도록 설정합니다. 그런 다음, Android 휴대폰을 USB 케이블을 사용해 개발 PC에 연결합니다.

이 방법은 Android 6.0(Marshmallow)을 실행하는 Google Nexus 5X를 사용하여 테스트되었습니다. 그러나 기술은 모든 최신 Android 릴리스에서 공통적입니다.

Google Play Services 설치

푸시 플러그 인은 푸시 알림용으로 Google Play Services를 사용합니다.

Visual Studio 도구>Android Android>SDK Manager를 선택합니다. 그런 다음, 추가 폴더를 확장합니다. 다음 SDK 각각이 설치되어 있는지 확인하기 위해 적절 한 상자를 확인합니다.
- Android 2.3 이상
- Google Repository 개정 27 이상
- Google Play Services 9.0.2 이상
Install Packages를 선택합니다. 그런 다음, 설치가 완료될 때까지 기다립니다.

현재 필요한 라이브러리가 phonegap-plugin-push 설치 설명서에 나와 있습니다.

Android 앱에서 푸시 알림 테스트

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

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

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

아래와 같이 AVD(Android 가상 디바이스) 관리자에서 대상으로 설정된 Google API가 있는 가상 디바이스에 배포해야 합니다.

더 빠른 x86 에뮬레이터를 사용하려는 경우 HAXM 드라이버를 설치하고 해당 드라이버를 사용하도록 에뮬레이터를 구성합니다.

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

이전처럼 todolist 앱을 실행하고 새 todo 항목을 삽입합니다. 이때 알림 아이콘이 알림 영역에 표시됩니다. 알림 서랍을 열어서 전체 알림 텍스트를 볼 수 있습니다.

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

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

Mac 또는 클라우드 서비스에서 iOS remotebuild 에이전트를 설치하고 실행합니다.

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

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

참고

Xcode 7 이상에서는 iOS에 대한 푸시 플러그 인을 사용해야 합니다.

앱 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에서 Keychain Access를 시작합니다. 왼쪽 탐색 모음의 범주 아래에서 내 인증서를 엽니다. 이전 섹션에서 다운로드한 SSL 인증서를 찾은 다음, 해당 콘텐츠를 공개합니다. 인증서만 선택합니다.(프라이빗 키를 선택하지 않습니다.) 그런 다음, 내보내기 합니다.
Azure Portal에서 모두 찾아보기>App Services를 선택합니다. 그런 다음, Mobile Apps 백엔드를 선택합니다.
설정에서 App Service Push를 선택합니다. 그런 다음, 알림 허브 이름을 선택합니다.
Apple Push Notification Services>업로드 Certificate로 이동합니다. .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 대상(예: Windows-x64 또는 Windows-x86)을 선택합니다. (푸시 알림에 대해 Windows AnyCPU 선택 안 함.)

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

중요

애플리케이션 암호와 패키지 SID는 중요한 보안 자격 증명입니다. 이러한 값은 다른 사람과 공유하지 말고 앱과 함께 분산하지 마세요.

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

WNS에 대한 알림 허브 구성

Azure Portal에서 모두 찾아보기>App Services를 선택합니다. 그런 다음, Mobile Apps 백엔드를 선택합니다. 설정에서 App Service Push를 선택합니다. 그런 다음, 알림 허브 이름을 선택합니다.
Windows(WNS)로 이동합니다. 그런 다음, Live 서비스 사이트에서 가져온 보안 키(클라이언트 암호) 및 패키지 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"
        }
    }

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

Windows 앱에서 푸시 알림 테스트

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

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

항목이 추가될 때 알림을 받았는지 확인합니다.

다음 단계

푸시 알림에 대한 자세한 내용은 Notification Hubs를 참조하세요.
아직 Apache Cordova 앱에 인증을 추가하지 않은 경우 추가하여 자습서를 계속합니다.

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

Share via