Menggunakan @capgo/capacitor-aktivitas-aktif

Capacitor Aktivitas Langsung Plugin interface untuk mengelola Aktivitas iOS Langsung.

Instal

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

Pengaturan iOS

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

Jalankan bunx cap open ios.
Tambahkan Ekstensi Widget tujuan dan aktifkan Termasuk Aktivitas Hidup yang Aktif.
Pastikan tujuan aplikasi dan Ekstensi Widget diterapkan pada iOS 16.1 atau lebih tinggi.
Pastikan ekstensi terintegrasi dengan aplikasi utama.
Tahan ActivityConfiguration terdaftar di ekstensi's WidgetBundledengan Layar Kunci dan semua presentasi Pulau Dinamis.
Tambahkan NSSupportsLiveActivities ke tujuan aplikasi utama's Info.plist.

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

Menambahkan tujuan sendiri tidak cukup. Aplikasi native atau plugin harus memanggil API Aktivitas Kit, seperti request, update, dan end. Ekstensi Widget harus berisi SwiftUI code yang dapat menerjemahkan dan menampilkan yang sama ActivityAttributes dan konten status yang digunakan oleh panggilan-panggilan tersebut. Termasuk model-model ActivityKit yang dibagikan di kedua 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.

Gambar Bersama

Ketika menggunakan metode pengelolaan gambar, tambahkan Grup Aplikasi kepada target aplikasi utama dan ekstensi Widget. Aktifkan grup yang sama pada 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 yang dibagikan dengan saveImage, dan kemudian referensi gambar yang disimpan dari tata letak. Aset yang dibundel juga harus dimiliki oleh target ekstensi Widget.

Pengaturan Tautan dalam-Depan dan Pengaturan Push

Pendaftarkan setiap skema URL kustom yang digunakan oleh behavior.widgetUrl atau tapUrl di bawah target aplikasi utama's Info > Tipe URL pengaturan.
Untuk pembaruan yang dikendalikan server, tambahkan kemampuan Pemberitahuan Push dan implementasikan pengelolaan token ActivityKit dengan APNs.
Tambahkan NSSupportsLiveActivitiesFrequentUpdates 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 kombinasi data Aktivitas Live statis dan dinamis hingga 4 KB. Dynamic Island hanya terlihat pada model perangkat yang didukung; perangkat lain menggunakan presentasi Layar Kunci.

Apa yang Dibuka 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 - 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 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 Menggunakan @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, Mengawali untuk detail implementasi di Mengawali, Menggunakan @capgo/capacitor-video-player untuk kemampuan native di Menggunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan native di Menggunakan @capgo/capacitor-native-navigation.

Aktivitas Langsung

Tutorial Aktivitas Langsung