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 nativa delle attività in tempo reale. Prima di chiamare startActivityConfigura ActivityKit in Xcode:

Esegui bunx cap open ios.
Aggiungi un Estensione del widget obiettivo e abilita Includi attività in tempo reale.
Assicurati che l'app e l'estensione del widget siano configurate per iOS 16.1 o successiva.
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 alla configurazione dell'app principale Info.plist.

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

Aggiungere solo l'obiettivo 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 le stesse ActivityAttributes e lo stato dei contenuti utilizzato da queste chiamate. Includere i modelli condivisi di ActivityKit in entrambi i target dell'app principale e dell'estensione Widget. La plantilla di attività live generata da Xcode non rende automaticamente le layout JSON passati a questo plugin; l'estensione richiede inoltre un renderer di layout nativo compatibile.

Immagini condivise

Quando si utilizzano i metodi di gestione delle immagini, aggiungere la Gruppi di App capacità all'app principale e all'estensione Widget. Abilitare lo stesso gruppo su entrambi i target utilizzando l'identificatore esatto previsto dal plugin:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

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

Collegamenti profondi e Aggiornamenti Push

Registrare qualsiasi schema di URL personalizzato utilizzato da behavior.widgetUrl o tapUrl Sotto il target dell'app principale Informazioni > Tipi di URL Impostazioni.
Per aggiornamenti server-driven, aggiungi il Notifiche Push abilità e implementa il gestione dei token di ActivityKit con APNs.
Aggiungi NSSupportsLiveActivitiesFrequentUpdates solo quando l'app richiede aggiornamenti di ActivityKit push frequenti.

Abilitare l'abilità delle Notifiche Push da sola non è sufficiente; gli aggiornamenti server-driven richiedono una gestione di 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.

Cosa 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 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 da Utilizzo di @capgo/capacitor-attività-in-diretta

Se stai utilizzando Utilizzando @capgo/capacitor-attività in tempo reale per pianificare il comportamento di media e interfaccia nativa, connettilo con @capgo/capacitor-attività in tempo reale per i dettagli di implementazione in @capgo/capacitor-attività in tempo reale, Avvio rapido per i dettagli di implementazione in Avvio rapido, Utilizzando @capgo/capacitor-lettore di video per la capacità nativa in Utilizzando @capgo/capacitor-lettore di video, @capgo/capacitor-lettore di video per i dettagli di implementazione in @capgo/capacitor-lettore di video, e Utilizzando @capgo/capacitor-navigazione nativa per la capacità nativa in Utilizzando @capgo/capacitor-navigazione nativa.

Attività in vivo

Tutorial sulle attività in tempo reale