跳转至正文

实时活动 Capacitor 插件

通过 Capacitor 使用 JSON 驱动的模板管理 iOS Live Activities 和 Dynamic Island 布局

安装

bun add @capgo/capacitor-live-activities bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-live-activities
  • pnpm add @capgo/capacitor-live-activities
  • yarn add @capgo/capacitor-live-activities

指南

如何在 Capacitor 中使用 Live Activities

使用 @capgo/capacitor-live-activities

用于管理 iOS Live Activities 的 Capacitor Live Activities 插件接口。

安装

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

iOS 配置

安装并同步插件不会自动创建原生 Live Activity UI。在调用 startActivity之前,请在 Xcode 中配置 ActivityKit:

  1. 运行 bunx cap open ios.
  2. 添加一个 小组件扩展 目标并启用 包含 Live Activity.
  3. 将 App 和 Widget Extension 的部署目标设置为 iOS 16.1 或更高版本。
  4. 确保该 Extension 已嵌入主 App 中。
  5. 保持 ActivityConfiguration 已注册在 Extension 的 WidgetBundle中,并支持锁定屏幕及所有 Dynamic Island 展示。
  6. 添加 NSSupportsLiveActivities 至主 App target Info.plist.
<key>NSSupportsLiveActivities</key>
<true/>

仅添加 target 是不够的。原生 App 或 plugin 必须调用 ActivityKit 的 request、update 和 end API。Widget Extension 必须包含能够解码并渲染与这些调用相同的 SwiftUI code ActivityAttributes 及内容状态的视图。请在主 App 和 Widget Extension target 中都包含共享的 ActivityKit 模型。Xcode 生成的 Live Activity 模板不会自动渲染传递给此 plugin 的 JSON 布局;extension 也需要一个兼容的原生布局渲染器。

共享图片

使用图片管理方法时,请为 App Groups capability 添加到主 App 和 Widget Extension target。在两个 target 上使用 plugin 所需的完全一致的 identifier 来启用同一个 group:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Live Activity extension 无法访问网络。请在主 App 中下载远程图片,并使用 saveImage将其保存到共享的 App Group 中,然后在布局中引用该保存的图片。Bundled assets 也必须属于 Widget Extension target。

Deep Links 与 Push Updates

  • 注册由以下项使用的任何自定义 URL scheme behavior.widgetUrl 或 tapUrl 在主 App Target 的 Info > URL Types 中 设置中添加该 Scheme。
  • 若要实现服务端驱动的更新,请添加 推送通知 capability,并使用 APNs 实现 ActivityKit push-token 处理。
  • 添加 NSSupportsLiveActivitiesFrequentUpdates 仅当 App 需要频繁的 ActivityKit 推送更新时才需要。

仅启用 Push Notifications capability 是不够的;服务端驱动的更新需要原生 token 处理和 APNs 后端支持。

ActivityKit 限制静态与动态 Live Activity 数据总量为 4 KB。Dynamic Island 仅在支持的机型上可见;其他设备将通过锁屏界面展示。

插件暴露的内容

  • areActivitiesSupported - 检查此设备是否支持 Live Activities。需要 iOS 16.1+ 及设备支持。
  • startActivity - 使用指定的布局和数据启动新的 Live Activity。
  • updateActivity - 使用新数据更新现有的 Live Activity。
  • endActivity - 结束 Live Activity。

用法示例

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

使用指定的布局和数据启动新的 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
});

完整参考

继续阅读:使用 @capgo/capacitor-live-activities

如果你正在使用 使用 @capgo/capacitor-live-activities 来规划原生媒体和界面行为,并将其与 @capgo/capacitor-live-activities 在 @capgo/capacitor-live-activities 中的实现细节, 快速入门 有关“入门指南”中的实现细节, 使用 @capgo/capacitor-video-player 用于使用 @capgo/capacitor-video-player 时的原生能力, @capgo/capacitor-video-player 在 @capgo/capacitor-video-player 中的实现细节,以及 使用 @capgo/capacitor-native-navigation 用于使用 @capgo/capacitor-native-navigation. 时的原生能力

常见问题

Live Activities 插件常见问题

如何在 Capacitor 应用中安装 Live Activities 插件?

运行 "bun add @capgo/capacitor-live-activities"(或 "npm install @capgo/capacitor-live-activities"),然后运行 "bunx cap sync",让 iOS 和 Android 项目同步原生的 code。最后在你的应用 code 中从 "@capgo/capacitor-live-activities" 导入即可。

@capgo/capacitor-live-activities 是否支持 React、Vue 和 Angular?

支持。Live Activities 是一个 Capacitor 包,因此它支持任何在 Capacitor 中运行的 Web 框架,包括 Ionic、React、Vue、Angular、Svelte 以及纯 JavaScript。

@capgo/capacitor-live-activities 支持哪个版本的 Capacitor?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-live-activities 是免费开源的吗?

是的。code 的源码已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-live-activities/,且可以从 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

我可以在不经过 App Store 审核的情况下,更新使用了 Live Activities 的 code 吗?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待 App 审核即可发布 Live Activities 变更

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo