퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 자바스크립트 APIs
  4. 푸시알림[Push notifications]

푸시알림[Push notifications]

FuseJS/Push 모듈 (JS)

메시징 서비스에서 푸시 알림을 처리합니다.

이 모듈은 현재 APNS(Apple Push Notification Service) 및 GCM (Google Cloud Messaging)을 지원합니다.

퓨즈는 Google의 클라우드 메시징(GCM) 및 Apple의 푸시 알림 서비스(APNS)에서 푸시 알림을 지원합니다.

우리는 iOS와 Android에서 가볍고 일관성있는 인터페이스를 선택했으며 필요에 따라 쉽게 확장할 수 있습니다.

우리는 여러분의 의견 및 요청에 매우 관심이 많습니다. 포럼에 들러서 알려주십시오.

클라이언트 측 설정

1단계

.unoproj 파일에 다음을 추가하여 퓨즈 푸시 알림 라이브러리를 포함시킵니다.

1
2
3
4
5
"Packages": [
    ...
    "Fuse.PushNotifications",
    ...
],

2단계 (Android 전용)

Google 알림에는 약간의 추가 정보가 필요합니다.

.unoproj를 다음에 추가하십시오.

1
2
3
4
5
6
7
"Android": {
    ...
    "GooglePlay": {
        "SenderID": "111781901112"
    }
    ...
},

SenderID는 Google Developers Console의 프로젝트 ID입니다. 아직 프로젝트를 설정하지 않았다면 이 문서 뒷부분의 ‘Android 테스트 백엔드 설정’ 섹션을 참조하십시오.

Google Play 라이브러리가 필요합니다. 퓨즈와 함께 사용하려면 여기를 참조하십시오.

앱에서의 동작 방식

Fuse.PushNotifications를 참조하면 다음 작업이 수행됩니다.

플랫폼 공통

  • 등록이 성공했는지 실패했는지 알려주는 콜백을 받게 됩니다.
  • 성공한 콜백에는 고유 등록 ID(iOS 문서의 토큰이라고도 함)가 포함됩니다.
  • 앞으로 수신될 푸시 알림은 모든 알림의 JSON이 포함된 콜백을 시작합니다.

언급된 세 가지 콜백은 JavaScript 및 Uno에서 사용할 수 있습니다.

Android에 특화

  • ‘Google Play’ 라이브러리가 빌드에 포함됩니다. (퓨즈에서 재생 라이브러리를 가져오는 방법은 여기를 클릭하십시오.)
  • SenderID는 다른 연관과 함께 프로젝트의 Manifest.xml 파일에 추가됩니다.
  • 앱이 시작되면 GCM 서비스에 등록됩니다.

iOS에 특화

  • 앱이 시작되면 APNS에 등록됩니다. 모든 액세스가 Apple의 인증서 시스템을 통해 제어되므로 제공할 추가 정보가 없습니다. (우리는 나중에 서버측도 언급할 것입니다)

자바 스크립트에서 API 사용하기

자바스크립트에서 알림과 통합하는 것은 간단합니다. 다음은 콜백이 시작될 때 로그를 남기는 예제입니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<JavaScript>
    var push = require("FuseJS/Push");

    push.on("registrationSucceeded", function(regID) {
        console.log("Reg Succeeded: " + regID);
    });

    push.on("error", function(reason) {
        console.log("Reg Failed: " + reason);
    });

    push.on("receivedMessage", function(payload) {
        console.log("Recieved Push Notification: " + payload);
    });
</JavaScript>

실제 앱에서는 Succeeded가 트리거되면 등록 ID를 서버에 보내야 합니다.

서버사이드

클라이언트 준비를 모두 마쳤다면 백엔드로 이동합니다. 이를 위해 우리는 Apple과 Google이 제공하는 후프를 뛰어넘을 필요가 있습니다.

특정 플랫폼에 대해 이 작업을 수행하는 방법에 대한 다음 가이드를 보려면 아래를 참조하십시오:

  • iOS: iOS 테스트 백엔드 설정
  • Android: 안드로이드 테스트 백엔드 설정하기

알림(The Notification)

JSON 형식의 푸시 알림을 지원합니다. 알림이 도착하면 다음 두 가지 중 하나가 발생합니다:

  • 우리의 앱에 초점이 있는 경우 콜백은 전체 JSON 페이로드(payload)로 즉시 호출됩니다.
  • 앱에 포커스가 없으면(그리고 JSON에 올바른 데이터가 포함되어 있음) 알림 표시줄(iOS의 알림 센터)에 시스템 알림을 추가합니다. 사용자가 드롭 다운에서 알림을 클릭하면 앱이 실행되고 알림이 전송됩니다.

