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

capgo/capacitor-live-activitiesを使用する

CapacitorのLive Activitiesプラグインは、iOS Live Activitiesの管理用のインターフェースです。

インストール

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

iOSの設定

プラグインのインストールと同期は、ネイティブのLive Activity UIを作成しません。Live Activityを呼び出す前に startActivity、XcodeのActivityKitを設定してください:

1. Run bunx cap open ios.
2. 追加 ライブアクティビティウィジェット ターゲットと有効化 ライブアクティビティを含める.
3. iOS 16.1 以降のアプリとウィジェット拡張の展開対象を設定してください。
4. 拡張機能はメインアプリケーションに埋め込まれていることを確認してください。
5. メンテナンス ActivityConfiguration registered in the extension's WidgetBundle, Lock Screen とすべてのダイナミックアイランドプレゼンテーションとともに。
6. Add NSSupportsLiveActivities to the main app target's Info.plist.

<key>NSSupportsLiveActivities</key>
<true/>

ターゲットを追加するだけでは不十分です。ネイティブアプリまたはプラグインは、ActivityKitのrequest、update、end APIを呼び出す必要があります。ウィジェット拡張機能には、ActivityKitのAPIの呼び出しで使用される同じJSONレイアウトをデコードおよびレンダリングできるSwiftUI codeが含まれている必要があります。 ActivityAttributes ActivityKitのAPIの呼び出しで使用される同じコンテンツ状態を含むウィジェット拡張機能のSwiftUI __CAPGO_KEEP_0__が必要です。両方のターゲットに共有されるActivityKitのモデルを含める必要があります。Xcodeによって生成されるライブアクティビティテンプレートは、このプラグインに渡されるJSONレイアウトを自動的にレンダリングしません。拡張機能には互換性のあるネイティブレイアウトレンダラーも必要です。

共有画像

画像管理メソッドを使用する場合、以下の内容を追加する必要があります。 アプリグループ 両方のターゲットにアプリグループの機能を追加し、同じグループを両方のターゲットで有効にする必要があります。グループの識別子をプラグインが期待しているものと同じでなければなりません。

group.<MAIN_APP_BUNDLE_ID>.liveactivities

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

プラグインのURLスキームを使用する場合、または

• Capacitor Live ActivitiesのカスタムURLスキームを登録する behavior.widgetUrl or tapUrl 「Capwesome」は、Capacitorのライブアップデート機能を提供するプラグインです。Capwesomeは、iOSアプリの開発に使用されるフレームワークです。Capwesomeは、ライブアップデート機能を提供するために使用されるAPIを呼び出す必要があります。ウィジェット拡張機能には、ActivityKitのAPIの呼び出しで使用される同じJSONレイアウトをデコードおよびレンダリングできるSwiftUIが必要です。両方のターゲットに共有されるActivityKitのモデルを含める必要があります。Xcodeによって生成されるライブアクティビティテンプレートは、このプラグインに渡されるJSONレイアウトを自動的にレンダリングしません。拡張機能には互換性のあるネイティブレイアウトレンダラーも必要です。 Info > URL タイプ 設定。
• サーバーから更新を取得するには、 プッシュ通知 機能を追加し、ActivityKitのプッシュトークン処理を実装する必要があります。
• APNsを使用します。 NSSupportsLiveActivitiesFrequentUpdates 追加

Capacitorを使用する場合、

アプリが頻繁にActivityKitのプッシュ更新を必要とする場合にのみ実行してください。

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

• areActivitiesSupported ActivityKitは、静的と動的のライブアクティビティデータの組み合わせを4KBに制限しています。ダイナミックアイランドは、サポートされているデバイスモデルのみで表示されます。サポートされていないデバイスでは、ロック画面のプレゼンテーションが使用されます。
• startActivity このプラグインが公開するものは何ですか。
• 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 Live Activitiesを接続する @capgo/capacitor-ライブアクティビティ @capgo/capacitorライブアクティビティの実装詳細 Capacitor Live Activitiesの実装詳細 Capacitor Video Playerを使用 Using @capgo/capacitor-video-player Capacitorライブアクティビティのnative機能のために@capgo/capacitor-ビデオプレーヤーを使用します。 @capgo/capacitor-ビデオプレーヤー @capgo/capacitor-video-playerの実装詳細のために Using @capgo/capacitor-native-navigation native capability in Using @capgo/capacitor-native-navigation.