Saltar al contenido

Getting Started

GitHub

Puede utilizar nuestra configuración asistida por IA para instalar el complemento. Agregue las Capgo habilidades a su herramienta de IA utilizando el siguiente comando:

Ventana de terminal
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Luego utilice el siguiente prompt:

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

Si prefiere la configuración manual, instale el complemento ejecutando los siguientes comandos y siguiendo las instrucciones específicas de la plataforma a continuación:

  1. Instalar el paquete

    Ventana de terminal
    bun add @capgo/capacitor-webview-version-checker
  2. Sincronizar proyectos nativos

    Ventana de terminal
    bunx cap sync
  3. Opcional: agregar configuración de plugin Puede ejecutar con valores por defecto (WebviewVersionChecker: {}) o personalizar el comportamiento de la solicitud y el umbral en capacitor.config.ts.

Por defecto, este plugin utiliza una regla de compatibilidad estilo Browserslist:

  • minimumDeviceSharePercent se aplica por defecto 3
  • el conjunto de datos compartido se compila en tiempo de compilación desde los datos de caniuse
  • No se necesita URL de conjunto de datos de tiempo de ejecución para el flujo predeterminado.
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
WebviewVersionChecker: {},
},
};
export default config;

Configuración simple solo con configuración (mostrar prompt nativo)

Sección titulada “Configuración simple solo con configuración (mostrar prompt nativo)”
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
WebviewVersionChecker: {
autoPromptOnOutdated: true,
},
},
};
export default config;

Modo de umbral avanzado (conjunto de datos personalizado)

Sección titulada “Modo de umbral avanzado (conjunto de datos personalizado)”
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;

Utilice esto solo si desea compatibilidad basada en la participación real del mundo en lugar de solo una versión fija.

  • minimumDeviceSharePercent: 3 significa que la versión mayor instalada debe representar al menos el 3% en su conjunto de datos.
  • versionShareByMajor es su mapa personalizado: versión mayor => porcentaje.
  • Si prefiere datos remotos, utilice versionShareApiUrl With una de las siguientes opciones:
    • { "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,
});

¿Por qué utilizar este complemento en lugar de solo la configuración Capacitor?

Sección titulada “¿Por qué utilizar este complemento en lugar de solo la configuración Capacitor?”

Capacitor admite comprobaciones de mínimo estático:

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

Este complemento agrega eventos de tiempo de ejecución y UX de solicitud nativa, por lo que los usuarios aún pueden abrir y usar la aplicación mientras se les anima a actualizar.

Orden de evaluación:

  1. Modo de umbral de compartición de dispositivo (+ conjunto de datos), si se proporcionaminimumDeviceSharePercent +
  2. modo de versión más reciente (latestVersion / latestVersionApiUrl)
  3. (fallback mayor mínimo (minimumMajorVersion)

El plugin admite ambos modelos de proveedores de WebView utilizados por Capacitor en Android:

  • Android 5-6 y 10+: WebView del sistema de Android (com.google.android.webview)
  • Android 7-9: Google Chrome (com.android.chrome)

Si estás utilizando Getting Started para planificar el comportamiento de medios y interfaz nativa, conectalo con Usando @capgo/capacitor-webview-version-checker para la capacidad nativa en Usando @capgo/capacitor-webview-version-checker, Usando @capgo/capacitor-live-activities para la capacidad nativa en Usando @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para el detalle de implementación en @capgo/capacitor-live-activities, Usando @capgo/capacitor-video-player para la capacidad nativa en Usando @capgo/capacitor-video-player, y @capgo/capacitor-video-player para el detalle de implementación en @capgo/capacitor-video-player.