Utilizzo di @capgo/capacitor-live-attività

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

Instalando e sincronizzando il plugin non viene creata l'interfaccia nativa dell'attività in tempo reale. Prima di chiamare startActivityConfigura ActivityKit in Xcode:

Esegui bunx cap open ios.
Aggiungi un Estensione del widget e abilita Includi attività in tempo reale.
Imposta l'app e l'estensione del widget per la distribuzione su iOS 16.1 o successivo.
Assicurati che l'estensione sia incorporata nell'app principale.
Tieni un ActivityConfiguration registrato nell'estensione WidgetBundle, con schermo bloccato e tutte le presentazioni dell'isola dinamica.
Aggiungi NSSupportsLiveActivities al main app target Info.plist.

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

L'aggiunta del target da solo non è sufficiente. L'app nativa o il plugin devono chiamare le API di ActivityKit, request, update e end. L'estensione del widget deve contenere SwiftUI code che possono decodificare e rendere lo stesso ActivityAttributes e stato di contenuto utilizzato da quelle chiamate. Includere modelli condivisi ActivityKit in entrambi i target dell'app principale e dell'estensione del widget. Il template Live Activity 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, aggiungere Gruppi di App La capacità di aggiungere al main app e all'estensione del widget. Abilitare lo stesso gruppo su entrambi i target utilizzando l'identificatore esatto previsto dal plugin:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Le estensioni delle attività vive non possono accedere a rete. Scaricare immagini remote nell'app principale, salvarle nel gruppo di App condiviso con saveImagee poi fare riferimento all'immagine salvata dal layout. Gli asset incorporati devono anche appartener al target dell'estensione del widget.

Collegamenti profondi e Aggiornamenti Push

Registrare qualsiasi schema di URL personalizzato utilizzato da behavior.widgetUrl o tapUrl sotto l'applicazione principale di destinazione' Info > Tipi di URL impostazioni.
Per aggiornamenti server-driven, aggiungi la capability di Push Notifications (chiave di messaggio `push_notifications` (Notifiche Push)).
capability e implementa il trattamento dei token di ActivityKit con APNs. NSSupportsLiveActivitiesFrequentUpdates Aggiungi

solo quando l'app richiede aggiornamenti di push di ActivityKit frequenti.

Abilitare la capability di Notifiche Push da sola non è sufficiente; gli aggiornamenti server-driven richiedono un trattamento di token nativo e un backend APNs.

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

areActivitiesSupported Cosa Questo Plugin Espone
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 tempo reale.

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

- Avvia 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 con l'utilizzo di @capgo/capacitor-live-attività

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

Attività in tempo reale

Tutoriale sulle attività in tempo reale