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

라이브 액티비티

Manage iOS Live Activities and Dynamic Island layouts from Capacitor with JSON-driven templates

안내

라이브 액티비티 튜토리얼

capgo/capacitor-live-activities 사용

Capacitor 라이브 액티비티 플러그인

설치

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

iOS 설정

플러그인을 설치하고 동기화하는 것은 네이티브 라이브 액티비티 UI를 생성하지 않습니다. 액티비티킷을 Xcode에서 구성하기 전에 startActivity실행

  1. __CAPGO_KEEP_0__ Live Activities 플러그인 UI를 사용하여 iOS 라이브 액티비티를 관리합니다. bunx cap open ios.
  2. iOS 16.1 이상의 버전으로 설정하세요. Widget Extension 대상과 활성화 실시간 활동 포함.
  3. 앱과 Widget Extension 배포 대상의 iOS 16.1 이상으로 설정하세요.
  4. 메인 앱에 확장 프로그램이 포함되어야 합니다.
  5. 등록된 ActivityConfiguration 확장 프로그램의 WidgetBundle, Lock Screen 및 모든 Dynamic Island 발표와 함께.
  6. 메인 앱 대상의 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&#39;s request, update, and end APIs. The Widget Extension must contain SwiftUI code that can decode and render the same ActivityAttributes 그것을 사용하는 모든 호출에 사용되는 콘텐츠 상태를 포함하십시오. 메인 앱과 Widget Extension 대상에 공유된 ActivityKit 모델을 모두 포함하십시오. Xcode가 생성한 Live Activity 템플릿은 자동으로 이 플러그인에 전달된 JSON 레이아웃을 렌더링하지 않으며 확장도 호환 가능한 네이티브 레이아웃 렌더러가 필요합니다.

공유된 이미지

이미지 관리 메서드를 사용할 때 다음을 추가하십시오. 앱 그룹 메인 앱과 Widget Extension 대상에 앱 그룹 기능을 추가하십시오. 동일한 그룹을 두 대상 모두에서 다음 exact identifier를 사용하여 활성화하십시오:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

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

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

  • 또는 behavior.widgetUrl HTML 텍스트 프래그먼트 tapUrl 네트워크에 접근할 수 없는 라이브 활동 확장 프로그램은 메인 앱에서远程 이미지를 다운로드하고 그 이미지를 공유된 앱 그룹에 저장한 다음 레이아웃에서 저장된 이미지를 참조하십시오. 배포된 자산도 Widget Extension 대상에 속해야 합니다. URL 스키마를 등록하십시오. 설정.
  • 서버에서 업데이트를 위해 다음을 추가하세요. 푸시 알림 역할: 푸시 알림
  • 역할: 푸시 알림 NSSupportsLiveActivitiesFrequentUpdates 역할: 푸시 알림

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

역할: 푸시 알림

역할: 푸시 알림

  • areActivitiesSupported 역할: 푸시 알림
  • startActivity 역할: 푸시 알림
  • updateActivity 역할: 푸시 알림
  • 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
});

전체 참조

Using @capgo/capacitor-live-activities

이 장치에서 Live 활동이 지원되는지 확인합니다. iOS 16.1 이상과 장치 지원이 필요합니다. 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.