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: Verbinden

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 beim Unmounten von Screens entfernen.
• 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 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 automatischen 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

Lädt eine einzelne Datei/ein Modul neu, wenn die Runtime das unterstützt (Fallback: vollständiger 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 wird aus dem Plugin generiert src/definitions.ts. Führe den Sync erneut aus, wenn sich das ö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 @capgo/capacitor-live-reload verwenden für die native Funktion bei der Nutzung von @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 das Implementierungsdetail in Devices.