Zum Inhalt springen
Capgo

Erste Schritte

  1. Paket installieren

    Terminal-Fenster
    npm i @capgo/home-indicator

  2. Mit nativen Projekten synchronisieren

    Terminal-Fenster
    npx cap sync

  3. Plugin konfigurieren

    Home-Indikator ausblenden:

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

    // Home-Indikator ausblenden
    await HomeIndicator.hide();

    Home-Indikator anzeigen:

    // Home-Indikator anzeigen
    await HomeIndicator.show();
    

    // Sichtbarkeitsstatus prüfen
    const { hidden } = await HomeIndicator.isHidden();
    console.log('Ist ausgeblendet:', hidden);

    Keine zusätzliche Einrichtung erforderlich. Das Plugin funktioniert nur auf iOS-Geräten mit Home-Indikator (iPhone X und neuer).

  4. Auto-Hide-Konfiguration

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

    // Auto-Hide-Verhalten konfigurieren
    await HomeIndicator.setAutoHidden({
      autoHidden: true // Auto-Hide aktivieren
    });
    

    // Der Home-Indikator wird nach einigen Sekunden automatisch ausgeblendet
    // und erscheint wieder, wenn der Benutzer den Bildschirm berührt

  5. Erweiterte Verwendung

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

    export class ImmersiveMode {
      private isImmersive = false;
    

      async enterImmersiveMode() {
        this.isImmersive = true;
    

        // Home-Indikator ausblenden
        await HomeIndicator.hide();
    

        // Auto-Hide für bessere UX aktivieren
        await HomeIndicator.setAutoHidden({ autoHidden: true });
    

        // Statusleiste für vollständige Immersion ausblenden
        // StatusBar.hide(); // Bei Verwendung von @capacitor/status-bar
      }
    

      async exitImmersiveMode() {
        this.isImmersive = false;
    

        // Home-Indikator anzeigen
        await HomeIndicator.show();
    

        // Auto-Hide deaktivieren
        await HomeIndicator.setAutoHidden({ autoHidden: false });
    

        // Statusleiste anzeigen
        // StatusBar.show(); // Bei Verwendung von @capacitor/status-bar
      }
    

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

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

      setupAppLifecycle() {
        // App-Statusänderungen behandeln
        App.addListener('appStateChange', async ({ isActive }) => {
          if (!isActive && this.isImmersive) {
            // App ging in den Hintergrund, möglicherweise Indikator anzeigen
            await HomeIndicator.show();
          } else if (isActive && this.isImmersive) {
            // App kam in den Vordergrund, immersiven Modus wiederherstellen
            await HomeIndicator.hide();
          }
        });
      }
    }

API-Referenz

Section titled “API-Referenz”

Methoden

Section titled “Methoden”

hide()

Section titled “hide()”

Blendet den Home-Indikator aus.

Gibt zurück: Promise<void>

show()

Section titled “show()”

Zeigt den Home-Indikator an.

Gibt zurück: Promise<void>

isHidden()

Section titled “isHidden()”

Prüft, ob der Home-Indikator derzeit ausgeblendet ist.

Gibt zurück: Promise<{ hidden: boolean }>

setAutoHidden(options: { autoHidden: boolean })

Section titled “setAutoHidden(options: { autoHidden: boolean })”

Konfiguriert das Auto-Hide-Verhalten für den Home-Indikator.

Parameter:

  • options.autoHidden: boolean - Auto-Hide aktivieren oder deaktivieren

Gibt zurück: Promise<void>

Schnittstellen

Section titled “Schnittstellen”
interface AutoHiddenOptions {
  autoHidden: boolean;
}


interface HiddenResult {
  hidden: boolean;
}

Plattformhinweise

Section titled “Plattformhinweise”

iOS

Section titled “iOS”
  • Funktioniert nur auf Geräten mit Home-Indikator (iPhone X und neuer)
  • Erfordert iOS 11.0 oder neuer
  • Auto-Hide macht den Indikator durchscheinend und blendet ihn nach Inaktivität aus
  • Der Indikator erscheint wieder, wenn Benutzer von unten wischen

Android

Section titled “Android”
  • Dieses Plugin hat keine Auswirkungen auf Android
  • Android verwendet unterschiedliche Navigationsgesten/-tasten

Häufige Anwendungsfälle

Section titled “Häufige Anwendungsfälle”
  1. Spiele: Vollbild-Gaming ohne Ablenkungen
  2. Videoplayer: Immersive Videowiedergabe
  3. Fotobetrachter: Vollbild-Fotogalerien
  4. Präsentationen: Ablenkungsfreie Präsentationen
  5. Kiosk-Apps: Öffentliche Anzeigeanwendungen

Best Practices

Section titled “Best Practices”

  1. Benutzerkontrolle: Bieten Sie immer eine Möglichkeit, den immersiven Modus zu verlassen

    // Geste oder Button zum Umschalten des immersiven Modus hinzufügen
    const toggleButton = document.getElementById('toggle-immersive');
    toggleButton.addEventListener('click', () => {
      immersiveMode.toggleImmersiveMode();
    });

  2. Auto-Hide für Spiele: Verwenden Sie Auto-Hide für besseres Spielerlebnis

    // Für Spiele bietet Auto-Hide die beste Balance
    await HomeIndicator.setAutoHidden({ autoHidden: true });

  3. Systemgesten respektieren: Beeinträchtigen Sie nicht die Systemnavigation

  4. Status speichern: Merken Sie sich die Präferenz des Benutzers für den immersiven Modus

Fehlerbehebung

Section titled “Fehlerbehebung”

Home-Indikator wird nicht ausgeblendet:

  • Überprüfen Sie, ob das Gerät einen Home-Indikator hat (iPhone X+)
  • Prüfen Sie, ob die iOS-Version 11.0 oder höher ist
  • Stellen Sie sicher, dass die App den Fokus hat

Auto-Hide funktioniert nicht:

  • Auto-Hide erfordert Benutzerinteraktion zur Aktivierung
  • Der Indikator wird durchscheinend, nicht vollständig ausgeblendet

Indikator erscheint unerwartet wieder:

  • Dies ist normales iOS-Verhalten für Systemgesten
  • Verwenden Sie Auto-Hide für weniger aufdringliches Verhalten