위젯 키트

@capgo/capacitor-위젯-키트를 사용하여

@capgo/capacitor-widget-kit Capacitor 앱은 WidgetKit 및 Live Activity 경험을 두 가지 방식으로 제어할 수 있습니다:

• 해당된 SVG 템플릿 표면을 렌더링하고 프레임 Switching, 탭 핫 스폿 및 일시 정지/재생 타이머를 지원합니다.
• __CAPGO_KEEP_0__를 유지하여 앱과 위젯이 JSON 세션 상태 및 비동기 메시지를 공유하는 동안 위젯이 완전히 원본 유지.

설치

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

SVG 템플릿 사용 시기

SVG 템플릿을 사용할 때 위젯 표면이 SVG로 설명될 수 있는 경우 위젯 표면을 사용합니다. 앱은 템플릿 정의를 저장하고 원본 브리지는 홀더를 해결하고 위젯 클릭이 나중에 상태를 변경할 수 있습니다.

운동 타이머, 배송 상태 카드, 스포츠 점수 또는 이름된 프레임 사이에 Switching이 충분한 경우에 적합한 예로는 compact UI가 있습니다.

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>`,
          },
        ],
      },
    },
  },
});

앱에서 위젯 액션 처리

위젯 액션은 이벤트로 저장됩니다. 앱이 재개되거나 배경 동기화 단계 후에 읽고 확인하세요.

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 });

__CAPGO_KEEP_0__가 시작하고 중단하는 세션, 공유 상태를 최신 상태로 유지하고 앱과 위젯 사이의 작업을 큐에 넣는 동안 위젯 UI가 스위프트, 코틀린 또는 자바로 직접 빌드될 때 사용하십시오.

Use full-native sessions when the widget UI is better built directly in Swift, Kotlin, or Java. Capacitor still starts and stops the session, keeps shared state current, and queues work between app and 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 },
});

메시지는 앱에서 위젯으로 또는 위젯에서 앱으로 흐를 수 있습니다. 완료 및 확인될 때까지 대기합니다.

작업이 실패하면 오류와 함께 메시지를 완료하십시오.

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 },
});

__CAPGO_KEEP_1__

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

세션을 깨끗하게 중단하세요

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

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

자연스러운 설정 노트

iOS WidgetKit 및 Live Activities를위한 앱 그룹을 구성하고 앱 및 위젯 확장 대상에 설정하세요. 양쪽의 CapgoWidgetKitAppGroup 파일. 인터랙티브 버튼은 위젯 확장에서 플러그인 제공된 네이티브 브리지와 액션 인텐트를 연결해야합니다. Info.plist 전체 참조

__CAPGO_KEEP_0__:

• https://GitHub.com/Cap-go/__CAPGO_KEEP_1__-widget-kit/ https://github.com/Cap-go/capacitor-widget-kit/
• @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-widget-kit을 사용하는 경우 계속하세요

@capgo/capacitor-widget-kit을 사용하는 경우

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-widget-kit을 사용하는 경우 계속하세요. @capgo/capacitor-widget-kit을 사용하는 경우 native 플러그인 작업을 계획하기 위해 연결하세요. @capgo/capacitor-widget-kit @capgo/capacitor-widget-kit의 구현 세부 사항 Getting Started Getting Started의 구현 세부 사항 Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리의 제품 워크플로우 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항 플러그인을 추가하거나 업데이트 플러그인을 추가하거나 업데이트하는 구현 세부 사항