Menüleisten-Apps mit Tauri v2 entwickeln: Die versteckten Herausforderungen

Die Entwicklung einer Menüleisten-App mit Tauri v2 erscheint auf den ersten Blick unkompliziert: Ein kleines Icon in der Menüleiste, ein Popover-Fenster – fertig. Doch hinter den Kulissen lauern zahlreiche Edge Cases, die selbst erfahrene Entwickler*innen vor Rätsel stellen können. Besonders wenn die App auf älteren Geräten performant laufen soll, wird die Umsetzung zur Herausforderung.

Wer eine solche App entwickelt, sollte sich nicht nur auf die Grundfunktionen konzentrieren, sondern auch unvorhergesehene Szenarien bedenken. Ein Beispiel: Ein Fenster, das sich nicht wie erwartet positioniert oder plötzlich im Dock erscheint. Solche Details entscheiden darüber, ob Nutzer*innen die App als professionell oder fehlerhaft wahrnehmen.

Grundlegende Einrichtung mit Tauri v2

Tauri v2 bietet native Unterstützung für Menüleisten-Apps, was die Implementierung deutlich vereinfacht. Doch schon beim Einstieg gibt es Nuancen zu beachten. Ein zentraler Baustein ist die Erstellung des Tray-Icons, das als Ausgangspunkt für alle Interaktionen dient.

use tauri::{ tray::{TrayIconBuilder, TrayIconEvent}, Manager, };

Das folgende Codebeispiel zeigt, wie ein Tray-Icon mit einem Klick-Event erstellt wird, das ein Fenster öffnet oder schließt:

TrayIconBuilder::new()
    .icon(app.default_window_icon().unwrap().clone())
    .on_tray_icon_event(|tray, event| {
        if let TrayIconEvent::Click { .. } = event {
            // Fenster ein- oder ausblenden
            let window = tray.app_handle().get_webview_window("main").unwrap();
            if window.is_visible().unwrap() {
                window.hide().ok();
            } else {
                window.show().ok();
                window.set_focus().ok();
            }
        }
    })
    .build(app)?;

Wichtig ist dabei die korrekte Handhabung der Ereignisse, um eine flüssige Nutzererfahrung zu gewährleisten.

Vermeidung der Dock-Anzeige und App-Umschaltung

Eine Menüleisten-App sollte nicht im Dock oder im App-Wechsel (Cmd+Tab) erscheinen. Andernfalls wirkt sie wie eine reguläre Anwendung und verwirrt Nutzer*innen. Es gibt zwei Möglichkeiten, dieses Verhalten zu steuern:

• Über die `Info.plist`-Datei:

  LSUIElement

• Über die `tauri.conf.json`-Konfiguration:

  {
    "bundle": {
      "macOS": {
        "infoPlist": {
          "LSUIElement": true
        }
      }
    }
  }

Ohne diese Einstellung wird die App standardmäßig als vollwertige Anwendung behandelt – ein häufiger Fehler in der Entwicklung.

Präzise Fensterpositionierung an der Menüleiste

Ein zentrales Problem ist die Positionierung des Popover-Fensters. Tauri v2 platziert es standardmäßig in der Mitte des Bildschirms, was für Nutzer*innen unnatürlich wirkt. Die Lösung: Die Position des Tray-Icons abfragen und das Fenster relativ dazu ausrichten.

fn position_window_near_tray(window: &WebviewWindow, tray_rect: &tauri::PhysicalRect) {
    let window_size = window.outer_size().unwrap();
    let x = tray_rect.position.x + (tray_rect.size.width as i32 / 2) - (window_size.width as i32 / 2);
    let y = tray_rect.position.y + tray_rect.size.height as i32;
    window.set_position(tauri::PhysicalPosition::new(x, y)).ok();
}

Zusätzlich muss die App prüfen, ob das Fenster bei einem zweiten Monitor teilweise außerhalb des sichtbaren Bereichs liegt. Solche Randfälle erfordern eine dynamische Anpassung der Position.

Fensterlogik: Sichtbarkeit vs. Neuerstellung

Entwickler*innen stehen vor der Entscheidung, ob das Fenster bei jedem Aufruf neu erstellt oder nur ein- und ausgeblendet wird. Beide Ansätze haben Vor- und Nachteile:

• Sichtbarkeit beibehalten (show/hide):
• Schneller, da das Fenster im Speicher bleibt.
• Zustand bleibt erhalten (z. B. Eingaben oder Scroll-Position).
• Besser für ältere Hardware geeignet.

• Fenster neu erstellen (create/destroy):
• Ideal für Apps, die bei jedem Öffnen einen frischen Zustand benötigen.
• Längere Ladezeiten, besonders auf älteren Geräten.

In den meisten Fällen ist die show/hide-Methode die bessere Wahl, da sie die Nutzererfahrung verbessert und Performance-Probleme vermeidet.

Automatisches Ausblenden bei Fokusverlust

Nutzer*innen erwarten, dass eine Menüleisten-App verschwindet, sobald sie auf eine andere Anwendung oder den Desktop klicken. Tauri v2 ermöglicht dies mit einem einfachen Event-Listener:

window.on_window_event(|event| {
    if let WindowEvent::Focused(false) = event {
        window.hide().ok();
    }
});

Allerdings gibt es einen kritischen Edge Case: Öffnet die App ein Dialogfenster oder einen Dateiauswahldialog, würde das Hauptfenster sofort ausgeblendet werden, bevor der Dialog erscheint. Eine Lösung ist die Einführung eines Flags, das das automatische Ausblenden unterdrückt, solange ein Kindfenster geöffnet ist.

Fazit: Tauri v2 als solide Basis – aber mit Stolpersteinen

Menüleisten-Apps mit Tauri v2 zu entwickeln, ist machbar, aber nicht ohne Fallstricke. Die größten Herausforderungen liegen in der korrekten Fensterpositionierung, der Handhabung der Sichtbarkeit und der Vermeidung unerwünschter Dock-Anzeigen. Wer diese Aspekte berücksichtigt, wird mit einer stabilen und nutzerfreundlichen App belohnt.

Die Dokumentation von Tauri deckt diese Details oft nicht ausreichend ab – doch mit etwas Recherche und Experimentierfreude lassen sich alle Hürden überwinden. Für Entwicklerinnen, die eine Menüleisten-App auf den Markt bringen möchten, lohnt es sich, Zeit in die Feinjustierung zu investieren. Die Mühe zahlt sich aus, wenn Nutzerinnen die App als zuverlässig und intuitiv empfinden.