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:
- Jalankan
bunx cap open ios. - Tambahkan sebuah Ekstensi Widget target dan aktifkan Termasuk Aktivitas Langsung.
- Set target aplikasi dan Ekstensi Widget untuk di-deploy ke iOS 16.1 atau lebih baru.
- Pastikan ekstensi dimasukkan ke dalam aplikasi utama.
- Tahan sebuah
ActivityConfigurationterdaftar di ekstensi'sWidgetBundle, dengan Layar Kunci dan semua presentasi Pulau Dinamis. - Tambahkan
NSSupportsLiveActivitieske target aplikasi utama'sInfo.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.widgetUrlatautapUrlcontext 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.
NSSupportsLiveActivitiesFrequentUpdatesTambahkan
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.
areActivitiesSupportedApa yang Dapat Diketahui Plugin InistartActivity- 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
- GitHub: https://github.com/Cap-go/capacitor-aktivitas-langsung/
- Docs: /docs/plugins/aktivitas-langsung/
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.