跳过内容

开始

GitHub

您可以使用我们的AI辅助设置来安装插件。将Capgo技能添加到您的AI工具中,使用以下命令:

终端窗口
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

context: Capgo营销网站。角色:UI标签。见于:页面代理/[slug].astro。消息键`agents_page_copy_label`(代理页面复制标签)。

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-live-activities` plugin in my project.

然后使用以下提示:

终端窗口
bun add @capgo/capacitor-live-activities
bunx cap sync

iOS 设备设置

iOS设置

安装和同步插件不会创建原生Live活动UI。ActivityKit需要一个Widget扩展来注册一个Live活动配置才能显示任何内容。 startActivity 要求

  • 在iOS设备或兼容的模拟器上进行测试。动态岛仅在支持的设备模型上可见;其他设备使用锁屏演示。
  • 请确保ActivityKit的静态和动态数据的总和不超过Apple的4 KB限制。
  • 1. 创建一个Widget扩展

标题:1. 创建一个Widget扩展

打开原生iOS项目:

终端窗口

复制到剪贴板
bunx cap open ios

然后:

  1. 选择 文件 > 新建 > 目标.
  2. 添加一个 小部件扩展.
  3. 启用 包含实时活动.
  4. 禁用 包含配置意图 除非应用程序还需要一个可配置的小部件。
  5. 确保生成的扩展嵌入在主应用程序目标中。

小部件扩展必须包含一个 ActivityConfiguration 并在其中注册 WidgetBundle. 必须提供所有所需的实时活动呈现:

  • 锁屏
  • 动态岛扩展
  • 动态岛紧凑的前导和尾随
  • 动态岛最小

仅添加目标是不够的。 原生应用或插件必须调用 ActivityKit 的 request、update 和 end API。 扩展必须包含 SwiftUI code 以解码和渲染与这些调用相同的 ActivityAttributes 和内容状态。 在主应用和小部件扩展目标中都包含共享的 ActivityKit 模型。 Xcode 生成的实时活动模板不会自动渲染传递给此插件的 JSON 布局;扩展还需要兼容的本机布局渲染器。

2. 启用实时活动

启用实时活动

添加以下键到主应用目标的 Info.plist:

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

如果项目生成其 Info.plist添加 支持实时活动 值为 YES 在主应用目标的自定义 iOS 目标属性中

3. 配置共享图像的 App 组

标题为“3. 配置共享图像的 App 组”

仅当使用 saveImage, removeImage, listImages或 cleanupImages时,才需要 App 组。该插件从主应用包标识符中派生 App 组标识符,使用以下格式:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

例如,具有包标识符 com.example.delivery 必须使用:

group.com.example.delivery.liveactivities

在 Xcode 中,添加 App 组 到主应用程序目标和 Widget 扩展目标,然后在两个目标上启用相同的标识符。

Live Activity 扩展无法访问网络。下载远程图像并将它们保存到共享 App Group 中,然后从 Live Activity 中引用它们。对于捆绑图像,还需要在资产的目标成员资格中启用 Widget 扩展。

当使用

或计时序列时, behavior.widgetUrl 注册匹配的 URL 方案或 Universal Link 在主应用程序中。对于自定义方案,如 tapUrl,在主应用程序目标的 myapp://order/12345下添加方案 Info > URL 类型 设置。

5. 可选:启用服务器驱动更新

标题:5. 可选:启用服务器驱动更新

推送通知不是本地更新所必需的。要从服务器开始、更新或结束实时活动,请:

  • 添加 推送通知 capability
  • 添加主应用程序目标。
  • 获取 ActivityKit 推送令牌并将它们发送到服务器。 liveactivity 通过 APNs 使用
  • Add NSSupportsLiveActivitiesFrequentUpdates 前往主应用 Info.plist 仅在使用场景需要频繁推送更新时才会使用。

ActivityKit推送令牌与标准用户通知设备令牌是分开的。 仅开启推送通知能力是不够的,需要使用原生令牌处理和APNs后端来实现服务器驱动的更新。

原生设置清单

原生设置清单

在调用之前 startActivity请确认

  • NSSupportsLiveActivities 已在主应用目标中启用。
  • 小部件扩展已嵌入并注册了一个 ActivityConfiguration.
  • 原生ActivityKit实现和小部件扩展使用相同的 ActivityAttributes 类型。
  • 应用和小部件扩展的部署目标均为iOS 16.1或更高版本。
  • Live Activities已在iOS设置中启用。
  • 在使用共享图像时,匹配的App Group已在两个目标上启用。
  • 任何由 widgetUrl 或 tapUrl 已注册。

导入

导入
import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';

API概述

API概述

检查是否支持此设备上的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

开始活动

使用指定的布局和数据启动一个新的实时活动。

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

getAllActivities

获取所有活动

获取当前所有活动的实时列表。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
const { activities } = await CapgoLiveActivities.getAllActivities();
activities.forEach(activity => {
console.log(`Activity ${activity.activityId}: ${activity.state}`);
});

将图片保存到共享 App 组容器中,以便在 Live 活动中使用。 图片必须保存到共享容器中才能从小部件扩展中访问。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
const { success, imageName } = await CapgoLiveActivities.saveImage({
imageData: 'base64EncodedImageData...',
name: 'product-image',
compressionQuality: 0.8
});
// Use in layout with: { type: 'image', source: 'saved', value: imageName }

从共享容器中删除保存的图片。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
const { success } = await CapgoLiveActivities.removeImage({ name: 'product-image' });

列出共享容器中的所有保存的图片。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
const { images } = await CapgoLiveActivities.listImages();
console.log('Saved images:', images);

从共享容器中删除所有保存的图片。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
await CapgoLiveActivities.cleanupImages();

startTimerSequence

开始计时序列

用于运动/运动的计时序列。 在 iOS 上:在 Live 活动和动态岛显示 在 Android 上:以计时器形式显示在前台通知中

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
const { sequenceId } = await CapgoLiveActivities.startTimerSequence({
title: 'HIIT Workout',
steps: [
{ duration: 30, title: 'Jumping Jacks', subtitle: 'Warm up', color: '#FF6B00', icon: 'figure.jumprope' },
{ duration: 10, title: 'Rest', color: '#00C853', icon: 'pause.circle' },
{ duration: 45, title: 'Burpees', subtitle: 'High intensity', color: '#FF0000', icon: 'flame.fill' },
{ duration: 15, title: 'Rest', color: '#00C853', icon: 'pause.circle' },
{ duration: 45, title: 'Mountain Climbers', color: '#FF0000', icon: 'figure.run' },
{ duration: 15, title: 'Rest', color: '#00C853', icon: 'pause.circle' },
],
loop: true,
loopCount: 3,
soundEnabled: true,
vibrateEnabled: true,
countdownBeeps: true,
tapUrl: 'myapp://workout/hiit'
});

pauseTimerSequence

暂停计时序列

恢复暂停的计时序列

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
await CapgoLiveActivities.pauseTimerSequence({ sequenceId: 'abc123' });

resumeTimerSequence

停止计时序列

复制到剪贴板

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
await CapgoLiveActivities.resumeTimerSequence({ sequenceId: 'abc123' });

stopTimerSequence

开始计时序列

暂停计时序列

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
await CapgoLiveActivities.stopTimerSequence({ sequenceId: 'abc123' });

跳过计时器序列中的下一步。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
await CapgoLiveActivities.skipTimerStep({ sequenceId: 'abc123' });

获取计时器序列的当前状态。

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
await CapgoLiveActivities.previousTimerStep({ sequenceId: 'abc123' });

getTimerState

类型参考

类型参考

import { CapgoLiveActivities } from '@capgo/capacitor-live-activities';
const state = await CapgoLiveActivities.getTimerState({ sequenceId: 'abc123' });
console.log(`Step ${state.currentStepIndex + 1}/${state.totalSteps}: ${state.currentStep.title}`);
console.log(`Time remaining: ${state.remainingSeconds}s`);

Section titled “skipTimerStep”

Section titled “previousTimerStep”

检查活动是否支持的结果。

export interface AreActivitiesSupportedResult {
/** Whether Live Activities are supported on this device */
supported: boolean;
/** Reason if not supported */
reason?: string;
}

启动活动的选项。

export interface StartActivityOptions {
/** Main activity layout (lock screen widget) */
layout: ActivityLayout;
/** Dynamic Island layout configuration */
dynamicIslandLayout: DynamicIslandLayout;
/** Activity behavior settings */
behavior?: LiveActivitiesBehavior;
/** Dynamic data for the activity */
data: Record<string, unknown>;
/** Stale date timestamp (activity becomes stale after this) */
staleDate?: number;
/** Relevance score for activity ordering (0-100) */
relevanceScore?: number;
}

启动活动的结果。

export interface StartActivityResult {
/** Unique activity identifier */
activityId: string;
}

更新活动的选项。

export interface UpdateActivityOptions {
/** Activity ID to update */
activityId: string;
/** Updated data */
data: Record<string, unknown>;
/** Optional alert to show with update */
alertConfiguration?: ActivityAlertConfiguration;
/** Updated stale date */
staleDate?: number;
/** Updated relevance score */
relevanceScore?: number;
}

结束 Live Activity 的选项。

export interface EndActivityOptions {
/** Activity ID to end */
activityId: string;
/** Final data to display */
data?: Record<string, unknown>;
/** Dismissal policy */
dismissalPolicy?: 'immediate' | 'default' | 'after';
/** Dismiss after timestamp (when dismissalPolicy is 'after') */
dismissAfter?: number;
}

获取所有活动的结果。

export interface GetAllActivitiesResult {
/** List of activities */
activities: ActivityInfo[];
}

保存图片的选项。

export interface SaveImageOptions {
/** Base64 encoded image data */
imageData: string;
/** Name to save the image as */
name: string;
/** JPEG compression quality (0-1, default 0.8) */
compressionQuality?: number;
}

保存图片的结果。

export interface SaveImageResult {
/** Whether the save was successful */
success: boolean;
/** Saved image name */
imageName: string;
}

RemoveImageOptions

RemoveImageOptions

移除图片选项

export interface RemoveImageOptions {
/** Name of the image to remove */
name: string;
}

RemoveImageResult

RemoveImageResult

移除图片结果

export interface RemoveImageResult {
/** Whether the removal was successful */
success: boolean;
}

ListImagesResult

ListImagesResult

列出图片结果

export interface ListImagesResult {
/** List of saved image names */
images: string[];
}

TimerSequenceOptions

TimerSequenceOptions

启动计时器序列选项

export interface TimerSequenceOptions {
/** Array of steps in the sequence */
steps: TimerStep[];
/** Overall title for the sequence (e.g., "HIIT Workout", "Tabata") */
title?: string;
/** Whether to loop the sequence when complete */
loop?: boolean;
/** Number of times to loop (if loop is true, 0 means infinite) */
loopCount?: number;
/** Play sound on step change (default: true) */
soundEnabled?: boolean;
/** Vibrate on step change (default: true) */
vibrateEnabled?: boolean;
/** Play countdown beeps in last 3 seconds (default: true) */
countdownBeeps?: boolean;
/** Deep link URL when tapping the notification/activity */
tapUrl?: string;
/** Keep screen on during timer (Android only, default: false) */
keepScreenOn?: boolean;
}

真实数据来源

标题:真实数据来源

本页面由插件生成 src/definitions.ts. 当公共 API 上游发生变化时,请重新同步。

继续从 Getting Started

标题:继续从 Getting Started

如果您正在使用 开始使用 来规划仪表板和 API 操作,请将其与 使用 @capgo/capacitor-live-activities 用于在使用 @capgo/capacitor-live-activities 中的本机功能 API 概述 为 API 的实现细节概述 简介 为 __CAPGO_KEEP_0__ 的实现细节概述 API 密钥 为 API 密钥的实现细节,以及 设备 为设备的实现细节。