Saltar al contenido
Capgo - Live Updates for Capacitor Apps Capgo

Empezando

  1. Instalar el paquete

    Ventana de terminal
    npm i @capgo/capacitor-home-indicator

  2. Sincronización con proyectos nativos

    Ventana de terminal
    npx cap sync

  3. Configurar el complemento

    Ocultar indicador de inicio:

    import { HomeIndicator } from '@capgo/capacitor-home-indicator';
    

    // Hide the home indicator
    await HomeIndicator.hide();

    Mostrar indicador de inicio:

    // Show the home indicator
    await HomeIndicator.show();
    

    // Check visibility status
    const { hidden } = await HomeIndicator.isHidden();
    console.log('Is hidden:', hidden);

    No se requiere configuración adicional. El complemento solo funciona en dispositivos iOS con indicador de inicio (iPhone X y posteriores).

  4. Uso avanzado

    import { HomeIndicator } from '@capgo/capacitor-home-indicator';
    import { App } from '@capacitor/app';
    

    export class ImmersiveMode {
       private isImmersive = false;
    

       async enterImmersiveMode() {
         this.isImmersive = true;
    

         // Hide home indicator
         await HomeIndicator.hide();
    

         // Hide status bar for full immersion
         // StatusBar.hide(); // If using @capacitor/status-bar
       }
    

       async exitImmersiveMode() {
         this.isImmersive = false;
    

         // Show home indicator
         await HomeIndicator.show();
    

         // Show status bar
         // StatusBar.show(); // If using @capacitor/status-bar
       }
    

       async toggleImmersiveMode() {
         const { hidden } = await HomeIndicator.isHidden();
    

         if (hidden) {
           await this.exitImmersiveMode();
         } else {
           await this.enterImmersiveMode();
         }
       }
    

       setupAppLifecycle() {
         // Handle app state changes
         App.addListener('appStateChange', async ({ isActive }) => {
           if (!isActive && this.isImmersive) {
             // App went to background, might want to show indicator
             await HomeIndicator.show();
           } else if (isActive && this.isImmersive) {
             // App came to foreground, restore immersive mode
             await HomeIndicator.hide();
           }
         });
       }
     }

API Referencia

Section titled “API Referencia”

Métodos

Section titled “Métodos”

hide()

Section titled “hide()”

Oculta el indicador de inicio.

Devoluciones: Promise<void>

show()

Section titled “show()”

Muestra el indicador de inicio.

Devoluciones: Promise<void>

isHidden()

Section titled “isHidden()”

Compruebe si el indicador de inicio está actualmente oculto.

Devoluciones: Promise<{ hidden: boolean }>

Interfaces

Section titled “Interfaces”
interface HiddenResult {
  hidden: boolean;
}

Notas de plataforma

Section titled “Notas de plataforma”

iOS

Section titled “iOS”
  • Sólo funciona en dispositivos con indicador de inicio (iPhone X y posteriores)
  • Requiere iOS 11.0 o posterior
  • El indicador reaparece cuando los usuarios deslizan el dedo desde abajo.

Android

Section titled “Android”
  • Este complemento no tiene ningún efecto en Android
  • Android usa diferentes gestos/botones de navegación

Casos de uso comunes

Section titled “Casos de uso comunes”
  1. Juegos: juegos en pantalla completa sin distracciones
  2. Reproductores de vídeo: reproducción de vídeo inmersiva
  3. Visualizadores de fotos: galerías de fotos en pantalla completa
  4. Presentaciones: Presentaciones sin distracciones
  5. Aplicaciones de quiosco: aplicaciones de visualización pública

Mejores prácticas

Section titled “Mejores prácticas”

  1. Control de usuario: proporcione siempre una forma de salir del modo inmersivo

    // Add a gesture or button to toggle immersive mode
    const toggleButton = document.getElementById('toggle-immersive');
    toggleButton.addEventListener('click', () => {
      immersiveMode.toggleImmersiveMode();
    });

  2. Respeta los gestos del sistema: no interfieras con la navegación del sistema

  3. Guardar estado: recuerda la preferencia del usuario por el modo inmersivo

Solución de problemas

Section titled “Solución de problemas”

El indicador de inicio no se oculta:

  • Verifique que el dispositivo tenga un indicador de inicio (iPhone X+)
  • Verifique que la versión iOS sea 11.0 o superior
  • Asegúrese de que la aplicación tenga foco

El indicador reaparece inesperadamente:

  • Este es el comportamiento normal de iOS para los gestos del sistema.