メインコンテンツにジャンプ
@capgo/capacitor-ライブリロード アップデート オープンソース

ライブリロード Capacitor プラグイン

開発サーバーに接続して、開発中に即時ホットリロード

インストール

bun add @capgo/capacitor-live-reload bunx cap sync
npm、pnpm、またはyarn
  • npm install @capgo/capacitor-live-reload
  • pnpm add @capgo/capacitor-live-reload
  • yarn add @capgo/capacitor-live-reload

ガイド

Live Reload を Capacitor で使用する方法

Using @capgo/capacitor-live-reload

Capacitor plugin to live reload Capacitor apps from a remote Vite dev server.

インストール

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 __CAPGO_KEEP_0__ WebView を単一のファイル/モジュールでリロードします (実行環境がサポートする場合、フルリロードにフォールバックします)。

例

configureServer()

次回の接続に使用するリモート開発サーバー設定を保存します。

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

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

connect()

既存のWebSocket接続がなければ、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()

__CAPGO_KEEP_0__ WebView を単一のファイル/モジュールでリロードします (実行環境がサポートする場合、フルリロードにフォールバックします)。

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

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

イベントをリスン

addListener ハンドルを返します。画面がアンマウントされたときに呼び出してください。 handle.remove() 画面がアンマウントされたときに呼び出してください。 LiveReload.removeAllListeners() リスナーをすべてクリアするには。

フルリファレンス

@capgo/capacitor-live-reload

Capacitor Live Reload を使用している場合 Using @capgo/capacitor-live-reload native plugin work を計画するには、を接続する Capacitor Live Reload の実装詳細は、@capgo/capacitor-live-reload にあります。 @capgo/capacitorライブリロードの実装詳細 ドキュメント Capacitor Live Reloadの実装詳細については、Getting Startedを参照してください。 Capgo プラグインディレクトリ Capacitor Live Reloadの製品ワークフローについては、Capgo プラグインディレクトリを参照してください。 Capacitor の Capgo プラグイン Capacitor Live Reloadの実装詳細については、Capacitor の Capgo プラグインを参照してください。 プラグインの追加または更新 プラグインの追加または更新の実装詳細については、プラグインの追加または更新を参照してください。

FAQ

Live Reload プラグインの FAQ

Live Reload プラグインを Capacitor アプリにインストールするにはどうすればいいですか?

Run "bun add @capgo/capacitor-live-reload" (または "npm install @capgo/capacitor-live-reload"), すると iOS と Android のプロジェクトが code を自動的に取得します。 capgo/capacitor-live-reload をインポートして、 code で使用してください。

@capgo/capacitor-live-reload は React、Vue、Angular とどのように動作しますか?

はい。Live Reload は Capacitor パッケージなので、Ionic、React、Vue、Angular、Svelte、または単純な JavaScript など、Capacitor 内で実行される任意の Web フレームワークと互換性があります。

どの Capacitor バージョンが @capgo/capacitor-live-reload に対応していますか?

Capgo プラグインは Capacitor のメジャーバージョンに従います: Capacitor のメジャーバージョンと一致するプラグインのメジャーバージョンを使用してください (例: プラグイン v8 と Capacitor 8)。 GitHub の README に記載されている互換性のテーブルに記載されているメンテナンスバージョンを参照してください。

capgo/capacitor-live-reload は無料かつオープンソースですか?

はい。 code のソースコードは GitHub に公開されており、https://github.com/Cap-go/capacitor-live-reload/ で確認できます。また、 npm から無料でインストールできます。バグレポートやプルリクエストは歓迎しています。

code を Live Reload を使用している場合に、アプリストアのレビューなしでアップデートできますか?

プラグインをインストールまたはアップグレードすると、ネイティブ code が変更されるため、新しいストアビルドが必要になります。その後、 Capgo でライブアップデートを使用すると、JavaScript、HTML、CSS の変更が即時で Capgo で配信できます。

アプリレビューの待たずにLive Reloadの変更を配信

Capgoライブアップデートは、JavaScript、HTML、CSSの変更をユーザーに数分でプッシュします。

Capgoから始めましょう