@ capgo/capacitor-live-activities

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

インストール

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

iOS セットアップ

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

実行 bunx cap open ios.
Add a Widget Extension ターゲットを追加し、有効にし Live Activityを含める.
アプリとWidget ExtensionのデプロイメントターゲットをiOS 16.1または後ろに設定する。
拡張機能がアプリの本体に埋め込まれていることを確認する。
Keep an ActivityConfiguration 拡張機能の WidgetBundleに登録されている、Lock ScreenとすべてのDynamic Islandのプレゼンテーションを含む。
Add NSSupportsLiveActivities main appのターゲット Info.plist.

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

ターゲットを単独で追加するだけでは不十分です。ネイティブアプリまたはプラグインは、ActivityKitのrequest、update、end APIを呼び出す必要があります。ウィジェット拡張機能には、ActivityKitのAPIを呼び出すために必要なSwiftUI codeが含まれている必要があります。 ActivityAttributes ActivityKitのAPIを呼び出すために必要なデータとコンテンツの状態を含むJSONレイアウトをレンダリングするには、Xcodeによって生成されるライブアクティビティテンプレートは自動的にレンダリングされません。拡張機能には、互換性のあるネイティブレイアウトレンダラーが必要です。

共有画像

画像管理メソッドを使用する場合、以下のコードを追加してください。 App Groups メインアプリとウィジェット拡張機能の両方にApp Groupsの機能を追加してください。両方のターゲットで同じグループを有効にするには、次の識別子を使用してください。

group.<MAIN_APP_BUNDLE_ID>.liveactivities

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

カスタムURLスキームを使用する場合は、以下のコードを追加してください。

または behavior.widgetUrl Capacitor Live Updateの代替オプションを比較するページです。Capacitor Live Updateの代替オプションを比較するページです。Appflowの代替オプションを比較するページです。Capawesomeの代替オプションを比較するページです。Capgoのコンサルティングサービスに関するFAQのサブタイトルです。Appflowの代替オプションのページです。Appflowの代替オプションのページです。Appflowの代替オプションのページです。 tapUrl 主アプリのターゲットの下で Info > URL タイプ 設定.
サーバーから推定される更新用に、 Push Notifications capabilityを追加し、ActivityKitのプッシュトークン処理を実装する必要があります。APNsを使用します。
追加 NSSupportsLiveActivitiesFrequentUpdates アプリが頻繁にActivityKitのプッシュ更新を必要とする場合にのみ追加します。

Push Notifications capabilityを有効にするだけでは不十分です。サーバーから推定される更新には、ネイティブのトークンハンドリングとAPNsバックエンドが必要です。

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

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

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

例の使用方法

`areActivitiesSupported`

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

__CAPGO_KEEP_0__を指定されたレイアウトとデータで開始します。

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`

既存の__CAPGO_KEEP_0__を新しいデータで更新します。

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`

__CAPGO_KEEP_0__を終了します。

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/

Keep going from Using @capgo/capacitor-live-activities

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

ライブアクティビティ