capgoを使用して@capgo/capacitor-live-activities

Capacitorライブアクティビティプラグインは、iOSライブアクティビティの管理用のiOS用のインターフェイスです。

インストール

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

iOS設定

プラグインのインストールと同期は、ネイティブのライブアクティビティUIを作成しません。ActivityKitをXcodeで呼び出す前に startActivity実行

追加 bunx cap open ios.
ウィジェット拡張 __CAPGO_KEEP_0__ 対象を設定して有効化 ライブアクティビティを含める.
アプリとウィジェット拡張の展開対象をiOS 16.1 またはそれ以降に設定してください。
拡張機能をアプリ本体に埋め込んでください。
__CAPGO_KEEP_0__を ActivityConfiguration 拡張機能の WidgetBundle、ロック画面とすべてのダイナミックアイランドのプレゼンテーションとともに
を追加してください。 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レイアウトを自動的にレンダリングしません。拡張機能には、Xcodeが生成したレイアウトをレンダリングできるネイティブレイアウトレンダラーも必要です。

共有イメージ

画像管理メソッドを使用する場合、主アプリとウィジェット拡張機能のターゲットにアプリグループ機能を追加してください。両方のターゲットに同じグループを有効にするには、プラグインが期待する正確な識別子を使用してください: ライブアクティビティ拡張機能はネットワークにアクセスできません。主アプリでリモート画像をダウンロードし、共有アプリグループに保存し、保存した画像をレイアウトから参照してください。バンドルアセットもウィジェット拡張機能のターゲットに属する必要があります。デープリンクとプッシュアップデート

group.<MAIN_APP_BUNDLE_ID>.liveactivities

サーバードライブアップデート

サーバードライブアップデート behavior.widgetUrl サーバードライブアップデート tapUrl サーバードライブアップデート サーバードライブアップデート サーバードライブアップデート
サーバードライブアップデート プッシュ通知 __CAPGO_KEEP_0__
追加 NSSupportsLiveActivitiesFrequentUpdates アプリが頻繁にActivityKitプッシュ更新を必要とする場合にのみ

Push通知の機能を有効にするだけでは十分ではなく、ネイティブのトークンハンドリングとAPNsバックエンドが必要です。

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

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

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

使用例

`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/

@capgo/capacitor-live-activitiesを使用して続けます。

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用している場合 Using @capgo/capacitor-live-activities 接続してください。 @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 Getting Started Getting Startedの実装詳細 @capgo/capacitor-video-player @capgo/capacitor-video-playerのネイティブ機能 @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細 @capgo/capacitor-native-navigation @capgo/capacitor-native-navigationのネイティブ機能

ライブアクティビティ

iOSライブアクティビティのチュートリアル