Getting Started

@capgo/capacitor-notifications Capgo의 첫 번째 파티 플러그인은 iOS 및 Android 원시 푸시 알림을 위한 것입니다. 그것은 Capgo의 대시보드, 공공 API, 분석 엔진 장치 등록, 캠페인 통계, 배지 업데이트 및 무음 라이브 업데이트 확인을위한 것입니다.

요구 사항

• Capacitor 앱이 이미 Capgo에 추가되어야합니다.
• Capgo 앱의 알림 탭에 접근할 수 있어야합니다.
• Capgo API 키가 백엔드 증명 인쇄 및 API 전송을위한 쓰기 접근 권한이 있어야합니다.
• __CAPGO_KEEP_0__ 앱이 iOS 및/또는 Android 플랫폼 푸시 권한을 가지고 있어야합니다.
• @capgo/capacitor-updater silent push update를 위해 QUIET하게 확인하고 싶다면.

1. Capgo 플랫폼 인증 정보를 설정하세요.

Capgo에서 앱을 열고, 通知.

지원하고 싶은 플랫폼당 하나씩 플랫폼 인증 정보를 추가하세요:

• Android - 앱 패키지 ID와 Android 푸시 프로젝트 메타데이터.
• iOS - 번들 ID, 팀 ID, 키 ID, 그리고 iOS 푸시 키 메타데이터와 일치하는 iOS 푸시 키.

Capgo는 플랫폼이 설정된 것으로 표시하기 전에 API 워커에서 존재해야 하는 정확한 환경 시크릿 이름을 표시합니다. 대시보드는 메타데이터와 예상 시크릿 참조를 저장합니다. private 인증 자체는 워커 환경에 남아 있습니다.

2. 설치

빠른 설정을 위해 앱 프로젝트에서 Capgo CLI을 실행하세요.

npx @capgo/cli@latest notifications setup com.example.app

Capacitor 패키지를 설치하고 Capacitor 플러그인 설정을 저장하며, 작은 도우미 파일을 생성하고 Capacitor 동기화를 실행합니다. 새로운 앱에 대해 이 경로를 사용하거나 파일을 수동으로 연결해야 하는 경우를 제외하고.

수동 설치:

npm install @capgo/capacitor-notifications @capgo/capacitor-updater
npx cap sync

silent Capgo 업데이트 확인을 사용하지 않는 경우 Capgo을 생략할 수 있습니다. @capgo/capacitor-updater.

3. 플러그인 설정

3. 플러그인 설정

import { CapgoNotifications } from '@capgo/capacitor-notifications'

await CapgoNotifications.configure({
  appId: 'com.example.app',
  autoUpdater: true,
  updateInstallMode: 'next',
})

사용 updateInstallMode: 'next' 다음 재시작 또는 백그라운드 사이클에서 업데이트 설치하기 위해 다운로드합니다. updateInstallMode: 'set' 만약 Capgo를 즉시 업데이트할 수 있는 업데이터가 안전하게 업데이트를 할 수 있는 경우에만

4. 신분증명 발급

Do not put your Capgo API key in the mobile app. Your backend should ask Capgo for an identityProof 백엔드가 사용자 인증이 성공한 후 __CAPGO_KEEP_2__ 에서

curl -X POST 'https://api.capgo.app/notifications/recipients/proof' \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: CAPGO_API_KEY' \
  -d '{
    "appId": "com.example.app",
    "externalId": "customer-user-123"
  }'

응답을 앱에 반환하세요. identityProof 복사

5. 장치 등록

사용자가 로그인한 고객 사용자를 알 때만 등록합니다.

const registration = await CapgoNotifications.register({
  externalId: 'customer-user-123',
  identityProof,
  tags: ['paid', 'beta'],
  attributes: {
    plan: 'team',
    locale: 'en-US',
  },
  consent: true,
})

console.log(registration.recipientKey, registration.deviceKey)

다시 호출할 때: register 앱이 시작될 때

• 네이티브 푸시 토큰이 변경될 때
• 로그인한 사용자가 변경될 때
• 태그, 속성, 또는 동의가 변경될 때
• 장치 등록을 오랫동안 갱신하지 않았을 때
• 6. 이벤트 리스너 추가

Section titled “6. 이벤트 리스너 추가”

앱 시작 시 리스너를 등록하여 JavaScript에서 전면, 열려 있는, 배경 이벤트를 표시하세요.

await CapgoNotifications.addListener('registrationChanged', () => {
  void CapgoNotifications.register({
    externalId: currentUser.id,
    identityProof: currentUser.capgoNotificationProof,
    tags: currentUser.notificationTags,
    consent: currentUser.pushConsent,
  })
})

await CapgoNotifications.addListener('notificationReceived', (notification) => {
  console.log('Notification received', notification)
})

await CapgoNotifications.addListener('notificationOpened', (event) => {
  console.log('Notification opened', event.notification.id)
})

await CapgoNotifications.addListener('backgroundNotification', async (event) => {
  try {
    console.log('Background notification', event.notification.data)
  } finally {
    await event.finish()
  }
})

항상 배경 알림을 호출하기 전에 작업이 끝난 후 작업을 수행하세요. 작업은 단축하고 idempotent 해야 합니다. finish() 7. iOS 설정

