Kit Widget

Menggunakan @capgo/capacitor-widget-kit

@capgo/capacitor-widget-kit Memungkinkan aplikasi Capacitor menggerakkan pengalaman WidgetKit dan Aktivitas Hidup secara dua cara:

• Mengrenderkan permukaan template SVG yang terpecahkan dengan mengganti frame, hotspot sentuh, dan timer pause/play.
• Menggunakan widget sepenuhnya asli sementara aplikasi dan widget berbagi status sesi JSON dan pesan asinkron.

Instal

bun add @capgo/capacitor-widget-kit
bunx cap sync

When Menggunakan Template SVG

Pilih template SVG ketika permukaan widget dapat dijelaskan sebagai SVG. Aplikasi menyimpan definisi template, jembatan asli menyelesaikan tempat, dan sentuhan widget dapat mengubah keadaan nanti.

Contoh yang cocok termasuk timer olahraga, kartu status pengiriman, skor olahraga, atau antarmuka UI yang padat di mana berganti antara frame yang dinamai sudah cukup.

import { CapgoWidgetKit } from '@capgo/capacitor-widget-kit';

const { activity } = await CapgoWidgetKit.startTemplateActivity({
  activityId: 'session-1',
  state: {
    title: 'Chest Day',
    frame: 'summary',
    restDurationMs: 90000,
  },
  definition: {
    id: 'workout-card',
    timers: [{ id: 'rest', durationPath: 'state.restDurationMs' }],
    actions: [
      {
        id: 'next-frame',
        frameMutations: [{ op: 'next', path: 'frame', surface: 'lockScreen' }],
      },
      {
        id: 'toggle-rest',
        timerMutations: [{ op: 'toggle', timerId: 'rest' }],
      },
    ],
    layouts: {
      lockScreen: {
        width: 100,
        height: 40,
        frameIdPath: 'state.frame',
        frames: [
          {
            id: 'summary',
            hotspots: [{ id: 'switch', actionId: 'next-frame', x: 0, y: 0, width: 100, height: 40 }],
            svg: `<svg viewBox="0 0 100 40"><text x="6" y="22">{{state.title}}</text></svg>`,
          },
          {
            id: 'timer',
            hotspots: [{ id: 'pause-play', actionId: 'toggle-rest', x: 0, y: 0, width: 100, height: 40 }],
            svg: `<svg viewBox="0 0 100 40"><text x="6" y="22">{{timers.rest.remainingText}}</text></svg>`,
          },
        ],
      },
    },
  },
});

Proses Tindakan Widget di Aplikasi

Tindakan widget disimpan sebagai acara. Baca dan akui mereka ketika aplikasi kembali atau setelah langkah sinkron latar belakang.

const { events } = await CapgoWidgetKit.listTemplateEvents({
  activityId: activity.activityId,
  unacknowledgedOnly: true,
});

for (const event of events) {
  console.log(event.actionId, event.state, event.timers);
}

await CapgoWidgetKit.acknowledgeTemplateEvents({ activityId: activity.activityId });

When Menggunakan Sesi Penuh-Native

Pilih sesi penuh-native ketika UI widget lebih baik dibangun secara langsung di Swift, Kotlin, atau Java. Capacitor masih memulai dan menghentikan sesi, menjaga keadaan bersama terkini, dan mengantre pekerjaan antara aplikasi dan widget code.

const { session } = await CapgoWidgetKit.startWidgetSession({
  widgetId: 'native-session-1',
  kind: 'workout-controls',
  state: { isRunning: true, selectedSetId: 'set-1' },
  metadata: { accent: '#00d69c' },
});

await CapgoWidgetKit.updateWidgetSession({
  widgetId: session.widgetId,
  merge: true,
  state: { isRunning: false },
});

Antar Pekerjaan Synchronous Asinkron Antara Widget Dan Aplikasi

Pesan dapat mengalir dari aplikasi ke widget atau widget ke aplikasi. Mereka tetap menunggu sampai diakui dan diselesaikan.

const { message } = await CapgoWidgetKit.sendWidgetMessage({
  widgetId: session.widgetId,
  direction: 'widgetToApp',
  name: 'syncWorkoutSet',
  payload: { setId: 'set-1' },
  expectsResponse: true,
});

await CapgoWidgetKit.acknowledgeWidgetMessages({ messageIds: [message.messageId] });

await CapgoWidgetKit.completeWidgetMessage({
  messageId: message.messageId,
  response: { synced: true },
});

Jika pekerjaan gagal, lengkapi pesan dengan kesalahan:

await CapgoWidgetKit.completeWidgetMessage({
  messageId: message.messageId,
  error: 'Sync failed',
});

Hentikan Sesi dengan Bersih

await CapgoWidgetKit.endTemplateActivity({
  activityId: activity.activityId,
  state: { title: 'Workout complete', frame: 'summary' },
});

await CapgoWidgetKit.stopWidgetSession({
  widgetId: session.widgetId,
  state: { isRunning: false },
});

Catatan Pengaturan Native

Untuk WidgetKit iOS dan Aktivitas Hidup, konfigurasi sebuah Kelompok Aplikasi pada target aplikasi dan ekstensi widget, serta atur CapgoWidgetKitAppGroup di kedua Info.plist file. Tombol interaktif memerlukan ekstensi widget yang menghubungkan jembatan native plugin dan intent aksi.

Referensi Lengkap

• GitHub: https://github.com/Cap-go/capacitor-widget-kit/
• Dokumen: /docs/plugins/widget-kit/

Teruskan dari Menggunakan @capgo/capacitor-widget-kit

Jika Anda menggunakan Menggunakan @capgo/capacitor-widget-kit untuk merencanakan pekerjaan plugin native, hubungkan dengan @capgo/capacitor-widget-kit untuk detail implementasi di @capgo/capacitor-widget-kit, Mulai untuk detail implementasi di Mulai, Direktori Plugin Capgo untuk detail proses produk di Direktori Plugin Capgo, Plugin-Plugin Capacitor oleh Capgo untuk detail implementasi di Plugin-Plugin Capacitor oleh Capgo, dan Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin.