@capgo/capacitor-live-activitiesの使用

Capacitorライブアクティビティプラグイン

インストール

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

iOSの設定

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

__CAPGO_KEEP_0__で表示 bunx cap open ios.
を追加します。 ウィジェット拡張機能 のターゲットを設定し、有効にします。 ライブアクティビティを含める.
アプリとウィジェット拡張機能のデプロイターゲットを、iOS 16.1 またはそれ以降に設定します。
拡張機能がアプリの本体に埋め込まれていることを確認します。
を保持します。 ActivityConfiguration 拡張機能の WidgetBundleに登録されていることを確認します。
, Lock Screen とすべての Dynamic Island のプレゼンテーションで使用できます。 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 と呼ばれるコールを使用するコンテンツの状態を含めます。両方のターゲット、主アプリとWidget Extensionに共有されるActivityKitモデルを含めます。Xcodeによって生成されるLive Activityテンプレートは、このプラグインに渡されるJSONレイアウトを自動的にレンダリングしません。拡張機能も互換性のあるネイティブレイアウトレンダラーが必要です。

共有画像

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

group.<MAIN_APP_BUNDLE_ID>.liveactivities

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

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

または behavior.widgetUrl or tapUrl under the main app target's アプリのバンドルされたアセットはWidget Extensionのターゲットに属する必要があります。 設定。
サーバーから受信する更新の場合、次の機能を追加してください。 プッシュ通知 機能
プッシュ通知機能とActivityKitのプッシュトークン処理を実装するためにAPNsを使用してください。 NSSupportsLiveActivitiesFrequentUpdates 追加

この機能を追加するには、頻繁にActivityKitのプッシュ更新が必要なアプリのみで実行してください。

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

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

areActivitiesSupported このプラグインが公開するもの
startActivity - このデバイスでライブアクティビティがサポートされているかどうかを確認します。iOS 16.1+とデバイスのサポートが必要です。
updateActivity - 指定されたレイアウトとデータで新しいライブアクティビティを開始します。
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 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__ライブアクティビティ capgo/capacitorライブアクティビティ capgo/capacitorライブアクティビティの実装詳細 Getting Started Getting Startedの実装詳細 Using @capgo/capacitor-video-player capgo/capacitorビデオプレーヤー capgo/capacitorビデオプレーヤーの実装詳細 for the implementation detail in @capgo/capacitor-video-player, and capgo/capacitorネイティブナビゲーション capgo/capacitorネイティブナビゲーションのネイティブ機能

ライブアクティビティ