Apple과 Google의 API는 페이로드의 데이터가 시스템 알림을 채우는 데 사용되는 방식을 정의합니다. 하지만 우리는 이를 표준화했습니다.

iOS의 경우 알림의 JSON에 aps 항목을 포함하기만 하면 됩니다:

1
2
3
4
5
6
'aps': {
    alert: {
        'title': 'Well would ya look at that!',
        'body': 'Hello from the server'
    }
},

그리고 ‘title’과 ‘body’가 시스템 알림의 제목과 본문으로 사용됩니다.

Android의 경우 정확히 동일한 ‘aps’ 항목 또는 다음과 같이 사용할 수 있습니다:

1
2
3
4
5
6
'notification': {
    alert: {
        'title': 'Well would ya look at that!',
        'body': 'Hello from the server'
    }
},

notification 항목은 표준 Google 방식으로 이 작업을 수행하지만 Apple에서 지원하는 방식은 도움이 되지 않는다고 생각했습니다.

현재 구현은 title과 title 항목이 작동한다는 것을 보장합니다. 또한 앱 아이콘을 항상 알림 아이콘으로 사용합니다. 이것은 퓨즈가 발전함에 따라 확장될 영역입니다. 구체적인 요청이 있을 경우 저희에게 알려주십시오!

메시지 크기 제한

Google과 Apple은 푸시 알림의 크기에 다른 제한을 두고 있습니다.

  • Google – 4096 바이트로 제한
  • Apple – iOS 8 이상에서는 2048 바이트로 제한되지만 모든 이전 버전에서는 256 바이트로 제한됩니다.

비고

이 모듈은 EventEmitter이므로 EventEmitter의 메서드를 사용하여 이벤트를 수신할 수 있습니다.

이 기능을 사용하려면 프로젝트 파일에서 Fuse.PushNotifications에 대한 참조를 추가해야 합니다.

안드로이드 테스트 백엔드 설정하기

이 섹션에서는 퓨즈 앱에 메시지를 보낼 수 있는 시점까지 Google 푸시 알림을 설정하는 방법에 대해 설명합니다.

선제 조건(Prerequisites)

  • 이 가이드에 따라 프로젝트에 Google Play 라이브러리를 포함하십시오.

프로젝트 만들기

  • Google 개발자 콘솔로 이동합니다.
  • ‘프로젝트 선택(Select a project)’ 드롭 다운에서 ‘프로젝트 생성(Create a project)…’을 선택하십시오.
  • 완료되면 프로젝트 선택 드롭 다운에서 프로젝트를 선택하십시오.

Push API 활성화

  • 왼쪽 사이드 바에서 API 및 인증을 펼칩니다. 그런 다음 API를 클릭하십시오.
  • API 목록에서 ‘Android 용 클라우드 메시징(Cloud Messaging for Android)’을 클릭합니다.
  • ‘API 사용(Enable API)’ 버튼을 클릭하십시오.

자격 증명 설정

  • 또한 API 키가 필요합니다. 이 과정은 성가시지만 Google에서 지정한 방법입니다.
  • Google 개발자 콘솔로 이동합니다.
  • 왼쪽 상단의 ‘Burger[버거]’메뉴를 클릭하여 오버레이 사이드 바를 엽니다.
  • ‘API 관리자[API Manager]’를 클릭하십시오.
  • 왼쪽의 정적 사이드 바에서 자격증명(Credentials)을 클릭합니다.
  • ‘자격증명 작성(Create Credentials)’을 클릭하십시오.
  • ‘API 키’를 클릭하십시오.
  • ‘Android Key’를 선택하십시오.
  • 키 이름을 입력하세요.
  • 지침에 따라 키를 생성하십시오. 시작하는 가장 쉬운 방법은 디버그 키 저장소를 사용하는 것입니다. 여기 안드로이드 문서를 확인하세요.

기본적으로 디버그 구성은 알려진 암호와 알려진 암호가 있는 기본 키가 있는 디버그 키 저장소를 사용합니다. 디버그 키 스토어는 ‘$HOME/.android/debug.keystore’에 있으며 존재하지 않을 경우 작성됩니다. 디버그 빌드 유형은 이 디버그 SigningConfig를 자동으로 사용하도록 설정됩니다.

