시작하기

설치

AI 지원 설정으로 플러그인을 설치할 수 있습니다. 다음 명령어로 AI 도구에 Capgo 스킬을 추가하세요:

bunx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

그다음 아래 prompt를 사용하세요:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-live-reload` plugin in my project.

Manual Setup을 선호한다면, 다음 명령어를 실행하여 플러그인을 설치하고 아래의 플랫폼별 지침을 따르세요:

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

가져오기

import { LiveReload } from '@capgo/capacitor-live-reload';

빠른 시작

import { LiveReload } from '@capgo/capacitor-live-reload';

const result = await LiveReload.configureServer({ url: 'https://example.com' });
console.log(result);

예시: 연결하기

import { LiveReload } from '@capgo/capacitor-live-reload';

const result = await LiveReload.connect();
console.log(result);

예시: 연결 해제

import { LiveReload } from '@capgo/capacitor-live-reload';

const result = await LiveReload.disconnect();
console.log(result);

자주 하는 실수

• 리스너: 화면이 unmount될 때 핸들을 제거하세요.
• 네이티브 동기화: 실행 bunx cap sync 플러그인 업그레이드 후.
• 단일 진실 공급원: 신뢰 src/definitions.ts GitHub 레포지토리에서.

API 개요

configureServer

이후 연결에 사용할 원격 개발 서버 설정을 저장합니다.

import { LiveReload } from '@capgo/capacitor-live-reload';

const result = await LiveReload.configureServer({ url: 'https://example.com' });
console.log(result);

connect

활성화된 연결이 없는 경우 WebSocket 연결을 수립합니다.

import { LiveReload } from '@capgo/capacitor-live-reload';

const result = await LiveReload.connect();
console.log(result);

disconnect

현재 WebSocket 연결을 종료하고 자동 재연결을 비활성화합니다.

import { LiveReload } from '@capgo/capacitor-live-reload';

const result = await LiveReload.disconnect();
console.log(result);

getStatus

현재 연결 상태를 반환합니다.

import { LiveReload } from '@capgo/capacitor-live-reload';

const result = await LiveReload.getStatus();
console.log(result);

reload

Capacitor WebView를 전체 리로드합니다.

import { LiveReload } from '@capgo/capacitor-live-reload';

await LiveReload.reload();

reloadFile

런타임이 지원하는 경우 단일 파일/모듈을 리로드합니다(지원하지 않으면 전체 리로드로 대체됩니다).

import { LiveReload } from '@capgo/capacitor-live-reload';

await LiveReload.reloadFile({ path: 'path/to/file' });

타입 참조

ConfigureServerOptions

export interface ConfigureServerOptions {
  /**
   * Base URL for the dev server (e.g. https://dev.local:5173).
   * When a connection is established the Capacitor WebView navigates to this URL.
   */
  url: string;
  /** Optional WebSocket path override when different from /ws. */
  websocketPath?: string;
  /** Extra headers sent when creating the WebSocket connection. */
  headers?: Record<string, string>;
  /** Automatically reconnect when the socket closes unexpectedly. Default: true. */
  autoReconnect?: boolean;
  /** Delay (ms) between reconnection attempts. Default: 2000. */
  reconnectInterval?: number;
}

LiveReloadStatus

export interface LiveReloadStatus {
  connected: boolean;
  url?: string;
}

FileUpdatePayload

export interface FileUpdatePayload {
  path: string;
  hash?: string;
}

LiveReloadEventCallback

export type LiveReloadEventCallback = (event: LiveReloadEventPayload) => void;

LiveReloadStatusCallback

export type LiveReloadStatusCallback = (status: LiveReloadStatus) => void;

LiveReloadEventPayload

export interface LiveReloadEventPayload {
  type: LiveReloadMessageType;
  /** Populated when type === 'file-update'. */
  file?: FileUpdatePayload;
  /** Optional human-readable message for errors or status changes. */
  message?: string;
}

LiveReloadMessageType

export type LiveReloadMessageType = 'full-reload' | 'file-update' | 'error' | 'connected' | 'disconnected';

기준 소스

이 페이지는 플러그인의 src/definitions.ts에서 생성되었습니다. public API가 업스트림에서 변경되면 동기화를 다시 실행하세요.

Getting Started에서 계속하기

사용 중인 경우 시작하기 대시보드와 API 운영을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-live-reload 사용하기 @capgo/capacitor-live-reload를 사용하여 네이티브 기능을 구현할 때, API 개요 API Overview의 구현 상세 내용은 소개 Introduction의 구현 상세 내용은 API 키 API Keys의 구현 세부 사항은, 디바이스 Devices의 구현 세부 사항은.