Utilizzo di @capgo/capacitor-live-activities

Interfaccia del plugin Capacitor per le attività in tempo reale di iOS.

Installa

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

Configurazione di iOS

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

Esegui bunx cap open ios.
Aggiungi un Estensione di widget abilita e configura Includi l'attività in tempo reale.
Imposta i target di distribuzione dell'app e dell'estensione Widget su iOS 16.1 o successivo.
Assicurati che l'estensione sia incorporata nell'app principale.
Tieni un ActivityConfiguration registrato nell'estensione WidgetBundle, con schermo di blocco e tutte le presentazioni dell'isola dinamica.
Aggiungi NSSupportsLiveActivities al 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 Widget deve contenere SwiftUI code che possono decodificare e rendere lo stesso ActivityAttributes e stato di contenuto 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à in tempo reale generato da Xcode non rende automaticamente le strutture JSON passate a questo plugin; l'estensione ha anche bisogno di un renderer di layout nativo compatibile.

Immagine condivisa

When utilizzando i metodi di gestione delle immagini, aggiungi la Capacità di gruppo App alla app principale e all'estensione Widget. Abilita lo stesso gruppo su entrambi i target utilizzando l'identificatore esatto previsto dal plugin:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Le estensioni di attività in tempo reale non possono accedere a rete. Scarica le immagini remote nell'app principale, salvale nel gruppo App condiviso con saveImage, e poi riferisciti all'immagine salvata dal layout. Gli asset incorporati devono anche appartener all'estensione Widget.

Deep Links e Aggiornamenti Push

Registra qualsiasi schema di URL personalizzato utilizzato da behavior.widgetUrl o tapUrl sotto il target dell'app principale Info > Tipi di URL impostazioni.
Per gli aggiornamenti guidati dal server, aggiungi la Avvisi Push abilitare la gestione del token di ActivityKit con APNs.
Aggiungi NSSupportsLiveActivitiesFrequentUpdates aggiungere solo quando l'app richiede aggiornamenti di push di ActivityKit frequenti.

Abilitare la capacità di Avvisi Push da sola non è sufficiente; gli aggiornamenti server-driven richiedono una gestione token nativa e un backend APNs.

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

Cos'è che questo Plugin Espone

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

Esempio di Utilizzo

`areActivitiesSupported`

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

Inizia una nuova attività in tempo reale 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 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/
Docs: /docs/plugins/attività-in-tempo-reale/

Continua da Utilizzo @capgo/capacitor-attività-in-tempo-reale

Se stai utilizzando Utilizzo @capgo/capacitor-attività-in-tempo-reale per pianificare il comportamento dei media e dell'interfaccia nativi, connettilo con @capgo/capacitor-attività-in-vivo per i dettagli di implementazione in @capgo/capacitor-attività-in-vivo, Iniziare per i dettagli di implementazione in Iniziare, Utilizzare @capgo/capacitor-lettore-di-video per la capacità nativa in Utilizzare @capgo/capacitor-lettore-di-video, @capgo/capacitor-lettore-di-video per i dettagli di implementazione in @capgo/capacitor-lettore-di-video, e Utilizzare @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzare @capgo/capacitor-navigazione-nativa.

Attività in tempo reale

Tutorial sulle attività in tempo reale