メインコンテンツへスキップ

スタートガイド

GitHub

AIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いのAIツールに Capgo のスキルを追加してください:

ターミナル
bunx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

次に、以下のプロンプトを使用します:

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

手動セットアップを希望する場合は、以下のコマンドを実行してプラグインをインストールし、下記のプラットフォーム別の手順に従ってください:

  1. パッケージをインストール

    ターミナル
    bun add @capgo/capacitor-webview-version-checker
  2. ネイティブプロジェクトを同期

    ターミナル
    bunx cap sync
  3. 任意: プラグイン設定を追加 デフォルト値で実行できます (WebviewVersionChecker: {}) または、プロンプトと閾値の動作を以下でカスタマイズできます capacitor.config.ts.

import { WebviewVersionChecker } from '@capgo/capacitor-webview-version-checker';
const result = await WebviewVersionChecker.check();
console.log(result);
import { WebviewVersionChecker } from '@capgo/capacitor-webview-version-checker';
const result = await WebviewVersionChecker.startMonitoring();
console.log(result);
import { WebviewVersionChecker } from '@capgo/capacitor-webview-version-checker';
const result = await WebviewVersionChecker.stopMonitoring();
console.log(result);
  • リスナー: 画面がアンマウントされたらハンドルを削除します。
  • ネイティブ同期: 実行 bunx cap sync プラグインのアップグレード後。
  • 信頼できる情報源: 信頼 src/definitions.ts GitHub リポジトリ内。

デフォルトでは、このプラグインはBrowserslist形式の互換性ルールを使用します:

  • minimumDeviceSharePercent デフォルトでは 3
  • 共有データセットは、ビルド時に caniuse データからバンドルされます
  • デフォルトのフローでは、ランタイムでのデータセット URL 呼び出しは不要です
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
WebviewVersionChecker: {},
},
};
export default config;

設定だけで簡単にセットアップ(ネイティブプロンプトを表示)

セクション「シンプルな設定のみでセットアップ(ネイティブプロンプトを表示)」
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
WebviewVersionChecker: {
autoPromptOnOutdated: true,
},
},
};
export default config;

高度なしきい値モード(カスタムデータセット)

セクション「高度なしきい値モード(カスタムデータセット)」
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
WebviewVersionChecker: {
minimumDeviceSharePercent: 3,
versionShareByMajor: {
'137': 58.2,
'136': 21.3,
'135': 4.6,
'134': 2.1,
},
autoPromptOnOutdated: true,
},
},
};
export default config;

固定バージョンだけでなく、実際のシェアに基づく互換性を判断したい場合のみ使用してください。

  • minimumDeviceSharePercent: 3 インストール済みのメジャーバージョンが、データセットの少なくとも3%を占めることを意味します。
  • versionShareByMajor カスタムマップです: メジャーバージョン => パーセンテージ。
  • リモートデータを使う場合は、 versionShareApiUrl のいずれかと組み合わせてください:
    • { "versionShareByMajor": { "137": 54.2, "136": 23.8 } }
    • { "shareByMajor": { "137": 54.2, "136": 23.8 } }
    • { "versions": [{ "major": 137, "share": 54.2 }, { "version": "136.0.0.0", "percent": 23.8 }] }
import { WebviewVersionChecker } from '@capgo/capacitor-webview-version-checker';
await WebviewVersionChecker.addListener('webViewOutdated', (status) => {
console.log('Outdated WebView detected', status);
});
await WebviewVersionChecker.check({
minimumMajorVersion: 124,
showPromptOnOutdated: true,
});

Capacitor の設定だけでなく、このプラグインを使う理由

セクション「Capacitor の設定だけでなく、このプラグインを使う理由」

Capacitor は静的な最小バージョンチェックに対応しています:

android: {
minWebViewVersion: 124,
},
server: {
errorPath: 'unsupported-webview.html',
}

このプラグインはランタイムイベントとネイティブのプロンプトUXを追加するので、ユーザーは更新を促されながらもアプリを開いて使い続けられます。

評価順序:

  1. デバイス共有しきい値モード (minimumDeviceSharePercent + dataset)、指定された場合
  2. 最新バージョンモード (latestVersion / latestVersionApiUrl)
  3. 最小メジャーフォールバック (minimumMajorVersion)

このプラグインは、Android 上で Capacitor が使用する両方の WebView プロバイダーモデルをサポートしています:

  • Android 5-6 および 10 以上: Android システム WebView (com.google.android.webview)
  • Android 7〜9: Google Chrome (com.android.chrome)

Getting Startedの続きを進める

「Getting Started からの続き」セクション

使用している場合 スタートガイド ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/capacitor-webview-version-checker の使い方 『Using @capgo/capacitor-webview-version-checker』のネイティブ機能については、 @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 @capgo/capacitor-video-player を使用する際のネイティブ機能については、 @capgo/capacitor-video-player @capgo/capacitor-video-player. の実装の詳細については