capgo/capacitor-live-activities 사용

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

설치

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

iOS 설정

플러그인을 설치하고 동기화하는 것은 네이티브 라이브 액티비티 UI를 생성하지 않습니다. 액티비티킷을 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 텍스트 프래그먼트입니다. (parent key `alternatives_cta_questions`). 페이지/영역: Capacitor live-update 대안 비교 페이지. 역할: 장기 마케팅 또는 법률 문구. Seen in: page alternatives.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지하십시오. tapUrl HTML 텍스트 프래그먼트입니다. (parent key `appflow_cta_questions`). 페이지/영역: Appflow 비교/이동 마케팅 복사본. 역할: 장기 마케팅 또는 법률 문구. Seen in: page ionic-appflow.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지하십시오. HTML 텍스트 프래그먼트입니다. (parent key `capwesome_cta_questions`). 페이지/영역: Capawesome 비교 페이지. 역할: 장기 마케팅 또는 법률 문구. Seen in: page capwesome.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지하십시오. Message key `capwesome_cta_questions` (Capwesome CTA Questions). | HTML 텍스트 프래그먼트입니다. (parent key `consulting_faq_subtitle`). 페이지/영역: 컨설팅 서비스 페이지. 역할: 섹션 서브 타이틀 또는 태그 라인. Seen in: page consulting.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지하십시오. Message key `consulting_faq_subtitle` (Consulting FAQ Subtitle). | 페이지/영역: Appflow 비교/이동 마케팅 복사본. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. Seen in: page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Message key `appflow_plugins_or` (Appflow Plugins Or). 설정.
서버에서 업데이트를 위해 다음을 추가하세요. 푸시 알림 푸시 알림 기능과 ActivityKit 푸시 토큰 처리를 위한 APNs 구현을 추가하세요.
추가 NSSupportsLiveActivitiesFrequentUpdates 앱이 자주 푸시 업데이트를 필요로 할 때만 추가하세요.

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

ActivityKit은 동적 Live Activity 데이터와 정적 데이터의 합계를 4 KB로 제한합니다. 동적 아이슬랜드는 지원되는 장치 모델에서만 표시됩니다. 다른 장치에서는 Lock Screen 표시를 사용합니다.

이 플러그인은 다음을 노출합니다.

areActivitiesSupported - 이 장치에서 Live 활동이 지원되는지 확인합니다. iOS 16.1 이상과 장치 지원이 필요합니다.
startActivity - 새로운 Live 활동을 시작합니다. 지정된 레이아웃과 데이터를 사용합니다.
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/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.

라이브 액티비티