@capgo/capacitor-live-activities 사용 방법

Capacitor 라이브 활동 플러그인: iOS 라이브 활동 관리를 위한 인터페이스.

설치

bun add @capgo/capacitor-live-activities
bunx cap sync

iOS 설정

설치 및 플러그인을 동기화하는 것은 네이티브 라이브 액티비티 UI를 생성하지 않습니다. 라이브 액티비티를 호출하기 전에 startActivity, Xcode에서 ActivityKit을 구성하십시오.

실행 bunx cap open ios.
Add a 위젯 확장 대상과 Include Live Activity.
앱과 위젯 확장 배포 대상의 iOS 버전을 16.1 이상으로 설정하십시오.
확장 프로그램이 앱에 포함되어 있는지 확인하십시오.
Keep an ActivityConfiguration 등록된 확장 프로그램에 WidgetBundleLock Screen과 모든 Dynamic Island 표시를 포함합니다.
추가 NSSupportsLiveActivities 주 앱 대상에 추가하세요. Info.plist.

<key>NSSupportsLiveActivities</key>
<true/>

대상만 추가하는 것은 충분하지 않습니다. Native 앱 또는 플러그인은 ActivityKit의 request, update, 및 end API를 호출해야 합니다. 위젯 확장에는 Dynamic Island 표시를 렌더링할 수 있는 SwiftUI code가 포함되어야 합니다. 또한 위젯 확장에서 사용하는 동일한 콘텐츠 상태를 렌더링할 수 있어야 합니다. 주 앱과 위젯 확장 대상 모두에 공유된 ActivityKit 모델을 포함해야 합니다. Xcode가 생성한 Live Activity 템플릿은 자동으로 이 플러그인에 전달된 JSON 레이아웃을 렌더링하지 않습니다. 위젯 확장도 호환 가능한 Native 레이아웃 렌더러가 필요합니다. ActivityAttributes 공유 이미지

이미지 관리 메서드를 사용할 때, 주 앱과 위젯 확장 대상에 공유 이미지 그룹 기능을 추가하세요. 동일한 그룹을 두 대상 모두에 동일한 식별자로 활성화하세요.

Live Activity 확장은 네트워크에 접근할 수 없습니다. 원격 이미지를 다운로드하여 주 앱에서 저장한 후, 위젯 확장에서 저장된 이미지를 레이아웃에서 참조하세요. 위젯 확장 대상에 속한 패키지 자산도 동일합니다. 깊이 링크 및 푸시 업데이트 추가

group.<MAIN_APP_BUNDLE_ID>.liveactivities

주 앱 대상에 추가하세요. saveImage대상만 추가하는 것은 충분하지 않습니다. Native 앱 또는 플러그인은 ActivityKit의 request, update, 및 end API를 호출해야 합니다. 위젯 확장에는 Dynamic Island 표시를 렌더링할 수 있는 SwiftUI __CAPGO_KEEP_0__가 포함되어야 합니다. 또한 위젯 확장에서 사용하는 동일한 콘텐츠 상태를 렌더링할 수 있어야 합니다. 주 앱과 위젯 확장 대상 모두에 공유된 ActivityKit 모델을 포함해야 합니다. Xcode가 생성한 Live Activity 템플릿은 자동으로 이 플러그인에 전달된 JSON 레이아웃을 렌더링하지 않습니다. 위젯 확장도 호환 가능한 Native 레이아웃 렌더러가 필요합니다.

공유 이미지 그룹 기능을 추가하세요. 주 앱과 위젯 확장 대상에 공유 이미지 그룹 기능을 추가하세요. 동일한 그룹을 두 대상 모두에 동일한 식별자로 활성화하세요. Live Activity 확장은 네트워크에 접근할 수 없습니다. 원격 이미지를 다운로드하여 주 앱에서 저장한 후, 위젯 확장에서 저장된 이미지를 레이아웃에서 참조하세요. 위젯 확장 대상에 속한 패키지 자산도 동일합니다. 깊이 링크 및 푸시 업데이트

