본문으로 바로가기
Capgo 로고
플러그인으로 돌아가기
@capgo/capacitor-live-activities
튜토리얼
@capgo/capacitor-live-activities

라이브 액티비티

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

__CAPGO_KEEP_0__/월 다운로드

0

GitHub 스타

6

가이드

실시간 활동에 대한 튜토리얼

capgo의 @capacitor/capacitor-live-activities를 사용하는 방법

Capacitor 실시간 활동 플러그인: iOS 실시간 활동 관리를 위한 인터페이스

설치

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

iOS 설정

__CAPGO_KEEP_0__ 플러그인을 설치하고 동기화하는 것은 네이티브 실시간 활동 UI를 생성하지 않습니다. 실시간 활동을 호출하기 전에 startActivityXcode에서 ActivityKit을 구성하세요:

  1. 실행 bunx cap open ios.
  2. Add a 위젯 확장 목표를 설정하고 활성화 Live 활동을 포함.
  3. 앱과 위젯 확장의 배포 목표를 iOS 16.1 이상으로 설정합니다.
  4. 확장 프로그램이 메인 앱에 포함되어야 합니다.
  5. __CAPGO_KEEP_0__ ActivityConfiguration 확장 프로그램에 등록되어야 합니다. WidgetBundle__CAPGO_KEEP_0__
  6. Lock Screen 및 모든 Dynamic Island 발표를 포함합니다. NSSupportsLiveActivities 위젯 Info.plist.
<key>NSSupportsLiveActivities</key>
<true/>

메인 앱 목표의 code에 추가합니다. ActivityAttributes 그것을 사용하는 모든 호출에 의해 사용되는 콘텐츠 상태를 포함하십시오. Shared ActivityKit 모델을 Widget Extension 대상과 함께 메인 앱에 포함하십시오. Xcode가 생성한 Live Activity 템플릿은 이 플러그인에 전달된 JSON 레이아웃을 자동으로 렌더링하지 않으며, 확장도 호환 가능한 네이티브 레이아웃 렌더러가 필요합니다.

공유 이미지

이미지 관리 메서드를 사용할 때, 메인 앱과 Widget Extension 대상에 App Groups 기능을 추가하십시오. 동일한 그룹을 대상에 두고, 플러그인이 기대하는 정확한 식별자를 사용하여 그룹을 활성화하십시오. Live Activity 확장은 네트워크에 접근할 수 없습니다. 메인 앱에서远程 이미지를 다운로드하고, 그 이미지를 공유 App Group에 저장한 후, 레이아웃에서 저장된 이미지를 참조하십시오. Widget Extension 대상에 속한 모든 자산도 Widget Extension 대상에 속해야 합니다. 깊이 링크 및 푸시 업데이트

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Register any custom URL scheme used by saveImageor

under the main app target&#39;s

  • Info &gt; URL Types behavior.widgetUrl App Groups 기능을 활성화하여, Widget Extension 대상과 메인 앱이 공유하는 App Group에 이미지를 저장하십시오. tapUrl Widget Extension 대상과 메인 앱이 공유하는 App Group에 이미지를 저장하십시오. Widget Extension 대상과 메인 앱이 공유하는 App Group에 이미지를 저장하십시오. 설정.
  • 서버에서 주도하는 업데이트 경우에만 Push Notifications 능력과 APNs를 사용하는 ActivityKit push-token 처리를 구현하세요.
  • Add NSSupportsLiveActivitiesFrequentUpdates 만 앱이 자주 ActivityKit push 업데이트 요구할 때만.

Push Notifications 능력만 활성화하는 것은 충분하지 않습니다; 서버에서 주도하는 업데이트에는 native 토큰 처리와 APNs 백엔드가 필요합니다.

ActivityKit은 정적 및 동적 Live Activity 데이터의 합쳐진 크기를 4 KB로 제한합니다. Dynamic Island은 지원하는 장치 모델에서만 보입니다; 다른 장치는 Lock Screen 표시를 사용합니다.

이 플러그인이 노출하는 것

  • areActivitiesSupported - 이 장치에서 Live Activities가 지원되는지 확인하세요. 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
});

전체 참조

Using @capgo/capacitor-live-activities

Live 활동 사용 중이면 계속 진행하세요. @capgo/capacitor-live-활동 를 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고 연결하세요. @capgo/capacitor-live-활동 for the implementation detail in @capgo/capacitor-live-activities, 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.