메인 콘텐츠로 건너뛰기
플러그인으로 돌아가기
@capgo/capacitor-live-activities
튜토리얼
@capgo/capacitor-live-activities

라이브 액티비티

Capacitor를 사용하여 JSON-기반 템플릿으로 iOS 라이브 액티비티 및 다이내믹 아일랜드 레이아웃을 관리하세요.

안내

라이브 액티비티 튜토리얼

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:

  1. 실행 bunx cap open ios.
  2. Add a Widget Extension 목표를 설정하고 Live 활동 포함.
  3. 설정 앱과 Widget Extension 배포 대상이 iOS 16.1 이상이어야 합니다.
  4. 확장 프로그램이 앱의 주요 부분에 포함되어 있어야 합니다.
  5. 등록된 ActivityConfiguration 등록된 확장 프로그램의 WidgetBundle, Lock Screen 및 모든 Dynamic Island 발표와 함께.
  6. 추가 NSSupportsLiveActivities main 앱의 대상 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
});

전체 참조

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.