Chargement natif Plugin Capacitor

Utiliser @capgo/capacitor-native-loader

@capgo/capacitor-native-loader affiche les états de chargement via des vues natives iOS et Android. Utilisez-le lorsque le loader doit rester fluide pendant que le WebView est occupé, lorsque les effets plein écran transparents sont coûteux en CSS, ou lorsqu'un autre plugin natif doit afficher une UI de chargement avant que JavaScript ne soit prêt.

Installer

npm install @capgo/capacitor-native-loader
npx cap sync

Loader natif plein écran

import { NativeLoader } from '@capgo/capacitor-native-loader';

const { id } = await NativeLoader.show({
  style: 'siri',
  placement: 'fullscreen',
  message: 'Preparing your session',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  scrimColor: 'rgba(3, 7, 18, 0.42)',
  interactionMode: 'block',
});

await initializeAppData();
await NativeLoader.hide({ id });

Edge Loader avec redimensionnement de la WebView

await NativeLoader.setWebViewLayout({
  mode: 'inset',
  insets: { top: 96 },
  animated: true,
});

await NativeLoader.show({
  style: 'wave',
  placement: 'top',
  message: 'Syncing changes',
  interactionMode: 'passThrough',
});

Une fois le chargement terminé, restaurez la WebView :

await NativeLoader.hideAll({ restoreWebView: true });

Barre de progression supérieure style Chrome

Utilisez le loader de progression natif pour afficher une barre de chargement de type navigateur au-dessus de la WebView, sans solliciter le CSS pour l'animation lors de tâches intensives.

const { id } = await NativeLoader.show({
  style: 'chrome',
  placement: 'top',
  colors: ['#4285f4', '#34a853', '#fbbc05', '#ea4335'],
  thickness: 4,
  interactionMode: 'passThrough',
  webView: {
    mode: 'resize',
    insets: { top: 12 },
    restoreOnHide: true,
  },
});

await NativeLoader.hide({ id, restoreWebView: true });

Loader edge style Siri V2

Utiliser siri-v2 pour un loader natif plein écran qui fait défiler une couleur sur le bord de l'écran pendant que la WebView reste visible.

const { id } = await NativeLoader.show({
  style: 'siri-v2',
  placement: 'fullscreen',
  colors: ['#71f6ff', '#8b5cf6', '#ff4ecd', '#fff7ad'],
  thickness: 10,
  scrimColor: 'rgba(3, 7, 18, 0.10)',
  interactionMode: 'passThrough',
});

await NativeLoader.hide({ id });

Lottie Loader

await NativeLoader.show({
  style: 'lottie',
  placement: 'center',
  asset: {
    type: 'lottie',
    source: 'loader.json',
    loop: true,
  },
});

Les assets intégrés au bundle sont idéaux pour les loaders de démarrage, car ils sont disponibles avant les requêtes réseau et l'initialisation JavaScript.

Appels aux plugins natifs

Le plugin expose des API natives publiques pour qu'un autre plugin puisse afficher ou masquer les loaders directement.

Swift :

import CapgoCapacitorNativeLoader

let id = NativeLoader.shared.show(options: [
  "style": "orbit",
  "placement": "fullscreen",
  "message": "Opening secure session"
])

NativeLoader.shared.hide(id: id)

Kotlin :

import app.capgo.nativeloader.NativeLoader

val id = NativeLoader.show(
  activity = activity,
  options = mapOf(
    "style" to "orbit",
    "placement" to "fullscreen",
    "message" to "Loading profile",
  ),
  webView = bridge.webView,
)

NativeLoader.hide(id)

Liens utiles

• GitHub : https://github.com/Cap-go/capacitor-native-loader/
• Docs : /docs/plugins/native-loader/

Continuer avec l'utilisation de @capgo/capacitor-native-loader

Si vous utilisez Utiliser @capgo/capacitor-native-loader pour planifier le comportement des médias et de l'interface natifs, connectez-l’à @capgo/capacitor-native-loader pour les détails d'implémentation, Prise en main for setup, Utilisation de @capgo/capacitor-native-navigation pour la mise en page native Chrome et WebView, et Utiliser @capgo/capacitor-transitions pour les transitions de route WebView.