라이브 활동을 위한 @capgo/capacitor

Capacitor 라이브 활동 플러그인

설치

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

iOS 설정

플러그인을 설치하고 동기화하면 네이티브 라이브 활동 UI가 생성되지 않습니다. ActivityKit을 Xcode에서 구성하기 전에 startActivity실행

__CAPGO_KEEP_0__ bunx cap open ios.
iOS 16.1 이상의 버전으로 설정하세요. Widget Extension 대상과 활성화 실시간 활동 포함.
iOS 16.1 이상의 버전으로 앱과 Widget Extension 배포 대상 설정하세요.
확장자가 메인 앱에 포함되어야 합니다.
등록된 ActivityConfiguration 확장자의 WidgetBundle, Lock Screen 및 모든 Dynamic Island 표시와 함께.
메인 앱 대상의 NSSupportsLiveActivities 대상만 추가하는 것은 충분하지 않습니다. Native 앱 또는 플러그인은 ActivityKit의 request, update, end API를 호출해야 합니다. Widget Extension에는 SwiftUI __CAPGO_KEEP_0__가 포함되어 있어야 하며, 실시간 활동을 디코딩하고 렌더링할 수 있어야 합니다. Info.plist.

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

Adding the target alone is not sufficient. The native app or plugin must call ActivityKit's request, update, and end APIs. The Widget Extension must contain SwiftUI code that can decode and render the same ActivityAttributes 그것을 사용하는 모든 호출에 사용되는 콘텐츠 상태를 포함하십시오. 메인 앱과 위젯 확장 대상 모두에 공유된 ActivityKit 모델을 포함하십시오. Xcode가 생성한 Live Activity 템플릿은 자동으로 이 플러그인에 전달된 JSON 레이아웃을 렌더링하지 않으며 확장도 호환 가능한 네이티브 레이아웃 렌더러가 필요합니다.

공유된 이미지

이미지 관리 메서드를 사용할 때 다음을 추가하십시오. 앱 그룹 메인 앱과 위젯 확장 대상 모두에 앱 그룹 기능을 추가하십시오. 동일한 그룹을 두 대상 모두에서 다음 식별자와 동일한 이름으로 활성화하십시오:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Live Activity 확장은 네트워크에 접근할 수 없습니다. 메인 앱에서远程 이미지를 다운로드하고 그 이미지를 공유된 앱 그룹에 저장한 다음 레이아웃에서 저장된 이미지를 참조하십시오. 배포된 자산도 위젯 확장 대상에 속해야 합니다. saveImage깊이 링크 및 푸시 업데이트

사용하는 모든 커스텀 URL 스키마를 등록하십시오.

또는 behavior.widgetUrl HTML 텍스트 조각 tapUrl 네트워크에 접근할 수 없습니다. 메인 앱에서远程 이미지를 다운로드하고 그 이미지를 공유된 앱 그룹에 저장한 다음 레이아웃에서 저장된 이미지를 참조하십시오. 배포된 자산도 위젯 확장 대상에 속해야 합니다. URL 타입 설정.
서버에서 업데이트를 위해 다음을 추가하세요. 푸시 알림 푸시 알림 기능과 APNs를 사용하는 ActivityKit 푸시 토큰 처리를 구현하세요.
추가 NSSupportsLiveActivitiesFrequentUpdates 앱이 자주 ActivityKit 푸시 업데이트를 필요로 할 때만 추가하세요.

푸시 알림 기능만 활성화하는 것은 충분하지 않습니다. 서버에서 업데이트를 위해 native 토큰 처리와 APNs 백엔드가 필요합니다.

ActivityKit는 정적 및 동적 Live Activity 데이터의 총 크기를 4 KB로 제한합니다. 동적 섬은 지원되는 장치 모델에서만 표시되며, 다른 장치에서는 Lock Screen 표시를 사용합니다.

이 플러그인이 노출하는 내용

areActivitiesSupported - 이 장치에서 Live Activity가 지원되는지 확인합니다. iOS 16.1 이상과 장치 지원이 필요합니다.
startActivity - 새로운 Live Activity를 지정된 레이아웃과 데이터와 함께 시작합니다.
updateActivity - 기존 Live Activity를 새로운 데이터와 함께 업데이트합니다.
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/Cap-go/capacitor-live-activities/
문서: /docs/plugins/live-activities/

Using @capgo/capacitor-live-activities

Live 활동을 사용 중이라면 Using @capgo/capacitor-live-activities 자연적인 미디어 및 인터페이스 동작을 계획하고 @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Getting Started Getting Started의 구현 세부 정보를 참조하세요. Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @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.

라이브 액티비티

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