안내
라이브 액티비티 튜토리얼
Using @capgo/capacitor-live-activities
Capacitor Live Activities Plugin interface for managing iOS Live Activities.
iOS 설정
bun add @capgo/capacitor-live-activities
bunx cap sync
플러그인을 설치하고 동기화하는 것은 네이티브 라이브 액티비티 UI를 생성하지 않습니다.
__CAPGO_KEEP_0__ Live Activities Plugin을 사용하기 전에 startActivityconfigure ActivityKit in Xcode:
- 실행
bunx cap open ios. - Add a Widget Extension 목표를 설정하고 Live 활동 포함.
- 설정 앱과 Widget Extension 배포 대상이 iOS 16.1 이상이어야 합니다.
- 확장 프로그램이 앱의 주요 부분에 포함되어 있어야 합니다.
- 등록된
ActivityConfiguration등록된 확장 프로그램의WidgetBundle, Lock Screen 및 모든 Dynamic Island 발표와 함께. - 추가
NSSupportsLiveActivitiesmain 앱의 대상Info.plist.
<key>NSSupportsLiveActivities</key>
<true/>
대상만 추가하는 것은 충분하지 않습니다. Native 앱 또는 플러그인은 ActivityKit의 request, update, 및 end API를 호출해야 합니다. Widget Extension에는 SwiftUI code가 포함되어 있어 JSON 레이아웃을 디코딩하고 렌더링할 수 있어야 합니다. ActivityAttributes 공유된 이미지
이미지 관리 메서드를 사용할 때는
App Groups main 앱과 Widget Extension 대상에 모두 App Groups 기능을 추가해야 합니다. 동일한 그룹을 두 대상에 모두 사용하려면 다음 exact identifier를 사용해야 합니다: Live Activity 확장 프로그램은 네트워크에 접근할 수 없습니다. Remote 이미지를 다운로드하려면 main 앱에서 다운로드하고 App Group에 저장한 후 Widget Extension에서 저장된 이미지를 참조해야 합니다. Widget Extension 대상에 포함된 자산도 Widget Extension 대상에 속해야 합니다.
group.<MAIN_APP_BUNDLE_ID>.liveactivities
Deep Links 및 Push Updates saveImageRegister any custom URL scheme used by
또는
- 대안을 선택하는 경우
behavior.widgetUrl대안을 선택하는 경우tapUrl이 앱의 주 타겟 하위에 정보 > URL 유형 설정. - 서버에서 업데이트를 위해 다음을 추가하세요. 푸시 알림 페이지/영역: Capgo 마케팅 웹사이트. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 메시지 키 `push_notifications` (푸시 알림).
- 푸시 알림 기능과 APNs를 사용하는 ActivityKit 푸시 토큰 처리를 implement하세요.
NSSupportsLiveActivitiesFrequentUpdates추가
만 앱이 자주 ActivityKit 푸시 업데이트를 필요로 할 때만.
푸시 알림 기능만 활성화하는 것은 충분하지 않습니다; 서버에서 업데이트를 위해 native 토큰 처리와 APNs 백엔드가 필요합니다.
ActivityKit은 동적 라이브 활동 데이터의 정적 및 동적 데이터를 4 KB까지 제한합니다. 동적 아일랜드는 지원되는 장치 모델에서만 표시되며, 다른 장치에서는 Lock Screen 표시를 사용합니다.
areActivitiesSupported이 플러그인이 노출하는 것startActivity- Live Activity를 새로 시작합니다.updateActivity- 기존의 Live Activity를 새로운 데이터로 업데이트합니다.endActivity- Live Activity를 종료합니다.
예시 사용
areActivitiesSupported
이 장치에서 Live Activity가 지원되는지 확인합니다. 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
- Live Activity를 새로 시작합니다.
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
- 기존의 Live Activity를 새로운 데이터로 업데이트합니다.
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
- Live Activity를 종료합니다.
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/
Using @capgo/capacitor-live-activities
만약에 Using @capgo/capacitor-live-activities native 미디어와 인터페이스 동작을 계획하기 위해 @capgo/capacitor-live-activities @capgo/capacitor-live-activities Implementation Getting Started Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, Using @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.