Capacitor SDK 기본 통합 가이드

이 섹션에서는 Pushwoosh Capacitor SDK를 애플리케이션에 통합하는 방법에 대한 정보를 제공합니다.

사전 요구 사항

Pushwoosh Capacitor SDK를 앱에 통합하려면 다음이 필요합니다:

요구 사항

• Pushwoosh 계정.
• 계정에 설정된 Pushwoosh 프로젝트.
• iOS 통합의 경우:
  • 푸시 알림을 보내도록 구성된 iOS 플랫폼. 가장 간단한 접근 방식으로 토큰 기반 인증 구성을 사용하는 것을 권장합니다.
  • 시뮬레이터로 푸시를 보내려면 Gateway를 Sandbox로 설정하세요.
• Android 통합의 경우:
  • 구성된 Android 플랫폼
  • Firebase 프로젝트의 google-services.json 파일 및 package name.
  • Android 애플리케이션에 연결된 Firebase 프로젝트. 필요한 경우 Firebase 설정 가이드를 따르세요.
• 애플리케이션의 Pushwoosh 제어판에서 받은 Pushwoosh Application Code 및 Pushwoosh Device API Token.

통합 단계

1. Pushwoosh Capacitor SDK 종속성 추가

프로젝트에 Pushwoosh Capacitor SDK 종속성을 추가합니다:

npm install pushwoosh-capacitor-plugin

Capacitor 구성을 동기화합니다:

npx cap sync

2. Capacitor SDK 초기화

메인 JavaScript 파일에서 Pushwoosh SDK를 가져와 초기화합니다:

index.js

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Initialize the SDK
Pushwoosh.onDeviceReady({
    appid: "__YOUR_APP_CODE__"
});

// Register for push notifications
Pushwoosh.registerDevice()
    .then(result => {
        console.log("Push token:", result.pushToken);
        // Handle successful registration
    })
    .catch(error => {
        console.error("Failed to register device:", error);
        // Handle registration error
    });

여기서:

• __YOUR_APP_CODE__는 Pushwoosh 제어판의 애플리케이션 코드입니다.

3. iOS 네이티브 설정

3.1 기능(Capabilities)

프로젝트에서 푸시 알림을 활성화하려면 특정 기능을 추가해야 합니다.

Signing & Capabilities 섹션에서 다음 기능을 추가합니다:

• Push Notifications
• Background Modes. 이 기능을 추가한 후 Remote notifications 확인란을 선택합니다.

Time Sensitive Notifications(iOS 15 이상)를 사용하려는 경우 Time Sensitive Notifications 기능도 추가합니다.

3.2 Info.plist

Runner/Info.plist에서 __PUSHWOOSH_DEVICE_API_TOKEN__ 키를 Pushwoosh Device API Token으로 설정합니다:

info.plist

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 메시지 전송 추적

프로젝트에 Notification Service Extension 타겟을 추가해야 합니다. 이는 정확한 전송 추적 및 iOS의 Rich Media와 같은 기능에 필수적입니다.

확장 타겟과 그 안에 필요한 Pushwoosh 코드를 추가하려면 네이티브 가이드의 단계를 따르세요.

4. Android 네이티브 설정

4.1 종속성 설치

필요한 종속성과 플러그인이 Gradle 스크립트에 추가되었는지 확인합니다:

프로젝트 수준의 build.gradle 종속성에 Google Services Gradle 플러그인을 추가합니다:

android/build.gradle

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

앱 수준의 build.gradle 파일에 플러그인을 적용합니다:

app/build.gradle

apply plugin: 'com.google.gms.google-services'

4.2 Firebase 구성 파일 추가

프로젝트 디렉토리의 android/app 폴더에 google-services.json 파일을 넣습니다.

4.3 Pushwoosh 메타데이터 추가

main/AndroidManifest.xml의 <application> 태그 안에 Pushwoosh Device API Token을 추가합니다:

AndroidManifest.xml

<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />

중요: Pushwoosh 제어판에서 토큰이 올바른 앱에 액세스할 수 있도록 하세요. 자세히 알아보기

5. 프로젝트 실행

1. 프로젝트를 빌드하고 실행합니다.
2. Pushwoosh 제어판으로 이동하여 푸시 알림을 보냅니다.
3. 앱에서 알림을 볼 수 있습니다.

확장 통합

이 단계에서는 이미 SDK를 통합하여 푸시 알림을 보내고 받을 수 있습니다. 이제 핵심 기능을 살펴보겠습니다.

푸시 알림 이벤트 리스너

Pushwoosh Capacitor SDK에는 푸시 알림을 처리하기 위한 두 가지 콜백 메서드가 있습니다:

• pushReceivedCallback은 푸시 알림을 수신할 때 트리거됩니다.
• pushOpenedCallback은 사용자가 알림을 열 때 트리거됩니다.

SDK 초기화 직후에 이러한 콜백을 설정해야 합니다:

index.js

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Set up push received callback
await Pushwoosh.pushReceivedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process received notification:", err);
    } else {
        console.log("Push received:", JSON.stringify(notification));
        // Handle the received notification
    }
});

// Set up push opened callback
await Pushwoosh.pushOpenedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process opened notification:", err);
    } else {
        console.log("Push opened:", JSON.stringify(notification));
        // Handle the opened notification
    }
});

사용자 구성

개별 사용자 행동 및 선호도에 초점을 맞춤으로써 개인화된 콘텐츠를 제공하여 사용자 만족도와 충성도를 높일 수 있습니다.

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class Registration {
  async afterUserLogin(user) {

    // Set user ID
    Pushwoosh.setUserId(user.getId);

    // Setting additional user information as tags for Pushwoosh
    await Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

태그

태그는 사용자나 기기에 할당된 키-값 쌍으로, 선호도나 행동과 같은 속성을 기반으로 세분화를 가능하게 하여 타겟 메시징을 할 수 있습니다.

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class UpdateUser {
 async afterUserUpdateProfile(user) {

    // Set list of favorite categories
    await Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    await Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

이벤트

이벤트는 앱 내에서 발생하는 특정 사용자 행동이나 사건으로, 행동을 분석하고 해당 메시지나 작업을 트리거하기 위해 추적할 수 있습니다.

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class Registration {

  // Track login event
  afterUserLogin(user) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Track purchase event
  afterUserPurchase(product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

문제 해결

통합 과정에서 문제가 발생하면 지원 및 커뮤니티 섹션을 참조하세요.