Getting Started
Copy a setup prompt with the install steps and the full markdown guide for this plugin.
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.
-
Install the package
Terminal window bun add @capgo/capacitor-webview-version-checker -
Sync native projects
Terminal window bunx cap sync -
Optional: add plugin config You can run with defaults (
WebviewVersionChecker: {}) or customize prompt and threshold behavior incapacitor.config.ts.
Default behavior (main use case)
Section titled “Default behavior (main use case)”By default, this plugin uses a Browserslist-style compatibility rule:
minimumDeviceSharePercentdefaults to3- the share dataset is bundled at build time from caniuse data
- no runtime dataset URL call is needed for the default flow
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = { plugins: { WebviewVersionChecker: {}, },};
export default config;Simple config-only setup (show native prompt)
Section titled “Simple config-only setup (show native prompt)”import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = { plugins: { WebviewVersionChecker: { autoPromptOnOutdated: true, }, },};
export default config;Advanced threshold mode (custom dataset)
Section titled “Advanced threshold mode (custom dataset)”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;Use this only if you want compatibility based on real-world share instead of only a fixed version.
minimumDeviceSharePercent: 3means the installed major version must represent at least 3% in your dataset.versionShareByMajoris your custom map: major version => percentage.- If you prefer remote data, use
versionShareApiUrlwith one of:{ "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 }] }
Advanced usage with JavaScript
Section titled “Advanced usage with 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,});Why use this plugin instead of only Capacitor config
Section titled “Why use this plugin instead of only Capacitor config”Capacitor supports static minimum checks:
android: { minWebViewVersion: 124,},server: { errorPath: 'unsupported-webview.html',}This plugin adds runtime events and native prompt UX, so users can still open and use the app while being encouraged to update.
Evaluation order:
- Device-share threshold mode (
minimumDeviceSharePercent+ dataset), if provided - Latest version mode (
latestVersion/latestVersionApiUrl) - Minimum major fallback (
minimumMajorVersion)
Android provider handling
Section titled “Android provider handling”The plugin supports both WebView provider models used by Capacitor on Android:
- Android 5-6 and 10+: Android System WebView (
com.google.android.webview) - Android 7-9: Google Chrome (
com.android.chrome)