ガイド
ライブアクティビティのチュートリアル
使用@capgo/capacitorライブアクティビティ
Capacitorライブアクティビティプラグインのインターフェイス
インストール
bun add @capgo/capacitor-live-activities
bunx cap sync
このプラグインが公開するもの
areActivitiesSupported- このデバイスでライブアクティビティがサポートされているかどうかを確認します。iOS 16.1+とデバイスのサポートが必要です。startActivity- 指定されたレイアウトとデータで新しいライブアクティビティを開始します。updateActivity- 既存のライブアクティビティに新しいデータを更新します。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
});
フルリファレンス
- GitHub https://github.com/Cap-go/capacitor-ライブ活動/
- ドキュメント: /docs/plugins/live-activities/