Saltar al contenido

Chrome nativo en macOS

La barra de título superpuesta, la transparencia y los efectos de material: las cuatro piezas que solo funcionan juntas, el crate que aplica la vibrancy, y la factura que todo esto pasa en la fase XII.

La barra superpuesta

Es la mitad barata y no arrastra nada. Dos claves:

JSON
"windows": [{  "titleBarStyle": "Overlay",  "hiddenTitle": true}]

Con eso, la barra de título desaparece como banda separada y los tres botones de semáforo flotan encima de tu contenido, en la esquina superior izquierda. Tu interfaz ocupa la ventana entera.

Lo que hay que hacer a cambio es reservarles sitio, porque si no quedan encima de lo que pintes ahí:

CSS
/* Un margen superior izquierdo para que los semáforos no tapen nada.   Alto de barra y ancho de los botones, con holgura. */.cabecera { padding-top: 28px; padding-left: 78px; }

Y solo en macOS, porque en las otras dos plataformas la clave se ignora y ese hueco quedaría vacío. La forma de condicionarlo es preguntar por el sistema operativo desde el frontend y poner un atributo en la raíz del documento, o resolverlo desde Rust al arrancar.

Las cuatro claves de la transparencia

Aquí está el enredo que más se reporta. Para que una ventana sea de verdad translúcida en macOS hacen falta cuatro cosas, y fallar una deja la ventana opaca sin ningún mensaje de error:

La cuarta es la que sorprende a quien viene del navegador: no basta con que el elemento que ves sea transparente; el propio documento tiene que serlo. Un background opaco en body tapa la ventana entera.

CSS
/* Necesario con vibrancy: el motor pinta blanco opaco si no se le dice. */html, body { background: transparent; }

El efecto de material

La transparencia sola da una ventana que deja ver el escritorio, que casi nunca es lo que se quiere. El efecto que hace que una aplicación parezca nativa en macOS es el material difuminado del sistema, y se aplica desde Rust con un crate específico:

Rust
#[cfg(target_os = "macos")]{    use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};    let win = app.get_webview_window("main").unwrap();    apply_vibrancy(&win, NSVisualEffectMaterial::HudWindow, None, None)        .expect("no se pudo aplicar la vibrancy");}

Dos avisos prácticos:

  • La compilación condicional no es opcional. Ese crate no compila en las otras plataformas, así que el bloque va detrás de la condición de sistema.
  • La versión del crate importa. Tauri incorpora internamente una versión de esa biblioteca; enlazar dos versiones distintas a la vez redefine las mismas clases del sistema y el enlazador avisa de símbolos duplicados. Si aparece ese error, la causa es esa y se resuelve fijando la versión que el framework ya trae.

Ese detalle es un buen ejemplo de una clase de problema que aparece cuando una dependencia tuya y una del framework tocan el mismo sistema nativo. No es frecuente, y cuando pasa el mensaje de error no lo explica.

La factura

Aquí está lo que hay que llevarse del nivel, y aparece dos veces en el track porque se decide una vez y se paga otra.

La segunda de las cuatro claves activa interfaces del sistema que Apple no documenta como públicas. Eso tiene dos consecuencias:

  • Una actualización de macOS puede cambiar el comportamiento sin que nadie lo considere una regresión.
  • La Mac App Store rechaza las aplicaciones que las usan.

Es decir: la apariencia translúcida y el canal de distribución por la tienda son incompatibles, y la elección se toma en la semana dos y se descubre en el mes ocho. El nivel 6.2 ya lo avisaba desde el Cargo.toml; aquí es donde se ve lo que se compra con ello.

La última fila es la salida razonable para quien no lo tenga decidido: la barra superpuesta sin transparencia ya mejora mucho el aspecto y no compromete nada.