实时重载 Capacitor 插件

使用 @capgo/capacitor-live-reload

使用 Capacitor 插件，通过远程 Vite 开发服务器实现 Capacitor 应用的 live reload。

安装

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

bunx cap sync 将插件的原生 code 复制到你的原生项目中。每次升级插件后都要重新运行。

导入

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

API 概览

方法	描述
configureServer	存储后续连接所需的远程开发服务器设置。
connect	如果当前未建立连接，则建立 WebSocket 连接。
disconnect	关闭当前的 WebSocket 连接并禁用自动重连。
getStatus	返回当前的连接状态。
reload	触发 Capacitor WebView 的全量重载。
reloadFile	如果运行时支持，则重载单个文件/模块（否则回退到全量重载）。

示例

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

监听事件

addListener 会返回一个句柄。调用 handle.remove() 在屏幕卸载时，或者调用 LiveReload.removeAllListeners() 以清除所有监听器。

完整参考文档

• GitHub 仓库
• 文档
• API 参考文档

继续阅读 使用 @capgo/capacitor-live-reload

如果你正在使用 使用 @capgo/capacitor-live-reload 要规划原生插件工作，请将其与 @capgo/capacitor-live-reload 了解 @capgo/capacitor-live-reload 中的实现细节， 快速入门 有关“入门指南”中的实现细节， Capgo 插件目录 查看 Capgo 插件目录中的产品工作流， Capgo 提供的 Capacitor 插件 有关 Capgo 开发的 Capacitor 插件的实现细节，以及 添加或更新插件 有关添加或更新插件的实现细节。