Getting Started
インストールステップやこのプラグインのフルマークダウンガイドまでのすべてのステップを含むセットアップ用の質問をコピーする。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-webview-version-checker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/webview-version-checker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
インストール
「インストール」のセクションCapgoのAI-Assistedセットアップを使用してプラグインをインストールできます。AIツールにCapgoスキルを追加するには、以下のコマンドを実行してください。
npx 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.Manualセットアップを使用する場合は、以下のコマンドを実行してプラグインをインストールし、以下のプラットフォーム固有の指示に従ってください。
-
パッケージのインストール
ターミナル画面 bun add @capgo/capacitor-webview-version-checker -
ネイティブプロジェクトを同期
ターミナル画面 bunx cap sync -
オプション: プラグイン設定を追加 デフォルトの設定 (
WebviewVersionChecker: {}) または、提示と閾値の動作をカスタマイズできます。capacitor.config.ts.
デフォルトの動作 (主な用途)
「デフォルトの動作 (主な用途)」というセクションこのプラグインは、デフォルトではブラウザリストスタイルの互換性規則を使用します。
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あなたのカスタムマップ:メジャーバージョン => パーセンテージ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 }] }
JavaScriptを使用した高度な使用方法
「JavaScriptを使用した高度な使用方法」というセクション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',}このプラグインは、ユーザーがアプリを更新するように誘導されながらも、アプリを開いて使用できるように、実行時イベントとネイティブのプロンプトUIを追加します。
評価順序:
- デバイス共有閾値モード(+データセット)、提供された場合
minimumDeviceSharePercent+データセットが提供された場合のデバイス共有閾値モード - 最新バージョンモード (
latestVersion/latestVersionApiUrl) - 最小の主なフォールバック (
minimumMajorVersion)
Android プロバイダー処理
Android プロバイダー処理のセクションCapacitor によって使用される Android 上の Capacitor の両方の WebView プロバイダー モデルをサポートしています。
- Android 5-6 と 10+: Android System WebView (
com.google.android.webview) - Android 7-9: Google Chrome (
com.android.chrome)
Getting Started から続けてください
Getting Started から続けてくださいCapacitor を使用している場合 Getting Started native メディアとインターフェイスの動作を計画するには、接続してください @capgo/capacitor-webview-version-checker のネイティブ機能を使用するために@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