퓨즈 프로젝트 설정하기

  • 왼쪽의 사이드 바에서 Home을 클릭하십시오.
  • 프로젝트의 ID를 적어 둡니다. 아마 Home 윈도우의 왼쪽 상단 프레임에 있을 것입니다.
  • 이 ‘Project ID’는 SenderID입니다.

이제 이 문서의 앞부분에서 시작한 퓨즈 프로젝트 파일에 해당 SenderID를 추가할 수 있습니다.

테스트 알림 보내기

앱이 시작되면 registrationSucceeded 이벤트가 발생하고 regID가 부여됩니다.

API 키와 함께 이 앱에 알림을 보내는 데 필요한 세부 정보입니다.

아래 예제는 여러분의 앱에 Google 알림을 전송하기 위한 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<JavaScript>
    var API_ACCESS_KEY = '----API KEY 하드코딩----';
    var regID = '----전송할 앱의 REG ID 하드코딩----';

    module.exports.send = function() {
        fetch('https://android.googleapis.com/gcm/send', {
            method: 'post',
            headers: {
                'Authorization': 'key=' + API_ACCESS_KEY,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                registration_ids: [regID],
                data: {
                    notification: {
                        alert: {
                            title: 'Well would ya look at that!',
                            body: 'Hello from some other app'
                        }
                    },
                    payload: 'anything you like'
                }
            })
        }).then(function(response) {
            console.log(JSON.stringify(response));
        }, function(error) {
            console.log(error);
        });
    }
</JavaScript>

RegID를 하드 코딩하는 것은 분명히 좋은 생각은 아니지만 이 간단한 테스트의 목적을 수행합니다.

iOS 테스트 백엔드 설정

이 섹션에서는 메시지를 퓨즈 앱에 보내는 것까지 iOS 푸시 알림을 설정하는 방법에 대해 설명합니다.

ACS에 대한 앱 인증

이렇게 하려면 앱용 SSL 인증서가 필요합니다.

  • Apple Dev Center로 이동하십시오.
  • iOS 앱의 인증서 섹션(Certificates Section for iOS apps)으로 이동하십시오.
  • 왼쪽의 링크 모음에서 Identifiers 섹션 아래의 App IDs를 클릭합니다.
  • 오른쪽 상단의 + 아이콘을 클릭하여 새 앱 ID를 만듭니다.
  • 세부 정보를 입력하면 와일드 카드 앱 ID(Wildcard App ID)로 푸시 알림을 사용할 수 없으므로 명시적 앱 ID(Explicit App ID)를 선택하고 Xcode에서 앱의 번들 ID(Bundle ID)를 확인합니다.
  • 앱 서비스(App Services)에서 푸시 알림(및 필요한 다른 항목)을 사용하도록 설정합니다.
  • Continue를 클릭하고 선택한 인증서 선택을 확인하십시오.

Xcode 동기화

앱이 푸시 알림에 대해 인증되었습니다. 앱을 다시 빌드하기 전에 Xcode에서 프로파일을 다시 동기화하십시오. 이것을하기 위해서 다음 지침을 따르십시오:

  • XCode 열기
  • 메뉴 바에서 Xcode -> 환경 설정(Preferences)을 선택하십시오.
  • 환경 설정 창에서 계정(Accounts) 탭을 선택합니다.
  • 계정 탭에서 관련 Apple ID에 대한 세부 정보보기(View Details)를 클릭하십시오.
  • 세부 정보보기 창의 왼쪽 아래에 있는 작은 새로고침 버튼을 클릭하십시오.

OSX에서 iOS에 푸시 알림 보내기

간단한 테스트를 위해 서버 설정을 하는건 다소 낭비라고 볼 수 있습니다. 따라서, NWPusher를 권장합니다. 여기에서 바이너리를 다운로드한 다음 README에서 다음 섹션을 따르십시오.

  • Getting started
  • Certificate
  • 디바이스 토큰(Device Token) 섹션을 읽는 대신 위의 예제를 사용자의 UX 파일에 추가하기만 하면 됩니다.
  • 마지막으로 ‘Push from OS X’ 섹션을 따라하십시오.

마쳤습니다. 이제 OS X에서 iOS로 알림을 푸시하면 됩니다.

Push의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/pushnotifications/push#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?