Usando @capgo/capacitor-actividades-en-vivo

Interfaz del plugin Capacitor 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 startActivity, configure ActivityKit en Xcode:

Ejecutar bunx cap open ios.
Agregar un Extensión de Widget diseñar 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 WidgetBundlecon Pantalla de bloqueo y todas las presentaciones de Dynamic Island.
Agregar NSSupportsLiveActivities al objetivo de la aplicación principal's Info.plist.

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

Añadir 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 el mismo ActivityAttributes y estado de contenido utilizado por esas llamadas. Incluir 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ños nativos compatibles.

Imagenes compartidas

When se utilicen los métodos de gestión de imágenes, agregue la App Groups capacidad al objetivo principal de la aplicación 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 actividades en vivo no pueden acceder a la red. Descargue las imágenes remotas en la aplicación principal, guárdelas en el grupo de aplicaciones compartido con saveImage, y luego refiérase a la imagen guardada desde la configuración de la vista. Los activos empaquetados también deben pertenecer al objetivo de la extensión de Widget.

Deep Links y Actualizaciones por Push

Registre cualquier esquema de URL personalizado utilizado por behavior.widgetUrl o tapUrl bajo el objetivo principal de la aplicación's Configuración > Tipos de URL configuración.
Para actualizaciones impulsadas por el servidor, agregue la Notificaciones de Pulsación capacidad y implementar el manejo de tokens de ActivityKit con APNs.
Agregar NSSupportsLiveActivitiesFrequentUpdates solo cuando la aplicación requiere actualizaciones de push 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 es 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 especificado diseño y datos.
updateActivity - Actualizar una Actividad en Vivo existente con nuevos datos.
endActivity - Finalizar 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 diseño especificado y los 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`

Finalizar 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/

Continuar desde el uso de @capgo/capacitor-actividades-en-vivo

Si está utilizando Usando @capgo/capacitor-actividades-en-vivo para planificar el comportamiento de medios nativos e interfaz, conectarlo con @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo, Inicio - Empezar para el detalle de implementación en Inicio - Empezar, Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos, @capgo/capacitor-reproductor-de-videos para el detalle 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

Tutoría sobre Actividades en vivo