Usando @capgo/capacitor-live-activities

La interfaz del plugin de Actividades en vivo de Capacitor para la administración de Actividades en vivo de iOS.

Instale

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

Configuración de iOS

Instalar y sincronizar el plugin no crea la interfaz de usuario nativa de Actividad en vivo. Antes de llamar startActivity, configure 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 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 WidgetBundlecon Pantalla de Bloqueo y todas las presentaciones de Dynamic Island.
Agregar NSSupportsLiveActivities a la meta principal del app Info.plist.

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

La agregación de la meta sola no es suficiente. La aplicación nativa o el complemento deben llamar a las API de solicitud, actualización y finalización de ActivityKit. La extensión de Widget debe contener SwiftUI code que pueda descodificar y renderizar el mismo ActivityAttributes y estado de contenido utilizado por esas llamadas. Incluya modelos compartidos de ActivityKit en ambas metas del app 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 complemento; la extensión también necesita un renderizador de diseños nativos compatibles.

Imágenes Compartidas

Cuando se utilicen los métodos de gestión de imágenes, agregue el Grupos de Aplicación capacidad a las metas del app y la extensión de Widget. Active el mismo grupo en ambas metas utilizando el identificador exacto esperado por el complemento:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

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 saveImage, y luego refiérase a la imagen guardada desde el diseño. Los activos empaquetados también deben pertenecer a la meta de la extensión de Widget.

Enlaces Profundos y Actualizaciones de Envío

Registre cualquier esquema de URL personalizado utilizado por behavior.widgetUrl o tapUrl bajo la configuración principal del objetivo de la aplicación Info > Tipos de URL Configuración.
Para actualizaciones impulsadas por el servidor, agregue la Capacidad de notificaciones de push y implemente el manejo de tokens de ActivityKit con APNs.
Agregar NSSupportsLiveActivitiesFrequentUpdates solamente 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. El Dynamic Island 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 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 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`

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/

Sigue adelante desde [Usando @capgo/capacitor-actividades-en-vivo](https://capgo.com/Cap-go/capacitor-actividades-en-vivo/ "Usando @capgo/capacitor-actividades-en-vivo").

Si estás utilizando [Usando @capgo/capacitor-actividades-en-vivo](https://capgo.com/Cap-go/capacitor-actividades-en-vivo/ "Usando @capgo/capacitor-actividades-en-vivo"). para planificar el comportamiento de medios y interfaz nativa, conecta con [@capgo/capacitor-actividades-en-vivo](https://capgo.com/Cap-go/capacitor-actividades-en-vivo/ "@capgo/capacitor-actividades-en-vivo"). for the implementation detail in @capgo/capacitor-live-activities, para obtener detalles de implementación en Iniciar sesión. [Usando @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-reproductor-de-videos](https://__CAPGO_KEEP_0__.com/Cap-go/__CAPGO_KEEP_1__-reproductor-de-videos/ "Usando @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-reproductor-de-videos"). para obtener la capacidad nativa en [Usando @capgo/capacitor-reproductor-de-videos](https://capgo.com/Cap-go/capacitor-reproductor-de-videos/ "Usando @capgo/capacitor-reproductor-de-videos"). for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-reproductor-de-vídeo para los detalles de implementación en @capgo/capacitor-reproductor-de-vídeo, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa.

Icono de actividades en vivo

Tutorial sobre Actividades en vivo