Menggunakan @capgo/capacitor-aktivitas-nyata

Capacitor Plugin Aktivitas Langsung untuk Mengelola Aktivitas Langsung iOS.

Pasang

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

Pengaturan iOS

Menginstal dan sinkronkan plugin tidak menciptakan UI Aktivitas Live native. Sebelum memanggil startActivityKonfigurasi ActivityKit di Xcode:

Pengaturan bunx cap open ios.
Tambahkan Ekstensi Widget Target dan aktifkan Termasuk Aktivitas Live.
Pastikan aplikasi dan Ekstensi Widget ditargetkan ke iOS 16.1 atau lebih tinggi.
Pastikan ekstensi diintegrasikan ke aplikasi utama.
Simpan ActivityConfiguration Dalam WidgetBundle dengan Layar Kunci dan semua presentasi Dynamic Island.
Tambahkan NSSupportsLiveActivities ke target aplikasi utama's Info.plist.

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

Mengambahkan target sendiri tidak cukup. Aplikasi asli atau plugin harus memanggil API ActivityKit, update, dan akhir. Ekstensi Widget harus mengandung SwiftUI code yang dapat menerjemahkan dan menampilkan status konten yang sama yang digunakan oleh panggilan tersebut. Termasuk model ActivityKit bersama di target aplikasi utama dan Ekstensi Widget. Template Live Activity yang dihasilkan Xcode tidak secara otomatis menampilkan tata letak JSON yang dikirimkan ke plugin ini; ekstensi juga memerlukan renderer tata letak native yang kompatibel. ActivityAttributes Gambar Bersama

Ketika menggunakan metode pengelolaan gambar, tambahkan

Grup Aplikasi ke target aplikasi utama dan Ekstensi Widget. Aktifkan grup yang sama di kedua target menggunakan identifier yang tepat yang diharapkan oleh plugin: Ekstensi Aktivitas Langsung tidak dapat mengakses jaringan. Unduh gambar remote di aplikasi utama, simpan mereka ke Grup Aplikasi bersama dengan

group.<MAIN_APP_BUNDLE_ID>.liveactivities

, dan kemudian referensi gambar yang disimpan dari tata letak. Sumber daya yang dibundel harus juga dimiliki oleh target Ekstensi Widget. saveImagePengalihan Kedalaman dan Perbarui Push

Pengalihan Kedalaman dan Perbarui Push

Daftarkan skema URL khusus apa pun yang digunakan oleh behavior.widgetUrl atau tapUrl di bawah target aplikasi utama's Info > Tipe URL pengaturan.
Untuk pembaruan yang dikendalikan server, tambahkan kemampuan Push Notifications dan implementasikan pengelolaan token ActivityKit dengan APNs. Tambahkan hanya ketika aplikasi memerlukan pembaruan push ActivityKit yang sering.
Mengaktifkan kemampuan Push Notifications sendiri tidak cukup; pembaruan yang dikendalikan server memerlukan pengelolaan token asli dan backend APNs. NSSupportsLiveActivitiesFrequentUpdates 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.

Push Notifications

Kemampuan Push Notifications hanya perlu ditambahkan ketika aplikasi memerlukan pembaruan push yang sering dari ActivityKit.

Apa yang Dapat Diketahui Plugin Ini

areActivitiesSupported - Periksa apakah Aktivitas Hidup mendukung perangkat ini. Memerlukan iOS 16.1+ dan dukungan perangkat.
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-aktivitas-nyata/
Dokumen: /docs/plugins/aktivitas-nyata/

Teruskan dari Menggunakan @capgo/capacitor-aktivitas-nyata

Jika Anda menggunakan Menggunakan @capgo/capacitor-aktivitas-nyata untuk merencanakan perilaku media dan antarmuka asli, hubungkannya dengan @capgo/capacitor-aktivitas-nyata untuk detail implementasi di @capgo/capacitor-aktivitas-nyata, Mengawali untuk detail implementasi di Mengawali, Menggunakan @capgo/capacitor-player-video untuk kemampuan asli di Menggunakan @capgo/capacitor-player-video, Penggunaan @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan asli di Menggunakan @capgo/capacitor-native-navigation.

Aktivitas Langsung

Tutorial tentang Aktivitas Langsung