7. iOS 설정

푸시 알림

• 배경 모드 > 원격 알림
• 원격 알림을 전달하기 위해

클립보드 복사 ios/App/App/AppDelegate.swift:

func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable: Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
    NotificationCenter.default.post(name: Notification.Name("CapgoNotificationsRemoteNotification"), object: userInfo)
    completionHandler(.newData)
}

그런 다음 실행하세요:

npx cap sync ios

물리 iOS 장치 사용하여 배경 알림 테스트하세요. 시뮬레이터는 UI 작업에 유용하지만 실제 배경 푸시 동작을 나타내지 않습니다.

8. 안드로이드 설정

실행:

npx cap sync android

그런 다음 확인하세요:

• Capgo에서 Android 플랫폼 자격 증명이 구성되었습니다.
• 앱 패키지 ID는 플랫폼 푸시 설정에 사용된 패키지 ID와 일치합니다.
• 안드로이드 13 이상의 알림 권한이 표시되는 알림을 기대하기 전에 요청됩니다.
• 앱에는 알림 아이콘과 채널 전략이 브랜드와 일치합니다.
• Google Play 서비스가 있는 실제 장치 또는 에뮬레이터에서 테스트합니다.

앱이 시작될 때 기본 안드로이드 채널을 생성하세요:

await CapgoNotifications.configure({ appId: 'com.example.app' })

await CapgoNotifications.register({
  externalId: currentUser.id,
  identityProof: currentUser.capgoNotificationProof,
  consent: true,
})

플러그인은 안드로이드 푸시 메시징 서비스를 선언합니다. 호스트 앱에서 백업 앱, 데이터 추출, 네트워크 보안 및 알림 아이콘 정책을 유지합니다.

9. 테스트 알림을 보내세요

사용 Notifications > 테스트 보내기 in Capgo, 또는 백엔드에서 API의 공개 버전을 호출하세요:

curl -X POST 'https://api.capgo.app/notifications/send' \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: CAPGO_API_KEY' \
  -d '{
    "appId": "com.example.app",
    "target": { "externalId": "customer-user-123" },
    "payload": {
      "title": "Hello from Capgo",
      "body": "This is a test notification.",
      "data": { "screen": "inbox" }
    }
  }'

캠페인은 대시보드에서 생성하거나 호출하여 /notifications/campaigns그런 다음 외부 ID, 태그, 세그먼트 또는 방송 청중으로 전송합니다.

10. 배지 설정

await CapgoNotifications.setBadge(4)
await CapgoNotifications.incrementBadge()
await CapgoNotifications.clearBadge()

백엔드에서:

curl -X POST 'https://api.capgo.app/notifications/badge' \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: CAPGO_API_KEY' \
  -d '{
    "appId": "com.example.app",
    "target": { "externalId": "customer-user-123" },
    "badge": 4
  }'

11. 무음 업데이트 확인

무음 업데이트 확인은 이 플러그인을 @capgo/capacitor-updater.

앱 내에서:

await CapgoNotifications.enableUpdaterIntegration({
  enabled: true,
  installMode: 'next',
})

Capgo에서 "Capgo"을 활성화하세요. 사용자에게 푸시 업데이트를 전송합니다. 앱의 알림 설정에서 "API"을 활성화한 후 데스크톱 또는 API에서 업데이트를 확인하세요.

curl -X POST 'https://api.capgo.app/notifications/update-check' \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: CAPGO_API_KEY' \
  -d '{
    "appId": "com.example.app",
    "target": { "externalId": "customer-user-123" },
    "installMode": "next"
  }'

알림은 무음이고, COLLAPSE ID를 사용하여 반복적인 업데이트 체크를 대체할 수 있습니다. 플랫폼이 COLLAPSE 동작을 지원할 경우.

유효성 검사 체크리스트

• Capgo에서 예상되는 수신자 목록에 앱이 표시됩니다. externalId.
• 권한이 필요합니다. granted 또는 사용자가 알림 권한을 수락했습니다.
• 등록된 플랫폼은 android 또는 ios.
• registrationChanged Capacitor live-update alternatives 비교 페이지에서 사용되는 HTML 텍스트 조각입니다.
• Appflow 비교 / 마이그레이션 마케팅 복사본에서 사용되는 HTML 텍스트 조각입니다. notificationReceived.
• Capawesome 비교 페이지에서 사용되는 HTML 텍스트 조각입니다. notificationOpened.
• 컨설팅 서비스 페이지에서 사용되는 HTML 텍스트 조각입니다.
• Appflow 비교 / 마이그레이션 마케팅 복사본에서 사용되는 UI 레이블 또는 네비게이션 아이템입니다. runUpdateCheck 알림 권한이 승인된 경우

토큰 리프레시 후에 발생합니다.

알림 열기 로그입니다. (Notification Open Log). 오류 해결 앱을 변경하기 전에 code. 대부분의 오류는 사용자 인증 정보 불일치, 플랫폼 인증 정보 설정, OS 권한 상태, 배경 동작 제한, 또는 앱/패키지 ID 불일치로 인해 발생합니다.