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 antarmuka Aktivitas Langsung native. Sebelum memanggil startActivity, atur ActivityKit di Xcode:

Jalankan bunx cap open ios.
Tambahkan sebuah Ekstensi Widget target dan aktifkan Termasuk Aktivitas Langsung.
Set target aplikasi dan Ekstensi Widget ke iOS 16.1 atau lebih baru.
Pastikan ekstensi terintegrasi ke aplikasi utama.
Tahan sebuah ActivityConfiguration terdaftar di ekstensi's WidgetBundle, dengan Layar Kunci dan semua presentasi Pulau Dinamis.
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, update, dan akhir. Ekstensi Widget harus berisi SwiftUI code yang dapat menerjemahkan dan menampilkan yang sama ActivityAttributes dan keadaan konten yang digunakan oleh panggilan-panggilan tersebut. Termasuk model-model ActivityKit yang dibagikan di dalam aplikasi utama dan target Widget Extension. Template Live Activity yang dihasilkan Xcode tidak akan secara otomatis menampilkan tata letak JSON yang dikirimkan ke plugin ini; ekstensi ini juga memerlukan renderer tata letak native yang kompatibel.

Gambar Berbagi

Ketika menggunakan metode pengelolaan gambar, tambahkan Kelompok Aplikasi kemampuan untuk aplikasi utama dan target Ekstensi Widget. Aktifkan kelompok yang sama pada kedua target menggunakan identifier yang tepat seperti yang diharapkan oleh plugin:

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Ekstensi Aktivitas Langsung tidak dapat mengakses jaringan. Unduhlah gambar jarak jauh di aplikasi utama, simpanlah ke App Group Bersamaan dengan saveImageDan kemudian referensi gambar yang disimpan dari layout. Aset yang dibundel juga harus termasuk dalam target Ekstensi Widget.

Tautan Kunci dan Perbarui Push

Daftarkan setiap skema URL kustom yang digunakan oleh behavior.widgetUrl atau tapUrl di bawah target aplikasi utama Informasi > Jenis URL pengaturan.
Untuk pembaruan yang dikendalikan server, tambahkan kemampuan Pemberitahuan Push context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI pendek atau item navigasi. Kunci pesan `push_notifications` (Pemberitahuan Push).
kemampuan dan implementasikan pengelolaan token ActivityKit dengan APNs. NSSupportsLiveActivitiesFrequentUpdates Tambahkan

hanya ketika aplikasi memerlukan pembaruan push ActivityKit yang sering.

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

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

areActivitiesSupported Apa yang Diketengahkan oleh Plugin ini
startActivity - Periksa apakah Aktivitas Live 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 pada 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 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`

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/
Dokumen: /docs/plugins/aktivitas-langsung/

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

Jika Anda menggunakan Gunakan @capgo/capacitor-live-activities untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, Mulai untuk detail implementasi di Mulai, Gunakan @capgo/capacitor-video-player untuk kemampuan native di Gunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Gunakan @capgo/capacitor-native-navigation untuk kemampuan native di Gunakan @capgo/capacitor-native-navigation.

Aktivitas Hidup

Tutorial Aktivitas Langsung