Menggunakan @capgo/capacitor-aktivitas-langsung

Antarmuka Plugin Capacitor Aktivitas Langsung untuk mengelola Aktivitas Langsung iOS.

Instalasi

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

Pengaturan iOS

Menginstal dan sinkronisasi plugin tidak menciptakan UI Aktivitas Langsung Nativ. Sebelum memanggil startActivity, konfigurasi ActivityKit di Xcode:

Jalankan bunx cap open ios.
Tambahkan Ekstensi Widget Mencari dan mengaktifkan Termasuk Aktivitas Langsung.
Pastikan target aplikasi dan Ekstensi Widget didefinisikan ke iOS 16.1 atau lebih tinggi.
Pastikan ekstensi terintegrasi ke dalam aplikasi utama.
Tahan ActivityConfiguration terdaftar di ekstensi WidgetBundle, dengan Layar Blokir dan semua presentasi Pulau Dinamis.
Tambahkan NSSupportsLiveActivities ke target aplikasi utama Info.plist.

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

Mengaktifkan target sendiri tidak cukup. Aplikasi native atau plugin harus memanggil API Aktivitas Langsung request, update, dan end. Ekstensi Widget harus berisi SwiftUI code yang dapat menerjemahkan dan menampilkan konten yang sama. ActivityAttributes dan status konten yang digunakan oleh panggilan tersebut. Termasuk model Aktivitas Langsung yang dibagikan di target aplikasi utama dan Ekstensi Widget. Template Aktivitas Langsung yang dihasilkan Xcode tidak secara otomatis menampilkan tata letak JSON yang dikirimkan ke plugin ini; ekstensi juga memerlukan renderer tata letak native yang kompatibel.

Gambar Bersamaan

When menggunakan metode pengelolaan gambar, tambahkan kemampuan App Groups ke target aplikasi utama dan Ekstensi Widget. Aktifkan kelompok yang sama pada kedua target menggunakan identifier yang tepat yang diharapkan oleh plugin: App Groups Tidak dapat mengakses jaringan. Unduh gambar remote di aplikasi utama, simpan ke App Group bersamaan dengan __CAPGO_KEEP_0__, dan kemudian referensi gambar yang disimpan dari layout. Aset yang dibundel juga harus dimiliki oleh target Ekstensi Widget.

group.<MAIN_APP_BUNDLE_ID>.liveactivities

Deep Links dan Push Updates saveImagePendaftarkan setiap skema URL khusus yang digunakan oleh __CAPGO_KEEP_1__ atau __CAPGO_KEEP_2__ di bawah target aplikasi utama's

Info > Jenis URL

Pengaturan. behavior.widgetUrl Untuk pembaruan yang dikendalikan oleh server, tambahkan tapUrl Pengaturan Pengaturan Pengaturan
Pengaturan Pemberitahuan Push kemampuan dan implementasi pengelolaan token push ActivityKit dengan APNs.
Tambahkan NSSupportsLiveActivitiesFrequentUpdates hanya ketika aplikasi memerlukan pembaruan push ActivityKit yang sering.

Mengaktifkan kemampuan Pemberitahuan Push sendiri tidak cukup; pembaruan yang dikendalikan oleh 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.

Apa yang Dikembangkan oleh Plugin ini

areActivitiesSupported - Periksa apakah Aktivitas Live didukung pada perangkat ini. Memerlukan iOS 16.1+ dan dukungan perangkat.
startActivity - Mulai Aktivitas Live Baru dengan tata letak dan data yang ditentukan.
updateActivity - Perbarui Aktivitas Live yang ada dengan data baru.
endActivity - Akhiri Aktivitas Live.

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`

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

Teruskan dari Menggunakan @capgo/capacitor-aktivitas-hidup

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

Aktivitas Hidup Nyata

Tutorial tentang Aktivitas Langsung