Commencer

1. Installez le package

   npm

   npm i @capgo/capacitor-home-indicator

   pnpm

   pnpm add @capgo/capacitor-home-indicator

   yarn

   yarn add @capgo/capacitor-home-indicator

   bun

   bun add @capgo/capacitor-home-indicator

2. Synchronisation avec les projets natifs

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Configurez le plugin

   Masquer l’indicateur d’accueil :

   import { HomeIndicator } from '@capgo/capacitor-home-indicator';
   
   // Hide the home indicator
   await HomeIndicator.hide();

   Afficher l’indicateur d’accueil :

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

   iOS

   Aucune configuration supplémentaire requise. Le plugin ne fonctionne que sur les appareils iOS avec un indicateur d’accueil (iPhone X et versions ultérieures).

   Android

   Ce plugin n’a aucun effet sur les appareils Android car ils n’ont pas d’indicateur d’accueil de style iOS.

4. Utilisation avancée

   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 Référence

Méthodes

hide()

Masquer l’indicateur d’accueil.

Retours : Promise<void>

show()

Afficher l’indicateur d’accueil.

Retours : Promise<void>

isHidden()

Vérifiez si l’indicateur d’accueil est actuellement masqué.

Retours : Promise<{ hidden: boolean }>

###Interfaces

interface HiddenResult {
  hidden: boolean;
}

## Remarques sur la plate-forme

iOS

• Fonctionne uniquement sur les appareils dotés d’un indicateur d’accueil (iPhone X et versions ultérieures)
• Nécessite iOS 11.0 ou version ultérieure
• L’indicateur réapparaît lorsque les utilisateurs glissent depuis le bas

Android

• Ce plugin n’a aucun effet sur Android
• Android utilise différents gestes/boutons de navigation

Cas d’utilisation courants

1. Jeux : jeux en plein écran sans distractions
2. Lecteurs vidéo : lecture vidéo immersive
3. Visionneuses de photos : galeries de photos en plein écran
4. Présentations : présentations sans distraction
5. Applications de kiosque : applications d’affichage public

## meilleures pratiques

1. Contrôle utilisateur : fournissez toujours un moyen de quitter le mode immersif

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

2. Respectez les gestes du système : n’interférez pas avec la navigation du système

3. Enregistrer l’état : mémoriser la préférence de l’utilisateur pour le mode immersif

Dépannage

L’indicateur d’accueil ne se cache pas :

• Vérifiez que l’appareil dispose d’un indicateur d’accueil (iPhone X+)
• Vérifiez que la version iOS est 11.0 ou supérieure
• Assurez-vous que l’application a le focus

L’indicateur réapparaît de manière inattendue :

• Il s’agit d’un comportement iOS normal pour les gestes du système