Erste Schritte

Installieren

Du kannst unser KI-gestütztes Setup nutzen, um das Plugin zu installieren. Füge die Capgo Skills mit dem folgenden Befehl deinem KI-Tool hinzu:

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

Nutze dann diesen Prompt:

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

Wenn du ein manuelles Setup bevorzugst, installiere das Plugin mit den folgenden Befehlen und befolge die plattformspezifischen Anweisungen unten:

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

Importieren

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

Quickstart

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

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

Beispiel: Verbindung herstellen

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

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

Beispiel: Trennen

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

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

Häufige Stolperfallen

• Listener: Handles entfernen, wenn Screens unmounten.
• Nativer Sync: ausführen bunx cap sync nach Plugin-Upgrades.
• Single Source of Truth: Vertrauen src/definitions.ts im GitHub Repo.

API Übersicht

configureServer

Speichert die Einstellungen des Remote-Dev-Servers für nachfolgende Verbindungen.

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

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

connect

Stellt eine WebSocket-Verbindung her, falls noch keine aktiv ist.

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

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

disconnect

Schließt die aktuelle WebSocket-Verbindung und deaktiviert den Auto-Reconnect.

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

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

getStatus

Gibt den aktuellen Verbindungsstatus zurück.

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

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

reload

Löst einen vollständigen Reload der Capacitor WebView aus.

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

await LiveReload.reload();

reloadFile

Reload einer einzelnen Datei/eines Moduls, sofern die Runtime dies unterstützt (Fallback auf Full Reload).

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

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

Typreferenz

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

Source of Truth

Diese Seite wurde aus der des Plugins generiert. src/definitions.tsFühre den Sync erneut aus, wenn sich die öffentliche API upstream ändert.

Weiter geht's nach Getting Started

Wenn du es nutzt Erste Schritte um Dashboard- und API-Operationen zu planen, verbinde es mit Verwendung von @capgo/capacitor-live-reload für die native Funktionalität in Using @capgo/capacitor-live-reload, API Übersicht für Details zur Implementierung im API Overview, Einführung für die Implementierungsdetails in der Einleitung, API Schlüssel für das Implementierungsdetail in API Keys und Geräte für die Implementierungsdetails unter Devices.