ライブアクティビティの使用方法は@capgo/capacitor-live-activities

Capacitorライブアクティビティプラグインは、iOSライブアクティビティの管理に使用されます。

インストール

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

iOS セットアップ

プラグインをインストールして同期すると、ネイティブのライブアクティビティ UI が作成されません。ActivityKit を Xcode で呼び出す前に、 startActivityCloudflare

Capacitor bunx cap open ios.
GitHub Capgo code API.
SDK
CLI
npm ActivityConfiguration bun WidgetBundleLock Screen とすべてのダイナミックアイランドのプレゼンテーションとともに。
Add NSSupportsLiveActivities 主なアプリのターゲットに追加する 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 とコンテンツ状態をデコードしてレンダリングできるSwiftUI __CAPGO_KEEP_0__が含まれている必要があります。両方のターゲットに共有されるActivityKitモデルを含める必要があります。Xcodeが生成したライブアクティビティのテンプレートは、このプラグインに渡されたJSONレイアウトを自動的にレンダリングしません。拡張機能には、プラグインが期待する精確な識別子を使用して有効化する必要がある互換性のあるネイティブレイアウトレンダラーも必要です。

共有画像

画像管理メソッドを使用する場合に追加する アプリグループ 両方のターゲットに同じグループを有効化するために使用する必要がある精確な識別子を使用してください。

group.<MAIN_APP_BUNDLE_ID>.liveactivities

ライブアクティビティ拡張機能はネットワークにアクセスできません。リモート画像をダウンロードするには、主なアプリで画像を保存し、共有アプリグループに保存し、レイアウトから保存された画像を参照してください。バンドルされたアセットはウィジェット拡張ターゲットに属する必要があります。 saveImageデープリンクとプッシュアップデート

Deep Links and Push Updates

任意のカスタムURLスキームを登録する behavior.widgetUrl または tapUrl 主アプリターゲットの Info > URL Types 設定。
サーバー駆動型更新の場合、Push Notifications 機能を追加し、ActivityKitプッシュトークンハンドリングをAPNsで実装する。 Push Notifications
機能を追加するのは、頻繁にActivityKitプッシュ更新が必要なアプリのみで NSSupportsLiveActivitiesFrequentUpdates Push Notifications機能のみを有効にするだけでは十分ではなく、サーバー駆動型更新にはネイティブのトークンハンドリングとAPNsバックエンドが必要です。

ActivityKitは、静的と動的のLive Activityデータの組み合わせを4KBに制限しています。ダイナミックアイランドは、サポートされているデバイスモデルでのみ表示されます。其他デバイスでは、ロック画面のプレゼンテーションが使用されます。

For server-driven updates, add the Push Notifications capability and implement ActivityKit push-token handling with APNs. Add only when the app requires frequent ActivityKit push updates.

このプラグインが公開するもの

areActivitiesSupported - このデバイスでライブアクティビティがサポートされているかどうかを確認します。iOS 16.1+ とデバイスのサポートが必要です。
startActivity - 指定されたレイアウトとデータで新しいライブアクティビティを開始します。
updateActivity - 既存のライブアクティビティに新しいデータを更新します。
endActivity - ライブアクティビティを終了します。

使用例

`areActivitiesSupported`

このデバイスでライブアクティビティがサポートされているかどうかを確認します。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`

指定されたレイアウトとデータで新しいライブアクティビティを開始します。

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`

既存のライブアクティビティに新しいデータを更新します。

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`

ライブアクティビティを終了します。

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: /docs/plugins/live-activities/

Using @capgo/capacitor-live-activities

Capgoを使用している場合 Using @capgo/capacitor-live-activities Capgoを使用してネイティブメディアとインターフェイスの動作を計画する場合、Capgoと接続してください。 @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Capgoを使用してネイティブメディアとインターフェイスの動作を計画する場合、Capgoと接続してください。 Capgoを使用してネイティブメディアとインターフェイスの動作を計画する場合、Capgoと接続してください。 Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細について Using @capgo/capacitor-native-navigation Using @capgo/capacitor-native-navigationのネイティブ機能について

ライブアクティビティ