설명서
Capacitor에서 Live 활동 사용하는 방법
capgo/capacitor-live-activities를 사용하는 방법
Capacitor Live 활동 플러그인: iOS Live 활동을 관리하는 인터페이스
설치
bun add @capgo/capacitor-live-activities
bunx cap sync
iOS 설정
플러그인을 설치하고 동기화하는 것은 네이티브 Live 활동 UI를 생성하지 않습니다. Live 활동을 호출하기 전에 startActivityconfigure ActivityKit in Xcode:
- 실행
bunx cap open ios. - Add a 위젯 확장 목표를 설정하고 활성화 Live 활동을 포함.
- 앱 및 Widget Extension 배포 목표를 iOS 16.1 이상으로 설정하세요.
- 확장자가 메인 앱에 포함되어 있는지 확인하세요.
- Keep an
ActivityConfiguration확장자가 등록되어WidgetBundleLock Screen 및 모든 Dynamic Island 발표와 함께 - 메인 앱 목표에 추가
NSSupportsLiveActivities메인 앱 목표의Info.plist.
<key>NSSupportsLiveActivities</key>
<true/>
타겟만 추가하는 것은 충분하지 않습니다. native 앱 또는 플러그인은 ActivityKit의 request, update, end API를 호출해야 합니다. Widget Extension에는 SwiftUI code가 포함되어 있어 JSON 레이아웃을 디코딩하고 렌더링할 수 있어야 합니다. ActivityAttributes 그리고 콘텐츠 상태를 사용하는 호출에 포함되어야 합니다. main 앱과 Widget Extension 목표에 공유 ActivityKit 모델을 포함하세요. Xcode가 생성한 Live Activity 템플릿은 자동으로 이 플러그인에 전달된 JSON 레이아웃을 렌더링하지 않습니다; 확장도 호환되는 네이티브 레이아웃 렌더러가 필요합니다.
공유된 이미지
이미지 관리 메서드를 사용할 때에는 App 그룹 main 앱과 Widget Extension 목표에 App 그룹 기능을 추가하세요. 동일한 그룹을 두 목표에서 동일한 식별자로 활성화하세요:
group.<MAIN_APP_BUNDLE_ID>.liveactivities
Live Activity 확장자는 네트워크에 접근할 수 없습니다. remote 이미지를 main 앱에서 다운로드하고 App 그룹에 저장한 후 레이아웃에서 저장된 이미지를 참조하세요. 배포된 자산도 Widget Extension 목표에 속해야 합니다. saveImage깊이 링크 및 푸시 업데이트
Register any custom URL scheme used by
- 또는
behavior.widgetUrlortapUrlAppflow 플러그인 Info > URL 종류 설정. - 서버에서 업데이트를 위해 다음을 추가하세요. 푸시 알림 역할: 푸시 알림. 메시지 키 `push_notifications` (Push Notifications).
- Add
NSSupportsLiveActivitiesFrequentUpdates푸시 알림 기능만 활성화하는 것은 충분하지 않습니다. 서버에서 업데이트를 위해 native 토큰 처리와 APNs 백엔드가 필요합니다.
액티비티킷은 정적 및 동적 라이브 액티비티 데이터의 총 크기를 4 KB로 제한합니다. 동적 아일랜드는 지원되는 장치 모델에서만 표시됩니다. 다른 장치에서는 Lock Screen 표시를 사용합니다.
이 플러그인이 노출하는 것
- 이 장치에서 라이브 액티비티가 지원되는지 확인합니다. iOS 16.1+ 및 장치 지원이 필요합니다.
areActivitiesSupported- 지정된 레이아웃과 데이터로 새로운 라이브 액티비티를 시작합니다.startActivity설정.updateActivity- 기존 Live 활동에 새로운 데이터를 업데이트합니다.endActivity- Live 활동을 종료합니다.
예시 사용
areActivitiesSupported
이 장치에서 Live 활동이 지원되는지 확인합니다. 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 활동을 시작합니다. 지정된 레이아웃과 데이터와 함께.
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 활동에 새로운 데이터를 업데이트합니다.
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 활동을 종료합니다.
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/Capgo/capacitor-live-activities/
- 문서: /docs/plugins/live-activities/
Using @capgo/capacitor-live-activities
Capacitor Live Activities를 사용 중이라면 Using @capgo/capacitor-live-activities Capacitor Live Activities를 사용하여 @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Capacitor Live Activities의 구현 세부 정보를 참조하세요. Capacitor Live Activities를 사용하여 Using @capgo/capacitor-video-player native 기능을 위한 @capgo/capacitor-video-player를 사용하세요. @capgo/capacitor-video-player for capgo capacitor-video-player 구현 세부사항에 대해 @capgo/capacitor-자연스러운 네비게이션 Capgo의 @capgo/capacitor-native-navigation 기능을 사용하는 데 필요한 것입니다.