ガイド
CapacitorでLive Activitiesを使用する方法
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 UIを呼び出す前に startActivity、XcodeでActivityKitを設定します:
- 実行
bunx cap open ios. - 追加する ターゲットと有効化 Live Activityを含める アプリとWidget ExtensionのデプロイターゲットをiOS 16.1または後ろに設定します。.
- 拡張機能がアプリの本体に埋め込まれていることを確認します。
- 登録済みの拡張機能
- 拡張機能の
ActivityConfiguration、Lock ScreenとすべてのDynamic Islandのプレゼンテーションを含む。WidgetBundleCapacitorを使用してLive Activityを実装するには、以下の手順に従います。 - 追加
NSSupportsLiveActivitiesLive UpdateInfo.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 Capacitor
GitHub
Capgo code API
group.<MAIN_APP_BUNDLE_ID>.liveactivities
SDK saveImageCLI
npm
- bun
behavior.widgetUrlortapUrl主アプリのターゲットの下で Info > URL Types 設定。 - サーバーから受信する更新用に、Push Notifications capabilityを追加し、ActivityKitのAPNsのプッシュトークンハンドリングを実装する。 追加
- Add
NSSupportsLiveActivitiesFrequentUpdatesアプリが頻繁に ActivityKit のプッシュ更新を必要とする場合のみ。
このプラグインが公開するもの
- このデバイスでライブアクティビティがサポートされているかどうかを確認します。iOS 16.1+とデバイスのサポートが必要です。
context
areActivitiesSupportedcontextstartActivity- Live Activity を新しく開始します。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/
@capgo/capacitorライブアクティビティを続けます。
Capacitor Live Activitiesを使用している場合 Using @capgo/capacitor-live-activities Capacitor Live Activitiesの実装詳細 @capgo/capacitor-live-activities @capgo/capacitorライブアクティビティの実装詳細 Capacitor Live Activitiesの実装詳細 Capacitor Live Activitiesの実装詳細 Using @capgo/capacitor-video-player native capabilityのために、@capgo/capacitor-video-playerを使用します。 @capgo/capacitor-ビデオプレーヤー @capgo/capacitor-ビデオ・プレーヤーの実装詳細のために Using @capgo/capacitor-native-navigation Capacitorのネイティブ機能のために@capgo/capacitor-native-navigationを使用します。