Usando @capgo/capacitor-live-activities

Capacitor Plugin de Actividades en Vivo para iOS para gestionar las Actividades en Vivo de iOS.

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 usuario nativa de la Actividad en Vivo. Antes de llamar a startActivityConfigure ActivityKit en Xcode:

Ejecutar bunx cap open ios.
Agregar un Extensión de Widget objetivo y habilitar Incluir Actividad en vivo.
Establezca los objetivos de implementación del app y la Extensión de Widget en iOS 16.1 o posterior.
Asegúrese de que la extensión esté integrada en la app 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 app principal's Info.plist.

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

Agregar el objetivo solo no es suficiente. La app 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 lo mismo ActivityAttributes y el estado de contenido utilizado por esas llamadas. Incluya modelos compartidos de ActivityKit en ambos objetivos de la aplicación principal y la extensión de Widget. El template de actividad en vivo generado por Xcode no renderiza automáticamente los diseños JSON pasados a este plugin; la extensión también necesita un renderizador de diseño nativo compatible.

Imágenes Compartidas

Cuando se utilicen los métodos de gestión de imágenes, agregue la capacidad a la aplicación principal y la extensión de Widget. Active el mismo grupo en ambos objetivos utilizando el identificador exacto esperado por el plugin: Las extensiones de actividad en vivo no pueden acceder a la red. Descargue imágenes remotas en la aplicación principal, guárdelas en el grupo de aplicación compartido con

group.<MAIN_APP_BUNDLE_ID>.liveactivities

, y luego refiérase a la imagen guardada desde el diseño. Los activos empaquetados también deben pertenecer al objetivo de la extensión de Widget. saveImageEnlaces Profundos y Actualizaciones de Push

Registre cualquier esquema de dirección URL personalizado utilizado por

o behavior.widgetUrl bajo el objetivo de la aplicación principal de tapUrl Configuración > Tipos de URL __CAPGO_KEEP_0__ configuración.
Para actualizaciones impulsadas por el servidor, agregue la Notificaciones de Pulsación capacidad y implemente el manejo de tokens de ActivityKit con APNs.
Agregar NSSupportsLiveActivitiesFrequentUpdates solo cuando la aplicación requiere actualizaciones de Pulsación de ActivityKit frecuentes.

Habilitar la capacidad de Notificaciones de Pulsación 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.

¿Qué Esta Plugin Exposa

areActivitiesSupported - Verificar si las Actividades en vivo están soportadas en este dispositivo. Requiere iOS 16.1+ y soporte de dispositivo.
startActivity - Iniciar una nueva Actividad en vivo con el diseño especificado y los datos.
updateActivity - Actualizar una Actividad en vivo existente con nuevos datos.
endActivity - Detener una Actividad en vivo.

Ejemplo de uso

`areActivitiesSupported`

Comprueba 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`

Inicia una nueva Actividad en vivo con el especificado diseño 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`

Actualiza 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