Guida
Tutorial sulle attività in tempo reale
Utilizza @capgo/capacitor-live-activities
L'interfaccia del plugin Capacitor per le attività in tempo reale di 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 dell'attività in tempo reale. 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 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
ActivityConfigurationregistrato nell'estensione'WidgetBundlecon schermo bloccato e tutte le presentazioni di Dynamic Island. - Aggiungi
NSSupportsLiveActivitiesal target principale dell'appInfo.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 stato di contenuto utilizzato da queste chiamate. Includere i modelli condivisi di ActivityKit in entrambi i target dell'app principale e dell'estensione del widget. Il modello di attività live 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. ActivityAttributes Immagini condivise
Quando si utilizzano i metodi di gestione delle immagini, aggiungi il
Gruppi di App abilità al target principale dell'app e all'estensione del 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 di 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 del widget. saveImageCollegamenti profondi e Aggiornamenti Push
Aggiungi
- Registrare qualsiasi schema di URL personalizzato utilizzato da
behavior.widgetUrlotapUrlsotto l'applicazione principale Informazioni > Tipi di URL impostazioni. - Per aggiornamenti server-driven, aggiungi la Notifiche Push capacità e implementa il trattamento del token ActivityKit con APNs.
- Aggiungi
NSSupportsLiveActivitiesFrequentUpdatessolo quando l'app richiede aggiornamenti di push frequenti di ActivityKit.
Abilitare la capacità 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.
Cos'è 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 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-vivo/
- Documentazione: /docs/plugins/attività-in-vivo/
Continua da Utilizzare @capgo/capacitor-attività-in-vivo
Se stai utilizzando Utilizzare @capgo/capacitor-attività-in-vivo per pianificare il comportamento di media e interfaccia nativa, connettilo con @capgo/capacitor-attività-in-vivo per i dettagli di implementazione in @capgo/capacitor-attività-in-vivo, Avvio rapido per i dettagli di implementazione in Avvio rapido, Utilizzare @capgo/capacitor-player-video per la capacità nativa in Utilizzare @capgo/capacitor-player-video, @capgo/capacitor-video-player per i dettagli di implementazione in @capgo/capacitor-video-player, e Utilizza @capgo/capacitor-native-navigation per la capacità nativa in Utilizza @capgo/capacitor-native-navigation.