Attività in tempo reale plugin Capacitor

Utilizzo di @capgo/capacitor-live-activities

L'interfaccia del plugin Capacitor per le attività in tempo reale per la gestione delle attività iOS.

Installa

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

iOS Setup

Installare e sincronizzare il plugin non crea l'interfaccia nativa dell'attività in tempo reale. Prima di chiamare startActivityConfigura ActivityKit in Xcode:

1. Esegui bunx cap open ios.
2. Aggiungi un Includi l'attività in tempo reale seleziona e abilita Includi attività in tempo reale.
3. Imposta i target di distribuzione per l'app e l'estensione del Widget su iOS 16.1 o successivo.
4. Assicurati che l'estensione sia integrata nell'app principale.
5. Mantieni un ActivityConfiguration registrato nella estensione's WidgetBundleCon Live Update e tutte le presentazioni di Dynamic Island.
6. Aggiungi NSSupportsLiveActivities aggiungere la destinazione dell'app principale Info.plist.

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

Adding the target alone is not sufficient. The native app or plugin must call ActivityKit's request, update, and end APIs. The Widget Extension must contain SwiftUI code that can decode and render the same ActivityAttributes and content state used by those calls. Include shared ActivityKit models in both the main app and Widget Extension targets. The Xcode-generated Live Activity template does not automatically render the JSON layouts passed to this plugin; the extension also needs a compatible native layout renderer.

Immagini Condivise

Quando si utilizzano i metodi di gestione delle immagini, aggiungere Gruppi App Le estensioni delle attività in tempo reale non possono accedere a rete. Scaricare le immagini remote nell'app principale, salvarle nel gruppo di App condiviso con

group.<MAIN_APP_BUNDLE_ID>.liveactivities

e poi fare riferimento all'immagine salvata dal layout. Gli asset incorporati devono anche appartener alla destinazione dell'estensione del widget. saveImageE poi si riferisce all'immagine salvata dal layout. Gli asset raccolti devono anche appartener al target Widget Extension.

Registrare qualsiasi schema di URL personalizzato utilizzato da

• Registra ogni schema di URL personalizzato utilizzato da behavior.widgetUrl o tapUrl sotto la destinazione principale dell'app Info > Tipi di URL impostazioni.
• Per aggiornamenti server-driven, aggiungi la Notifiche Push abilità e implementa il trattamento dei token di ActivityKit con APNs.
• Aggiungi NSSupportsLiveActivitiesFrequentUpdates solo quando l'app richiede aggiornamenti di push di ActivityKit frequenti.

Abilitando la capacità di Push Notifications non è sufficiente; le aggiornamenti server-driven richiedono un trattamento del token nativo e un backend APNs.

ActivityKit limita i dati di Live Activity statici e dinamici combinati a 4 KB. L'Isola Dinamica è visibile solo su modelli di dispositivi supportati; gli altri dispositivi utilizzano la presentazione della schermata di blocco.

Cos'è che questo Plugin Espone

• areActivitiesSupported - Verifica se le attività in tempo reale sono supportate su questo dispositivo. Richiede iOS 16.1+ e supporto del dispositivo.
• startActivity - Avvia una nuova attività in tempo reale con il layout e i dati specificati.
• updateActivity - Aggiorna un'attività in tempo reale esistente con nuovi dati.
• endActivity - Termina un'attività in tempo reale.

- Esempio di utilizzo.

areActivitiesSupported

Controlla se le attività in tempo reale sono supportate su questo dispositivo. Richiede iOS 16.1+ e supporto del 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

- Avvia una nuova attività in tempo reale con il layout e i dati specificati.

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

- Aggiorna un'attività in tempo reale esistente con nuovi dati.

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

- Termina un'attività in tempo reale.

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
});

- Riferimento completo.

• - GitHub: - https://github.com/Cap-go/capacitor-attività-in-tempo-reale/
• Documentazione: /docs/plugins/live-activities/

Continua dall'uso di @capgo/capacitor-live-activities

Se stai utilizzando Utilizza @capgo/capacitor-live-activities per pianificare il comportamento dei media e dell'interfaccia nativi, collega @capgo/capacitor-live-activities per i dettagli di implementazione in @capgo/capacitor-live-activities Guida introduttiva per i dettagli di implementazione in Guida introduttiva Utilizza @capgo/capacitor-video-player per la capacità nativa in Utilizza @capgo/capacitor-video-player @capgo/capacitor-player-video per i dettagli di implementazione in @capgo/capacitor-video-player, e Utilizzando @capgo/capacitor-native-navigation per la capacità nativa in Utilizzando @capgo/capacitor-native-navigation.