Passer à la navigation

Démarrage

  1. Installez le package

    Fenêtre de terminal
    bun add @capgo/capacitor-webview-version-checker
  2. Synchronisez les projets natifs

    Fenêtre de terminal
    bunx cap sync
  3. Facultatif : ajoutez la configuration du plugin Vous pouvez exécuter avec les valeurs par défaut (WebviewVersionChecker: {}) ou personnaliser le comportement de la commande et du seuil. capacitor.config.ts.

Par défaut, ce plugin utilise une règle de compatibilité de style Browserslist :

  • minimumDeviceSharePercent par défaut 3
  • le jeu de données partagé est bundlé à l'heure de la construction à partir des données caniuse
  • aucune appelle de URL de jeu de données en temps de exécution n'est nécessaire pour le flux par défaut
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
WebviewVersionChecker: {},
},
};
export default config;

Configuration simple uniquement (afficher la fenêtre native)

Section intitulée « Configuration simple uniquement (afficher la fenêtre native) »
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
WebviewVersionChecker: {
autoPromptOnOutdated: true,
},
},
};
export default config;

Mode de seuil avancé (jeu de données personnalisé)

Section intitulée « Mode de seuil avancé (jeu de données personnalisé) »
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;

Utilisez ceci uniquement si vous souhaitez une compatibilité basée sur la part réelle dans le monde réel au lieu d'une version fixe.

  • minimumDeviceSharePercent: 3 ce qui signifie que la version majeure installée doit représenter au moins 3% dans votre ensemble de données.
  • versionShareByMajor C'est votre carte personnalisée : version majeure => pourcentage.
  • Si vous préférez les données à distance, utilisez versionShareApiUrl avec l'un des :
    • { "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,
});

Pourquoi utiliser ce plugin au lieu de seulement la configuration Capacitor

Section intitulée “Pourquoi utiliser ce plugin au lieu de seulement la configuration Capacitor”

Capacitor prend en charge les vérifications de minimum statiques :

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

Ce plugin ajoute des événements de runtime et une expérience de dialogue native, afin que les utilisateurs puissent toujours ouvrir et utiliser l'application tout en étant incités à mettre à jour.

Ordre d'évaluation :

  1. Mode de partage de dispositif (mode + ensemble de données), si fourniminimumDeviceSharePercent Mode de version la plus récente (
  2. Minimum de version majeure (latestVersion / latestVersionApiUrl)
  3. Gestion du fournisseur AndroidminimumMajorVersion)

The plugin supports both WebView provider models used by Capacitor on Android:

  • Android 7-9 : Google Chrome (com.google.android.webview)
  • Android 7-9 : Google Chrome (com.android.chrome)