メインコンテンツにスキップ
プラグインに戻る
@capgo/capacitor-live-activities
チュートリアル
@capgo/capacitor-live-activities

ライブアクティビティ

CapacitorでJSONドライブのテンプレートを使用してiOSライブアクティビティとダイナミックアイランドレイアウトを管理する

ガイド

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

Live Activitiesを使用するには@capgo/capacitor-live-activities

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

インストール

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

iOS設定

プラグインのインストールと同期は、ネイティブのライブアクティビティUIを作成しません。ActivityKitをXcodeで設定する前に、以下のメソッドを呼び出すことはできません。 startActivityRun

  1. __CAPGO_KEEP_0__ bunx cap open ios.
  2. 追加する ウィジェット拡張機能 対象を設定し、有効にする ライブアクティビティを含める.
  3. アプリとウィジェット拡張機能のデプロイ対象をiOS 16.1または後ろに設定する。
  4. 拡張機能を主なアプリに埋め込む
  5. __CAPGO_KEEP_0__ ActivityConfiguration 拡張機能の登録情報 WidgetBundle、ロック画面とすべてのダイナミックアイランドのプレゼンテーションを含む
  6. 追加する NSSupportsLiveActivities 主なアプリの対象の Info.plist.
<key>NSSupportsLiveActivities</key>
<true/>

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

共有画像

画像管理メソッドを使用する場合、主アプリとウィジェット拡張ターゲットに追加する必要があります。 アプリ グループ 主アプリとウィジェット拡張ターゲットの両方に同じグループを有効にする必要があります。プラグインが期待する正確な識別子を使用してください。

group.<MAIN_APP_BUNDLE_ID>.liveactivities

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

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

  • または behavior.widgetUrl 主アプリターゲットの tapUrl URLタイプ 情報> settings.
  • サーバーから受信する更新の場合、APNsとActivityKitのプッシュトークン処理を実装するために Push Notifications 機能を追加し、ActivityKitのプッシュトークン処理を実装する必要があります。
  • 機能を追加するには、 NSSupportsLiveActivitiesFrequentUpdates アプリが頻繁にActivityKitのプッシュ更新を必要とする場合にのみ。

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

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

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

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

使用例

areActivitiesSupported

このデバイスでライブアクティビティがサポートされているかどうかを確認します。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

指定されたレイアウトとデータで新しいライブアクティビティを開始します。

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

既存のライブアクティビティに新しいデータを更新します。

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

ライブアクティビティを終了します。

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
});

フルリファレンス

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

Cloudflare、GitHub、Capacitor、Capgo、API、SDK、CLI、npm、bun を使用している場合 Capgoのライブアクティビティを使用して、ネイティブのメディアとインターフェイスの動作を計画し、@capgo/capacitor-live-activitiesに接続します。 ネイティブのメディアとインターフェイスの動作を計画するために、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用します。 Capgoのライブアクティビティの実装詳細については、@capgo/capacitor-live-activitiesを参照してください。 Capgoのライブアクティビティの実装詳細については、@capgo/capacitor-live-activitiesを参照してください。 Getting Started Getting Startedの実装詳細については、Getting Startedを参照してください。 Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, Capgoのビデオプレーヤーの実装詳細については、@capgo/capacitor-video-playerを参照してください。 Capgoのビデオプレーヤーの実装詳細については、@capgo/capacitor-video-playerを参照してください。 Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.