Using @capgo/capacitor-live-activities

Capacitor Live Activities Plugin interface for managing iOS Live Activities.

インストール

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

iOSの設定

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

configure ActivityKit in Xcode: bunx cap open ios.
iOS 16.1以降のターゲットにアプリとWidget Extensionの展開ターゲットを設定してください。 Widget Extension ターゲットと有効化してください。 Liveアクティビティを含める.
主アプリにWidget Extensionを埋め込んでください。
登録済みの
拡張機能の ActivityConfiguration Lock ScreenとすべてのDynamic Islandのプレゼンテーションを含む WidgetBundle追加
主アプリのターゲットの NSSupportsLiveActivities ターゲットを追加するだけでは不十分です。ネイティブアプリまたはプラグインはActivityKitのrequest、update、endAPIを呼び出す必要があります。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 Live Activity拡張機能では、呼び出されたコンテキストとコンテンツの状態を含めます。両方のターゲット（主アプリとWidget Extension）に共有ActivityKitモデルを含めます。Xcodeによって生成されるLive Activityテンプレートは、このプラグインに渡されたJSONレイアウトを自動的にレンダリングしません。拡張機能も互換性のあるネイティブレイアウトレンダラーが必要です。

共有画像

画像管理メソッドを使用する場合、次の追加を実行してください。 App Groups 主アプリとWidget Extensionの両方のターゲットにApp Groupsの機能を追加してください。両方のターゲットで同じグループを有効化するには、プラグインが期待する精確な識別子を使用してください。

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Live Activity拡張機能はネットワークにアクセスできません。リモート画像をダウンロードする主アプリで、保存した画像を共有App Groupに保存し、レイアウトから保存された画像を参照してください。バンドルされたアセットもWidget Extensionのターゲットに属する必要があります。 saveImageDeep LinksとPush Updates

RegisterしたカスタムURLスキームを使用する

または behavior.widgetUrl URLスキームを使用する tapUrl URLスキームを使用する URLスキームを使用する 設定。
サーバーから受信する更新用に、 プッシュ通知 プッシュ通知機能
プッシュ通知機能 NSSupportsLiveActivitiesFrequentUpdates 追加

アプリが頻繁にLive Activityのプッシュ更新を必要とする場合にのみ追加します。

プッシュ通知機能のみを有効にするだけでは不十分です。サーバーから受信する更新にはネイティブのトークン処理とAPNsバックエンドが必要です。

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

areActivitiesSupported このプラグインが公開するもの
startActivity - このデバイスでLive Activityがサポートされているかどうかを確認します。iOS 16.1以上とデバイスのサポートが必要です。
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
});

フルリファレンス

GitHub: https://github.com/Cap-go/capacitor-live-activities/
ドキュメント: /docs/plugins/live-activities/

Using @capgo/capacitor-live-activitiesから続けてください。

Capacitor Live Activitiesを使用している場合 Using @capgo/capacitor-live-activities ネイティブのメディアとインターフェイスの動作を計画し、Capacitorライブアクティビティと接続 @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, はじめに Capacitorライブアクティビティの実装詳細 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.

ライブアクティビティ