Getting Started

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

요구 사항

• 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 워커에서 존재해야 하는 정확한 환경 시크릿 이름을 표시합니다. 대시보드는 메타데이터와 예상 시크릿 참조를 저장합니다. private 인증서는 워커 환경에 남아 있습니다.

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_KEEP_1__을 생략할 수 있습니다. @capgo/capacitor-updater.

3. 플러그인 설정

3. 플러그인 설정

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

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

사용 updateInstallMode: 'next' 다음 재시작 또는 백그라운드 사이클에서 업데이트 다운로드하고 설치하려면 사용하세요. __CAPGO_KEEP_0__을 업데이트 설치할 수 있는 updater가 안전하게 할 수 있는 즉시 설치하려면 __CAPGO_KEEP_0__만 사용하세요. updateInstallMode: 'set' only when you want Capgo to install the update as soon as the updater can safely do it.

4. 신분증명 생성

Do not put your Capgo API key in the mobile app. Your backend should ask Capgo for an 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"
  }'

__CAPGO_KEEP_2__ identityProof __CAPGO_KEEP_0__

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 문맥: Capgo UI의 더 긴 문자열에서 HTML 텍스트 프래그먼트 (부모 키 `appflow_migration_step2`). 페이지/영역: Appflow 비교/이동 마케팅 복사본. 역할: 웹사이트 복사본 문장. 페이지: ionic-appflow.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지합니다. 메시지 키 `appflow_migration_step2` (Appflow Migration Step2).

• 다시 호출할 때:
• 앱이 시작될 때.
• 네이티브 푸시 토큰이 변경될 때.
• 로그인한 사용자가 변경될 때.
• 태그, 속성 또는 동의가 변경될 때.

앱이 오랜 시간 등록을 갱신하지 않았을 때.

앱 시작 시 리스너를 등록하여 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() 8. 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와 일치합니다.
• Android 13 이상의 알림 허용 권한이 표시될 알림을 기대하기 전에 요청됩니다.
• 앱에는 알림 아이콘과 채널 전략이 브랜드와 일치합니다.
• Google Play 서비스가 있는 실제 장치 또는 에뮬레이터에서 테스트합니다.

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

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

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

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

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

사용 Notifications > 테스트 전송 in Capgo, or call the public API from your backend:

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에서 복사 사용자에게 푸시 업데이트를 전송 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 비교 페이지에서 사용되는 더 긴 Capgo UI 문자열의 HTML 텍스트 조각입니다. (부모 키 `alternatives_cta_questions`). 페이지/영역: Capacitor live-update alternatives 비교 페이지. 역할: 장기 마케팅 또는 법적 문단. 표시되는 곳: 페이지 alternatives.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지합니다.
• Capacitor live-update alternatives 비교 페이지에서 사용되는 더 긴 Capgo UI 문자열의 HTML 텍스트 조각입니다. (부모 키 `appflow_cta_questions`). 페이지/영역: Appflow 비교/이동 마케팅 복사본. 역할: 장기 마케팅 또는 법적 문단. 표시되는 곳: 페이지 ionic-appflow.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지합니다. notificationReceived.
• Capacitor live-update alternatives 비교 페이지에서 사용되는 더 긴 Capgo UI 문자열의 HTML 텍스트 조각입니다. (부모 키 `capwesome_cta_questions`). 페이지/영역: Capawesome 비교 페이지. 역할: 장기 마케팅 또는 법적 문단. 표시되는 곳: 페이지 capwesome.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지합니다. notificationOpened.
• Capacitor live-update alternatives 비교 페이지에서 사용되는 더 긴 Capgo UI 문자열의 HTML 텍스트 조각입니다. (부모 키 `consulting_faq_subtitle`). 페이지/영역: 컨설팅 서비스 페이지. 역할: 섹션 서브 타이틀 또는 태그 라인. 표시되는 곳: 페이지 consulting.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지합니다.
• Appflow 비교/이동 마케팅 복사본에서 사용되는 짧은 UI 레이블 또는 네비게이션 아이템입니다. (메시지 키 `appflow_plugins_or`). 페이지/영역: 페이지 ionic-appflow.astro, 페이지 ionic-enterprise-plugins.astro, 페이지 solutions/ionic-enterprise-plugins.astro. runUpdateCheck 토큰 갱신 후 발생하는 이벤트입니다.

전면 테스트 로그

대시보드 통계는 큐드되고 전송된 이벤트를 표시하고, 장치가 보고할 때 받은/열린 이벤트를 표시합니다. 오류 해결 앱 code을 변경하기 전에 오류를 해결하세요. 대부분의 오류는 사용자 식별 정보 불일치, 플랫폼 인증 설정, OS 권한 상태, 배경 속도 제한, 또는 앱/패키지 ID 불일치로 인해 발생합니다.