Usando @capgo/capacitor-actividades-en-vivo

Capacitor Actividades en Vivo: interfaz de plugin para 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 Actividad en Vivo nativa. Antes de llamar startActivity, configura ActivityKit en Xcode:

Ejecutar bunx cap open ios.
Agregar un Extensión de Widget objetivo y habilitar Incluir Actividad en vivo.
Establece los objetivos de implementación de la aplicación y la Extensión de Widget en iOS 16.1 o posterior.
Asegúrate de que la extensión esté integrada en la aplicación principal.
Mantén un ActivityConfiguration registrado en el WidgetBundleExtensión, con Pantalla de bloqueo y todas las presentaciones de Isla Dinámica.
Agregar NSSupportsLiveActivities al objetivo principal de la aplicación Info.plist.

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

Agregar solo el objetivo no es suficiente. La aplicación nativa o el plugin deben llamar a las API de ActivityKit, actualización y finalización. 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 ambos objetivos de la aplicación principal y la extensión de Widget. El plantilla de Live Activity 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 compatibles.

Imágenes compartidas

Cuando se utilicen los métodos de gestión de imágenes, agregue el Grupos de la aplicación 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:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Las extensiones de actividades en vivo no pueden acceder a la red. Descargue imágenes remotas en la aplicación principal, guárdelas en el grupo de la aplicación compartido con __CAPGO_KEEP_1__ 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 por push

Registre cualquier esquema de URL personalizado utilizado por __CAPGO_KEEP_2 o CAPGO_KEEP_3__

o behavior.widgetUrl ¿O qué? tapUrl bajo la configuración principal de la aplicación objetivo Info > Tipos de URL configuración.
Para actualizaciones impulsadas por el servidor, agrega la notificaciones de push context":"Page/area: Capgo marketing website. Role: Short UI label or navigation item. Message key `push_notifications` (Push Notifications)."
capacidad y implementa el manejo de tokens de ActivityKit con APNs. NSSupportsLiveActivitiesFrequentUpdates Agregar

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. 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 - Inicie una nueva Actividad en vivo con el diseño especificado y los datos.
updateActivity - Actualice una Actividad en vivo existente con nuevos datos.
endActivity - Finalice una Actividad en vivo.

- Ejemplo de uso

`areActivitiesSupported`

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

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

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

- Finalice 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 @capgo/capacitor-actividades-en-vivo

Si estás utilizando Sigue utilizando @capgo/capacitor-actividades-en-vivo Para planificar el comportamiento de medios y interfaz nativos, conecta @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-actividades-en-vivo con @capgo/capacitor-actividades-en-vivo para obtener detalles de implementación en @capgo/capacitor-actividades-en-vivo Getting Started para obtener detalles de implementación en Getting Started Sigue utilizando @capgo/capacitor-reproductor-de-videos para obtener la capacidad nativa en Sigue utilizando @capgo/capacitor-reproductor-de-videos @capgo/capacitor-reproductor-de-videos para obtener detalles de implementación en @capgo/capacitor-reproductor-de-videos 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