快速入门

安装

你可以使用我们的 AI 辅助设置来安装插件。使用以下命令将 Capgo skills 添加到你的 AI 工具中：

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.

如果你更倾向于手动设置，请运行以下命令安装插件，并参考下文针对各平台的具体说明：

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

常见坑点

• 监听器: 在页面卸载时移除句柄。
• 原生同步: 运行 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当上游的公共 API 发生变化时，请重新运行 sync。

继续阅读入门指南

如果你正在使用 快速入门 来规划 dashboard 和 API 操作，请将其连接至 使用 @capgo/capacitor-live-reload 在使用 @capgo/capacitor-live-reload 时，获取 Native Build 能力： API 概览 关于 API 概览中的实现细节， 简介 有关 Introduction 中的实现细节， API 密钥 有关 API Keys 中的实现细节，以及 设备 有关 Devices 中的实现细节。