Saltar al contenido principal
Capgo logo
Volver a plugins
@capgo/capacitor-actividades-en-vivo
Tutorial
@capgo/capacitor-actividades-en-vivo

Actividades en vivo

Gestione las actividades en vivo de iOS y los diseños de la isla dinámica desde Capacitor con plantillas JSON impulsadas

Descargas/mes

0

GitHub Stars

6

Guía

Tutoriales sobre Actividades en Vivo

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 Nativa. Antes de llamar a startActivityConfigure ActivityKit en Xcode:

  1. Ejecutar bunx cap open ios.
  2. Agregar un Extensión de Widget objetivo y habilitar Incluir Actividad en vivo.
  3. Establezca los objetivos de implementación del app y la extensión de Widget en iOS 16.1 o posterior.
  4. Asegúrese de que la extensión esté integrada en la app principal.
  5. Mantener un ActivityConfiguration registrado en la extensión's WidgetBundle, con Pantalla de bloqueo y todas las presentaciones de Dynamic Island.
  6. Agregar NSSupportsLiveActivities al objetivo 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 la misma ActivityAttributes y el estado de contenido utilizado por esas llamadas. Incluya los modelos compartidos de ActivityKit en ambos objetivos principales de la aplicación y la extensión de Widget. El template de Live Activity generado por Xcode no renderiza automáticamente las plantillas de JSON pasadas a este plugin; la extensión también necesita un renderizador de layout nativo compatible.

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 actividad en vivo no pueden acceder a la red. Descargue las imágenes remotos en la aplicación principal, guárdelas en el grupo de la aplicación compartido con saveImagey luego refiérase a la imagen guardada desde la plantilla. Los activos embutidos también deben pertenecer al objetivo de la extensión de Widget.

Enlaces profundos y actualizaciones de empuje

  • 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 CTAs 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 CTAs 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 CTAs de Capawesome). | 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 de la aplicación principal&#39;s «Info » > «Tipos de URL» 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 Pluggin Exposa?

  • areActivitiesSupported - Verifique si las Actividades en vivo están soportadas en este dispositivo. Requiere iOS 16.1+ y soporte de dispositivo.
  • 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

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

Si está 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.