Lebihkan ke konten utama
Kembali ke plugin
@capgo/capacitor-aktivitas-hidup
Tutorial
@capgo/capacitor-aktivitas-hidup

Aktivitas Hidup

Atur Aktivitas Hidup iOS dan Layout Island Dinamis dari Capacitor dengan Template JSON yang Dikendalikan

Panduan

Tutorial Aktivitas Langsung

Menggunakan @capgo/capacitor-aktivitas-aktual

Capacitor Aktivitas Langsung Plugin interface untuk mengelola Aktivitas Langsung iOS.

Instal

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

Pengaturan iOS

Instalasi dan sinkronisasi plugin tidak menciptakan UI Aktivitas Langsung native. Sebelum memanggil startActivityKonfigurasi ActivityKit di Xcode:

  1. Jalankan bunx cap open ios.
  2. Tambahkan sebuah Ekstensi Widget target dan aktifkan Termasuk Aktivitas Langsung.
  3. Set target aplikasi dan Ekstensi Widget untuk di-deploy ke iOS 16.1 atau lebih baru.
  4. Pastikan ekstensi dimasukkan ke dalam aplikasi utama.
  5. Tahan sebuah ActivityConfiguration terdaftar di ekstensi's WidgetBundle, dengan Layar Kunci dan semua presentasi Pulau Dinamis.
  6. Tambahkan NSSupportsLiveActivities ke target aplikasi utama's Info.plist.
<key>NSSupportsLiveActivities</key>
<true/>

Menambahkan target sendiri tidak cukup. Aplikasi native atau plugin harus memanggil API ActivityKit request, update, dan end. Ekstensi Widget harus berisi SwiftUI code yang dapat mendekode dan menampilkan yang sama ActivityAttributes dan keadaan konten yang digunakan oleh panggilan-panggilan tersebut. Termasuklah model-model ActivityKit yang dibagikan di kedua target utama aplikasi dan ekstensi Widget. Template Live Activity yang dihasilkan Xcode tidak secara otomatis menampilkan tata letak JSON yang dikirim ke plugin ini; ekstensi juga memerlukan renderer tata letak native yang kompatibel.

Gambar Bersamaan

Ketika menggunakan metode pengelolaan gambar, tambahkan kemampuan Grup Aplikasi ke target utama aplikasi dan ekstensi Widget. Aktifkan grup yang sama di kedua target menggunakan identifier yang tepat seperti yang diharapkan oleh plugin:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Ekstensi Live Activity tidak dapat mengakses jaringan. Unduh gambar remote di aplikasi utama, simpan mereka ke Grup Aplikasi bersamaan dengan saveImage, dan kemudian rujuklah gambar yang disimpan dari tata letak. Aset-aset yang dibundel juga harus dimiliki oleh target ekstensi Widget.

Tautan dalam dan Perbarui Push

  • Daftarkan setiap skema URL khusus yang digunakan oleh behavior.widgetUrl atau tapUrl context HTML teks fragmen dari string UI Capgo yang lebih panjang (kunci induk `alternatives_cta_questions`). Halaman/area: Halaman perbandingan alternatif Capacitor live-update. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman alternatives.astro. Simpanlah istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `alternatives_cta_questions` (Pertanyaan Tindakan Alternatif). | Teks fragmen HTML dari string UI Capgo yang lebih panjang (kunci induk `appflow_cta_questions`). Halaman/area: Halaman perbandingan/migrasi Appflow. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman ionic-appflow.astro. Simpanlah istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `appflow_cta_questions` (Pertanyaan Tindakan Appflow). | Teks fragmen HTML dari string UI Capgo yang lebih panjang (kunci induk `capwesome_cta_questions`). Halaman/area: Halaman perbandingan Capawesome. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman capwesome.astro. Simpanlah istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan Tindakan Capwesome). | Halaman/area: Halaman perbandingan/migrasi Appflow. Peran: Judul atau tagline bagian. Dilihat di: halaman consulting.astro. Simpanlah istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `consulting_faq_subtitle` (Judul Subjudul FAQ Konsultasi). | Halaman/area: Halaman perbandingan/migrasi Appflow. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman ionic-appflow.astro, halaman ionic-enterprise-plugins.astro, halaman solusi/ionic-enterprise-plugins.astro. Kunci pesan `appflow_plugins_or` (Appflow Plugins Atau). pengaturan.
  • Untuk pembaruan yang dikendalikan server, tambahkan kemampuan Pemberitahuan Push context":"Page/area: Situs web pemasaran Capgo. Peran: Label UI pendek atau item navigasi. Kunci pesan `push_notifications` (Pemberitahuan Push)."
  • dan implementasikan pengelolaan token ActivityKit dengan APNs. NSSupportsLiveActivitiesFrequentUpdates Tambahkan

hanya ketika aplikasi memerlukan pembaruan ActivityKit push yang sering.

Mengaktifkan kemampuan Pemberitahuan Push sendiri tidak cukup; pembaruan yang dikendalikan server memerlukan pengelolaan token asli dan backend APNs.

ActivityKit membatasi kombinasi data Aktivitas Live statis dan dinamis hingga 4 KB. Pemandangan Dynamic Island hanya dapat dilihat pada model perangkat yang didukung; perangkat lain menggunakan presentasi Layar Kunci.

  • areActivitiesSupported Apa yang Dapat Diketahui Plugin Ini
  • startActivity - Periksa apakah Aktivitas Live dapat didukung pada perangkat ini. Memerlukan iOS 16.1+ dan dukungan perangkat.
  • updateActivity - Mulai Aktivitas Live baru dengan tata letak dan data yang ditentukan.
  • endActivity - Berhenti Aktivitas Langsung.

Contoh Penggunaan

areActivitiesSupported

Periksa apakah Aktivitas Langsung didukung oleh perangkat ini. Memerlukan iOS 16.1+ dan dukungan perangkat.

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

Mulai Aktivitas Langsung baru dengan tata letak dan data yang ditentukan.

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

Perbarui Aktivitas Langsung yang ada dengan data baru.

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

Berhenti Aktivitas Langsung.

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
});

Referensi Lengkap

Teruskan dari Menggunakan @capgo/capacitor-aktivitas-langsung/

Jika Anda menggunakan Untuk menggunakan @capgo/capacitor-aktivitas-hidup untuk merencanakan perilaku media asli dan antarmuka, hubungkannya dengan @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup, Mulai untuk detail implementasi di Mulai, Untuk menggunakan @capgo/capacitor-pemain-video untuk kemampuan asli di Untuk menggunakan @capgo/capacitor-pemain-video, @capgo/capacitor-pemain-video untuk detail implementasi di @capgo/capacitor-pemain-video, dan Untuk menggunakan @capgo/capacitor-navigasi-asli untuk kemampuan asli di Untuk menggunakan @capgo/capacitor-navigasi-asli.