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 menghubungi startActivityKonfigurasi ActivityKit di Xcode:

Jalankan bunx cap open ios.
Tambahkan sebuah Ekstensi Widget target dan aktifkan Termasuk Aktivitas Langsung.
Set aplikasi dan Ekstensi Widget target pengiriman ke iOS 16.1 atau lebih tinggi.
Pastikan ekstensi terintegrasi dengan aplikas utama.
Tahan ActivityConfiguration terdaftar di ekstensi's WidgetBundle, dengan Layar Kunci dan semua presentasi Pulau Dinamis.
Tambahkan NSSupportsLiveActivities ke app target utama Info.plist.

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

Tidak cukup hanya menambahkan target tunggal. Aplikasi asli atau plugin harus memanggil API ActivityKit, update, dan akhir. Ekstensi Widget harus berisi SwiftUI code yang dapat mendekode dan menampilkan konten yang sama ActivityAttributes dan status konten yang digunakan oleh panggilan tersebut. Termasuk model ActivityKit bersamaan di kedua target aplikasi utama dan Ekstensi Widget. Template Live Activity yang dihasilkan Xcode tidak secara otomatis menampilkan layout JSON yang dikirimkan ke plugin ini; ekstensi juga memerlukan renderer layout native yang kompatibel

Gambar Bersamaan

Ketika menggunakan metode pengelolaan gambar, tambahkan Grup Aplikasi kecapatan kepada aplikasi utama dan Ekstensi Widget. Aktifkan grup yang sama di kedua target menggunakan identifier yang tepat yang diharapkan oleh plugin:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Ekstensi Aktivitas Live tidak dapat mengakses jaringan. Unduh gambar remote di aplikasi utama, simpan mereka ke Grup Aplikasi bersamaan dengan saveImagedan kemudian referensi gambar yang disimpan dari layout. Aset yang dibundel harus juga dimiliki oleh target Ekstensi Widget

Tautan dalam dan Perbarui Push

Pendaftarkan skema URL kustom yang digunakan oleh behavior.widgetUrl atau tapUrl di bawah target aplikasi utama Info > Jenis URL Pengaturan.
Untuk pembaruan yang dikendalikan server, tambahkan kemampuan Push Notifikasi context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Pesan kunci `push_notifications` (Push Notifikasi).
kemampuan dan implementasikan pengelolaan token ActivityKit dengan APNs. NSSupportsLiveActivitiesFrequentUpdates Tambahkan

hanya ketika aplikasi memerlukan pembaruan push ActivityKit yang sering.

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

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

areActivitiesSupported Apa yang Dapat Diketahui Plugin Ini
startActivity - Mulai Aktivitas Hidup baru dengan tata letak dan data yang ditentukan.
updateActivity - Perbarui Aktivitas Hidup yang sudah ada dengan data baru.
endActivity - Akhiri Aktivitas Hidup.

- Contoh Penggunaan

`areActivitiesSupported`

- Periksa apakah Aktivitas Hidup mendukung 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 Hidup 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 Hidup yang sudah 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`

- Akhiri Aktivitas Hidup.

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-live-activities/
- Dokumen: /docs/plugins/live-activities/

Teruskan dari Menggunakan @capgo/capacitor-aktivitas-hidup

Jika Anda menggunakan Menggunakan @capgo/capacitor-aktivitas-hidup Untuk merencanakan perilaku media dan interface native, hubungkannya dengan @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup, Mulai untuk detail implementasi di Mulai, Menggunakan @capgo/capacitor-pemain-video untuk kemampuan native di Menggunakan @capgo/capacitor-pemain-video, @capgo/capacitor-pemain-video untuk detail implementasi di @capgo/capacitor-pemain-video, dan Gunakan @capgo/capacitor-native-navigation untuk kemampuan asli dalam Gunakan @capgo/capacitor-native-navigation.

Aktivitas Hidup

Tutorial Aktivitas Langsung