Vai direttamente al contenuto principale
Capgo logo
Indietro ai plugin
@capgo/capacitor-attività-in-vivo
Guida
@capgo/capacitor-attività-in-vivo

Attività in tempo reale

Manage iOS Live Activities and Dynamic Island layouts from Capacitor with JSON-driven templates

Download al mese

0

GitHub Stars

6

Guida

Tutorial sulle attività in tempo reale

Utilizzo di @capgo/capacitor-attività in tempo reale

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

La sincronizzazione del plugin non crea l'interfaccia nativa delle attività in tempo reale. Prima di chiamare startActivityConfigura ActivityKit in Xcode:

  1. Esegui bunx cap open ios.
  2. Aggiungi un Estensione del widget obiettivo e abilita Includi attività in tempo reale.
  3. Assicurati che l'app e l'estensione del widget siano configurate per iOS 16.1 o successiva.
  4. Assicurati che l'estensione sia incorporata nell'app principale.
  5. Tieni un ActivityConfiguration registrato nell'estensione' WidgetBundle, con schermo bloccato e tutte le presentazioni dell'isola dinamica.
  6. Aggiungi NSSupportsLiveActivities alla configurazione di destinazione 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 quelle chiamate. Includi i modelli condivisi ActivityKit in entrambi i target dell'app principale e dell'estensione Widget. La plantilla di attività live generata da Xcode non rende automaticamente le strutture JSON passate a questo plugin; l'estensione richiede inoltre un renderer di layout nativo compatibile.

Immagini condivise

Quando si utilizzano i metodi di gestione delle immagini, aggiungi la Gruppi di App 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:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

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

Collegamenti profondi e Aggiornamenti Push

  • Registra qualsiasi schema di URL personalizzato utilizzato da behavior.widgetUrl o tapUrl context testo di frammento HTML da una stringa UI Capgo più lunga (chiave genitrice `alternatives_cta_questions`). Pagina/area: pagina di confronto delle alternative di Capgo per le live-update. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina alternatives.astro. Preservare i termini del prodotto e del marchio Capgo e dei developer esattamente. Chiave del messaggio `alternatives_cta_questions` (Domande per la CTA delle alternative). | Testo di frammento HTML da una stringa UI Capgo più lunga (chiave genitrice `appflow_cta_questions`). Pagina/area: pagina di confronto e migrazione di Appflow. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina ionic-appflow.astro. Preservare i termini del prodotto e del marchio Capgo e dei developer esattamente. Chiave del messaggio `appflow_cta_questions` (Domande per la CTA di Appflow). | Testo di frammento HTML da una stringa UI Capgo più lunga (chiave genitrice `capwesome_cta_questions`). Pagina/area: pagina di confronto di Capawesome. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina capwesome.astro. Preservare i termini del prodotto e del marchio Capgo e dei developer esattamente. Chiave del messaggio `capwesome_cta_questions` (Domande per la CTA di Capawesome). | Pagina/area: pagina di servizi di consulenza. Ruolo: sottotitolo o didascalia di sezione. Visto in: pagina consulting.astro. Preservare i termini del prodotto e del marchio Capgo e dei developer esattamente. Chiave del messaggio `consulting_faq_subtitle` (Sottotitolo FAQ dei servizi di consulenza). | Pagina/area: pagina di confronto e migrazione di Appflow. Ruolo: breve etichetta UI o elemento di navigazione. Visto in: pagina ionic-appflow.astro, pagina ionic-enterprise-plugins.astro, pagina soluzioni/ionic-enterprise-plugins.astro. Chiave del messaggio `appflow_plugins_or` (Appflow Plugins o). impostazioni.
  • Per aggiornamenti server-driven, aggiungi il Push Notifications context
  • abilita la capacità e implementa il gestione dei token di ActivityKit con APNs. NSSupportsLiveActivitiesFrequentUpdates Aggiungi

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

Abilitare la capacità di Push Notifications da solo 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 combinati a 4 KB. L'Isola Dinamica è visibile solo su modelli di dispositivi supportati; gli altri dispositivi utilizzano la presentazione della schermata di blocco.

  • areActivitiesSupported Cos'è questo Plugin che Espone
  • startActivity - Controlla se le attività in tempo reale sono supportate su questo dispositivo. Richiede iOS 16.1+ e supporto del dispositivo.
  • updateActivity - Avvia una nuova attività in tempo reale con il layout specificato e i dati specificati.
  • endActivity - Termina un'attività in tempo reale.

Utilizzo di esempio

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

Continua da qui: Utilizzo di @capgo/capacitor-live-activities

Se stai utilizzando Utilizzando @capgo/capacitor-live-attività per pianificare il comportamento di media e interfaccia nativa, connettilo 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, Utilizzando @capgo/capacitor-player-video per la capacità nativa in Utilizzando @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.