Getting Started

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

요구 사항

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

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

Capgo에서 앱을 열고 通知.

지원하고자 하는 플랫폼당 하나의 플랫폼 인증서 항목을 추가하세요:

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

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

2. 설치

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

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

알림 패키지를 설치하고 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을 업데이트 설치할 수 있는 updater가 안전하게 할 수 있는 즉시 설치하도록 하려면

4. 신분증명 발급

Capgo API 키를 모바일 앱에 넣지 마십시오. 백엔드가 사용자 인증이 성공한 후 Capgo에서 identityProof 터미널 창

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 __CAPGO_KEEP_1__

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. 이벤트 리스너 추가

Copy to clipboard

앱 시작 시 리스너를 등록하여 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 설정

푸시 알림

• 배경 모드 > Remote notifications
• remote notifications

클립보드 복사 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

그런 다음 확인하세요:

• Android 플랫폼 인증서는 Capgo에 구성되어 있습니다.
• 앱 패키지 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"
  }'

알림은 무음이고, 재귀 ID를 사용하여 반복적인 업데이트 확인이 동일한 ID를 사용할 때 다른 업데이트 확인을 대체합니다.

유효성 검사 목록

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

전면 테스트 로그.

대시보드 통계에서 큐드되고 전송된 이벤트, 그리고 장치가 보고한 것과 일치하는 받은/열린 이벤트를 표시합니다. 디버깅 앱을 변경하기 전에 code. 대부분의 오류는 사용자 인증 정보 불일치, 플랫폼 인증 정보 설정, OS 권한 상태, 배경 동작 제한, 또는 앱/패키지 ID 불일치로 인해 발생합니다.