Usando @capgo/capacitor-actividades-en-vivo

Capacitor Actividades en Vivo: interfaz del plugin para iOS para la gestión de Actividades en Vivo.

Instalar

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

Configuración de iOS

La instalación y sincronización del plugin no crean la interfaz de Actividad en Vivo nativa. Antes de llamar a startActivityConfigura ActivityKit en Xcode:

Ejecutar bunx cap open ios.
Agregar un Extensión de Widget objetivo y habilitar Incluir Actividad en vivo.
Establecer los objetivos de implementación de la aplicación y la extensión de Widget en iOS 16.1 o posterior.
Asegurarse de que la extensión esté integrada en la aplicación principal.
Mantener un ActivityConfiguration registrado en la extensión's WidgetBundle, con Pantalla de bloqueo y todas las presentaciones de Dynamic Island.
Agregar NSSupportsLiveActivities a los objetivos de implementación de la aplicación principal's Info.plist.

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

Agregar el objetivo solo no es suficiente. La aplicación nativa o el plugin deben llamar a las API de ActivityKit, request, update y end. La extensión de Widget debe contener SwiftUI code que puedan descodificar y renderizar la misma ActivityAttributes y el estado de contenido utilizado por esas llamadas. Incluya los modelos compartidos de ActivityKit en ambos objetivos del app principal y la extensión de Widget. La plantilla de actividad en vivo generada por Xcode no renderiza automáticamente los diseños JSON pasados a este plugin; la extensión también necesita un renderizador de diseños nativos compatible.

Imágenes Compartidas

Cuando utilice los métodos de gestión de imágenes, agregue el Grupos de Aplicación capacidad al objetivo del app principal y la extensión de Widget. Active el mismo grupo en ambos objetivos utilizando el identificador exacto esperado por el plugin:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Las extensiones de actividad en vivo no pueden acceder a la red. Descargue las imágenes remotas en el app principal, guárdelas en el grupo de Aplicación compartido con saveImagey luego refiérase a la imagen guardada desde el diseño. Los activos embutidos también deben pertenecer al objetivo de la extensión de Widget.

Enlaces Profundos y Actualizaciones de Push

Registre cualquier esquema de URL personalizado utilizado por behavior.widgetUrl o tapUrl contexto: fragmento de texto HTML de una cadena de UI de Capgo más larga (clave de mensaje `alternatives_cta_questions`). Página/área: página de comparación de alternativas de actualización en vivo de Capacitor. Rol: párrafo de marketing o legal largo. Visto en: página alternatives.astro. Preservar términos de producto y marca de Capgo y términos de desarrollador exactamente. Clave de mensaje `alternatives_cta_questions` (Preguntas de Acción de Alternativas). | Fragmento de texto HTML de una cadena de UI de Capgo más larga (clave de mensaje `appflow_cta_questions`). Página/área: página de comparación/migración de Appflow. Rol: párrafo de marketing o legal largo. Visto en: página ionic-appflow.astro. Preservar términos de producto y marca de Capgo y términos de desarrollador exactamente. Clave de mensaje `appflow_cta_questions` (Preguntas de Acción de Appflow). | Fragmento de texto HTML de una cadena de UI de Capgo más larga (clave de mensaje `capwesome_cta_questions`). Página/área: página de comparación de Capawesome. Rol: párrafo de marketing o legal largo. Visto en: página capwesome.astro. Preservar términos de producto y marca de Capgo y términos de desarrollador exactamente. Clave de mensaje `capwesome_cta_questions` (Preguntas de Acción de Capwesome). | Página/área: página de comparación/migración de Appflow. Rol: etiqueta de UI corta o elemento de navegación. Visto en: página ionic-appflow.astro, página ionic-enterprise-plugins.astro, página soluciones/ionic-enterprise-plugins.astro. Clave de mensaje `appflow_plugins_or` (Appflow Plugins O). bajo el objetivo del app principal's `Info > Tipos de URL` Configuración.
Para actualizaciones impulsadas por el servidor, agregue la notificaciones de push context: Página/área: Sitio web de marketing de Capgo. Rol: Etiqueta de IU corta o elemento de navegación. Clave de mensaje `push_notifications` (Notificaciones de push).
capacidad y implemente el manejo de tokens de ActivityKit con APNs. NSSupportsLiveActivitiesFrequentUpdates Agregar

solo cuando la aplicación requiere actualizaciones de push de ActivityKit frecuentes.

Habilitar la capacidad de Notificaciones de push sola no es suficiente; las actualizaciones impulsadas por el servidor requieren un manejo nativo de tokens y un backend de APNs.

ActivityKit limita los datos de Live Activity estáticos y dinámicos combinados a 4 KB. La Isla Dinámica solo está visible en modelos de dispositivos compatibles; otros dispositivos utilizan la presentación de pantalla de bloqueo.

areActivitiesSupported ¿Qué Esta Plugin Exposa
startActivity - Verifique si las Actividades en vivo están soportadas en este dispositivo. Requiere iOS 16.1+ y soporte de dispositivo.
updateActivity - Inicie una nueva Actividad en vivo con el diseño especificado y los datos.
endActivity - Detener una Actividad en vivo.

Ejemplo de uso

`areActivitiesSupported`

Verificar si las Actividades en vivo están soportadas en este dispositivo. Requiere iOS 16.1+ y soporte de dispositivo.

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`

Iniciar una nueva Actividad en vivo con el esquema de diseño especificado y datos.

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`

Actualizar una Actividad en vivo existente con nuevos datos.

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`

Detener una Actividad en vivo.

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

Referencia completa

GitHub: https://github.com/Cap-go/capacitor-actividades-en-vivo/
Documentación: /docs/plugins/actividades-en-vivo/

Sigue adelante desde Usando @capgo/capacitor-actividades-en-vivo

Si estás utilizando Usando @capgo/capacitor-actividades-en-vivo para planificar el comportamiento de medios y interfaz nativa, conectarlo con @capgo/capacitor-actividades-en-vivo para los detalles de implementación en @capgo/capacitor-actividades-en-vivo, Inicio para los detalles de implementación en Inicio, Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos, @capgo/capacitor-reproductor-de-videos para los detalles de implementación en @capgo/capacitor-reproductor-de-videos, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa.

Actividades en vivo

Tutoriales sobre Actividades en Vivo