Utilizzo di @capgo/capacitor-live-activities

Capacitor Plugin per attività in tempo reale per la gestione delle attività iOS.

Installa

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

Configurazione iOS

L'installazione e la sincronizzazione del plugin non creano l'interfaccia di Live Activity nativa. Prima di chiamare startActivityConfigura ActivityKit in Xcode:

Esegui bunx cap open ios.
Aggiungi un Estensione del widget target e abilita Includi l'attività in tempo reale.
Assicurati di impostare il target dell'app e dell'estensione del widget su iOS 16.1 o successivo.
Assicurati che l'estensione sia incorporata nell'app principale.
Mantieni un ActivityConfiguration registrato nell'estensione' WidgetBundle, con schermo bloccato e tutte le presentazioni dell'isola dinamica.
Aggiungi NSSupportsLiveActivities all'elenco dei target dell'app principale' Info.plist.

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

Aggiungere solo il target non è sufficiente. L'app nativa o il plugin devono chiamare le API di ActivityKit richiesta, aggiornamento e fine. L'estensione del widget deve contenere SwiftUI code che possono decodificare e rendere lo stesso ActivityAttributes e lo stato dei contenuti utilizzato da quelle chiamate. Includi i modelli condivisi di ActivityKit in entrambi i target dell'app principale e dell'estensione Widget. Il modello di attività live generato da Xcode non rende automaticamente le layout JSON passate a questo plugin; l'estensione ha anche bisogno di un renderer di layout nativo compatibile.

Immagini Condivise

Quando si utilizzano i metodi di gestione delle immagini, aggiungi la abilità al target dell'app principale e dell'estensione Widget. Abilita lo stesso gruppo su entrambi i target utilizzando l'identificatore esatto previsto dal plugin: Le estensioni di attività live non possono accedere a rete. Scarica le immagini remote nell'app principale, salvale nel gruppo App Condiviso con

group.<MAIN_APP_BUNDLE_ID>.liveactivities

, e poi riferisciti all'immagine salvata dal layout. Gli asset incorporati devono anche appartener al target dell'estensione Widget. saveImageCollegamenti Profondi e Aggiornamenti Push

Registra qualsiasi schema di URL personalizzato utilizzato da

o behavior.widgetUrl sotto il target dell'app principale di tapUrl Info > Tipi di URL __CAPGO_KEEP_0__ impostazioni.
Per aggiornamenti server-driven, aggiungi la Push Notifications abilità e implementa il gestione dei token di ActivityKit con APNs.
Aggiungi NSSupportsLiveActivitiesFrequentUpdates aggiungilo solo quando l'app richiede aggiornamenti di push di ActivityKit frequenti.

Abilitare la sola abilità di Push Notifications non è sufficiente; gli aggiornamenti server-driven richiedono una gestione nativa dei token 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'è questo Plugin

areActivitiesSupported - Controlla 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 specificato e i dati.
updateActivity - Aggiorna un'attività in tempo reale esistente con nuovi dati.
endActivity - Termina un'attività in diretta.

Esempio di utilizzo

`areActivitiesSupported`

Verifica se le attività in diretta 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 diretta con il layout specificato e i dati.

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 diretta 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 diretta.

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-diretta/
Documentazione: /docs/plugins/attività-in-diretta/

Continua dall'uso di @capgo/capacitor-attività-in-diretta

Se stai utilizzando Usando @capgo/capacitor-live-attività per pianificare la media e il comportamento dell'interfaccia nativa, connettendolo con @capgo/capacitor-live-attività per i dettagli di implementazione in @capgo/capacitor-live-attività, Avvio rapido per i dettagli di implementazione in Avvio rapido, Usando @capgo/capacitor-player-video per la capacità nativa in Usando @capgo/capacitor-player-video, @capgo/capacitor-player-video per i dettagli di implementazione in @capgo/capacitor-player-video, e Usando @capgo/capacitor-navigazione-nativa per la capacità nativa in Usando @capgo/capacitor-navigazione-nativa.

Attività in tempo reale

Tutorial sulle attività in tempo reale