__CAPGO_KEEP_0__ URL 스키마를 사용하는 모든 커스텀 URL 스키마를 등록합니다. behavior.widgetUrl __CAPGO_KEEP_1__ 또는 __CAPGO_KEEP_0__의 tapUrl 설정에서 Info > URL Types를 클릭합니다. 서버에서 업데이트를 처리하려면 Push Notifications 기능을 추가하고 APNs를 사용하여 ActivityKit 푸시 토큰 처리를 구현해야 합니다. __CAPGO_KEEP_2__는 앱이 자주 ActivityKit 푸시 업데이트를 필요로 할 때만 추가합니다.
Push Notifications 기능만 활성화하는 것은 충분하지 않습니다. 서버에서 업데이트를 처리하려면 native 토큰 처리와 APNs 백엔드가 필요합니다. ActivityKit는 동적 Live Activity 데이터와 정적 데이터의 합계 크기를 4 KB로 제한합니다. 동적 섬은 지원되는 기기 모델에서만 표시됩니다. 다른 기기는 Lock Screen 프레젠테이션을 사용합니다. __CAPGO_KEEP_0__
__CAPGO_KEEP_1__ NSSupportsLiveActivitiesFrequentUpdates __CAPGO_KEEP_2__

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

이 플러그인은 노출합니다.

areActivitiesSupported - 이 장치에서 라이브 활동이 지원되는지 확인합니다. iOS 16.1+ 및 장치 지원이 필요합니다.
startActivity - 지정된 레이아웃과 데이터와 함께 새로운 라이브 활동을 시작합니다.
updateActivity - 기존 라이브 활동에 새로운 데이터를 업데이트합니다.
endActivity - 라이브 활동을 종료합니다.

예시 사용

`areActivitiesSupported`

이 장치에서 라이브 활동이 지원되는지 확인합니다. iOS 16.1+ 및 장치 지원이 필요합니다.

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

const { supported, reason } = await CapgoLiveActivities.areActivitiesSupported();
if (supported) {
  console.log('Live Activities are supported!');
} else {
  console.log('Not supported:', reason);
}

`startActivity`

지정된 레이아웃과 데이터와 함께 새로운 라이브 활동을 시작합니다.

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

const { activityId } = await CapgoLiveActivities.startActivity({
  layout: {
    type: 'container',
    direction: 'horizontal',
    children: [
      { type: 'text', content: 'Order #{{orderNumber}}', fontSize: 16, fontWeight: 'bold' },
      { type: 'text', content: '{{status}}', fontSize: 14, color: '#666666' }
    ]
  },
  dynamicIslandLayout: {
    expanded: {
      leading: { type: 'image', source: 'sfSymbol', value: 'box.truck' },
      trailing: { type: 'text', content: '{{eta}}' },
      center: { type: 'text', content: '{{status}}' },
      bottom: { type: 'progress', value: 'progress' }
    },
    compactLeading: { type: 'image', source: 'sfSymbol', value: 'box.truck' },
    compactTrailing: { type: 'text', content: '{{eta}}' },
    minimal: { type: 'image', source: 'sfSymbol', value: 'box.truck' }
  },
  data: {
    orderNumber: '12345',
    status: 'On the way',
    eta: '10 min',
    progress: 0.6
  }
});
console.log('Started activity:', activityId);

`updateActivity`

기존 라이브 활동에 새로운 데이터를 업데이트합니다.

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

await CapgoLiveActivities.updateActivity({
  activityId: 'abc123',
  data: {
    status: 'Arrived!',
    eta: 'Now',
    progress: 1.0
  },
  alertConfiguration: {
    title: 'Delivery Update',
    body: 'Your order has arrived!'
  }
});

`endActivity`

라이브 활동을 종료합니다.

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

await CapgoLiveActivities.endActivity({
  activityId: 'abc123',
  data: { status: 'Delivered' },
  dismissalPolicy: 'after',
  dismissAfter: Date.now() + 3600000 // 1 hour from now
});

전체 참조

GitHub: https://github.com/Cap-go/capacitor-live-activities/
문서: /docs/plugins/live-activities/

capgo에서 capacitor-live-activities를 계속 사용하세요.

__CAPGO_KEEP_0__을 사용 중이라면 capgo/capacitor-live-activities를 사용하여 자연스러운 미디어 및 인터페이스 동작을 계획하고 capgo/capacitor-live-activities와 연결하세요. capgo/capacitor-live-activities의 구현 세부 정보를 참조하세요. 시작하기 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities의 구현 세부 정보를 참조하세요. capgo/capacitor-video-player를 사용하여 capgo/capacitor-video-player의 네이티브 기능을 사용하세요. @capgo/capacitor-video-player implementation 세부 사항을 @capgo/capacitor-video-player 에서 확인하세요. Using @capgo/capacitor-native-navigation native 기능을 사용하기 위해 @capgo/capacitor-native-navigation을 사용하세요.

실시간 활동

라이브 활동에 대한 튜토리얼