Dieser Beitrag zeigt, wie man aus einer einfachen Tauri 2 App eine Multi Window App machen, indem wir das App Fenster einfach klonen. Hierzu benötigen wir ein paar Anpassungen im Tauri 2 Frontend und im Rust Backend.
Tauri App klonen: Die Vorteile mehrerer Fenster
Die Vorteile liegen auf der Hand: Du kannst in Deiner Tauri App mehrere unabhängige Fenster öffnen. Deine Nutzer können parallel in verschiedenen Bereichen arbeiten, Einstellungen in einem separaten Fenster anpassen oder Daten vergleichen – jedes Fenster lädt unabhängig, alle Fenster teilen sich die gleiche Datenquellen.
Produktivität steigern:
Multi-Window-Support ermöglicht echtes Multitasking. Deine Nutzer arrangieren die Fenster nach Belieben auf ihrem Desktop.
Native Desktop-Feel:
Moderne Desktop-Apps haben mehrere Fenster. Damit konkurrierst du auf Augenhöhe mit etablierten Lösungen.
Flexibilität:
Jedes Fenster kann unterschiedliche Inhalte laden – perfekt für spezialisierte Tools oder Detailansichten.
Minimaler Resourcen-Verbrauch:
Im Gegensatz zu Electron ist Tauri leichtgewichtig. Mehrere Fenster bleiben performant.
User Experience :
Fenster-Klonen macht deine Tauri App professioneller und nutzerfreundlicher. Ein kleines Feature mit großer Wirkung.
Tauri 2: Anpassungen im Backend
In src-tauri/src/lib.rs fügen wir eine entsprechende Funktion als Tauri-Command hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
use tauri::Manager; use tauri::WebviewUrl; use tauri::AppHandle; #[tauri::command] fn clone_window( app: AppHandle, width: u32, height: u32, x: i32, y: i32, url: String, ) { let label = format!("clone-{}", uuid::Uuid::new_v4()); let t = app.package_info().name.as_str(); let title = format!("{} (Clone)", t ); tauri::WebviewWindowBuilder::new( &app, label, WebviewUrl::App(url.into()), ) .inner_size(width as f64, height as f64) .position(x as f64, y as f64) // offset .title(title) .build() .unwrap(); } |
Und registrieren diese weiter unten als invoke_handler:
|
1 2 3 4 5 |
#[cfg_attr(mobile, tauri::mobile_entry_point)] pub fn run() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![ping, clone_window]) ... |
In diesem Beispiel gibt es schon ein Tauri-Command namens ping. Sollte das bei Dir nicht existieren, dann entferne ping aus dem InvokeHandler Array.
Als Nächstes setzen wir die notwendigen Capabilities in src-tauri/capabilities/default.json:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "$schema": "../gen/schemas/desktop-schema.json", "identifier": "default", "description": "enables the default permissions", "windows": [ "main", "*" ], "permissions": [ "core:default", "dialog:default", "core:webview:allow-create-webview-window", "core:window:allow-outer-position", "core:window:allow-inner-position", "core:window:allow-outer-size", "core:window:allow-inner-size", "core:window:allow-scale-factor", "core:window:allow-primary-monitor" ] } |
In unserem Beispiel sind das alle Zeilen, die mit core:webview: und core:window: beginnen.
Die Datei src-tauri/Cargo.toml ergänzen wir um das UUID-Paket und aktivieren das v4 Featureset:
|
1 2 |
[dependencies] uuid = {version = "1.1.19", features = ["v4"] } |
Die Rust Funktion baut über den WebviewWindowBuilder eine neue Fenster-Instanz und gibt dieser eine neue UUID V4 als ID mit. Damit auch das Klonen eines bereits geklonten Fensters klappt, müssen die entsprechenden Capabilities freigeschaltet werden. Die Rust-Funktion selbst ist ein invokable Tauri-Command, d.h. es kann über das Tauri Frontend per JavaScript aufgerufen werden.
Tauri 2: Integration im Frontend
Im Tauri Frontend benötigen wir dann noch eine JavaScript-Funktion zum Klonen des aktuellen Fensters, die z.B. über einen Button-ClickEvent getriggert wird:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { invoke } from '@tauri-apps/api/core' import { getCurrentWindow } from '@tauri-apps/api/window' async function cloneWindow() { const url = window.location.hash // Quasar route const appWindow = getCurrentWindow() const pos = await appWindow.outerPosition() await invoke('clone_window', { width: 1024, height: 800, x: pos.x, y: pos.y, url, }) } |
Die aktuelle URL wird ebenfalls gekloned. Das neue Fenster zeigt dann die aktuelle Menü-Auswahl der Tauri App zum Zeitpunkt des Klonens.
Eine funktionsfähige Demo findest Du im GitHub Repo meines Tauri2-Quasar Projekts.
