Uso de la CLI de winapp con Tauri

En esta guía se muestra cómo usar la winapp CLI con una aplicación Tauri para depurar utilizando la identidad del paquete y crear un paquete MSIX de su aplicación.

La identidad del paquete es un concepto básico en el modelo de Windows app. Permite a la aplicación acceder a api de Windows específicas (como notificaciones, seguridad, API de IA, etc.), tener una experiencia de instalación o desinstalación limpia, etc.

Para obtener un ejemplo de trabajo completo, consulte el ejemplo de Tauri en este repositorio.

Prerrequisitos

1. Windows 11
2. Node.js - winget install OpenJS.NodeJS --source winget
3. Cadena de herramientas de Rust : instalación de Rust mediante rustup o winget install Rustlang.Rustup --source winget
4. CLI de winapp - winget install microsoft.winappcli --source winget

1. Crear una nueva aplicación tauri

Comience creando una nueva aplicación Tauri mediante la herramienta de andamiaje oficial.

npm create tauri-app@latest

Siga las indicaciones:

• Nombre del proyecto: tauri-app (o su nombre preferido)
• Idioma de front-end: JavaScript
• Administrador de paquetes: npm
• Plantilla de interfaz de usuario: Vanilla
• Tema de interfaz de usuario: JavaScript

Vaya al directorio project e instale las dependencias:

cd tauri-app
npm install

Ejecute la aplicación para asegurarse de que todo funciona:

npm run tauri dev

2. Actualizar código para comprobar la identidad

Actualizaremos la aplicación para comprobar si se ejecuta con la identidad del paquete. Usaremos la windows en el backend de Rust para acceder a las APIs de Windows y exponerla al front-end.

Cambios del backend (Rust)

1. Agregar dependencia: abra src-tauri/Cargo.toml y agregue las siguientes líneas al final del archivo. Esto agrega los enlaces de API de Windows para que podamos comprobar la identidad del paquete:

   [target.'cfg(windows)'.dependencies]
   windows = { version = "0.58", features = ["ApplicationModel"] }
   

2. Agregar comando: abra src-tauri/src/lib.rs y agregue la get_package_family_name función . Colóquelo antes de la pub fn run() función:

   #[tauri::command]
   fn get_package_family_name() -> String {
       #[cfg(target_os = "windows")]
       {
           use windows::ApplicationModel::Package;
           match Package::Current() {
               Ok(package) => {
                   match package.Id() {
                       Ok(id) => match id.FamilyName() {
                           Ok(name) => name.to_string(),
                           Err(_) => "Error retrieving Family Name".to_string(),
                       },
                       Err(_) => "Error retrieving Package ID".to_string(),
                   }
               }
               Err(_) => "No package identity".to_string(),
           }
       }
       #[cfg(not(target_os = "windows"))]
       {
           "Not running on Windows".to_string()
       }
   }
   

3. Comando Register: en el mismo archivo (src-tauri/src/lib.rs), actualice la run función para registrar el nuevo comando:

   pub fn run() {
       tauri::Builder::default()
           .plugin(tauri_plugin_opener::init())
           .invoke_handler(tauri::generate_handler![greet, get_package_family_name]) // Add get_package_family_name here
           .run(tauri::generate_context!())
           .expect("error while running tauri application");
   }
   

Cambios de front-end (JavaScript)

1. Actualizar HTML: abra src/index.html y agregue un párrafo para mostrar el resultado:

   <!-- ... inside <main> ... -->
   <p id="pfn-msg"></p>
   

2. Actualizar lógica: abra src/main.js para invocar el comando y mostrar el resultado:

   const { invoke } = window.__TAURI__.core;
   
   // ... existing code ...
   
   async function checkPackageIdentity() {
     const pfn = await invoke("get_package_family_name");
     const pfnMsgEl = document.querySelector("#pfn-msg");
   
     if (pfn !== "No package identity" && !pfn.startsWith("Error")) {
       pfnMsgEl.textContent = `Package family name: ${pfn}`;
     } else {
       pfnMsgEl.textContent = `Not running with package identity`;
     }
   }
   
   window.addEventListener("DOMContentLoaded", () => {
     // ... existing code ...
     checkPackageIdentity();
   });
   

3. Ahora, ejecute la aplicación como de costumbre:

   npm run tauri dev
   

   Debería ver "No se está ejecutando con la identidad del paquete" en la ventana de la aplicación. Esto confirma que la compilación de desarrollo estándar se está ejecutando sin identidad de paquete.

3. Inicializar Project con la CLI de winapp

El winapp init comando configura todo lo que necesita en un solo uso: manifiesto de aplicación y recursos. El manifiesto define la identidad de la aplicación (nombre, publicador, versión) que Windows usa para conceder acceso a la API.

Ejecute el siguiente comando y siga las indicaciones:

winapp init

Cuando se le solicite,

• Nombre del paquete: presione Entrar para aceptar el valor predeterminado (tauri-app)
• Nombre del editor: Presione Intro para aceptar el valor predeterminado o escriba su nombre.
• Versión: presione Entrar para aceptar 1.0.0.0.
• Punto de entrada: presione Entrar para aceptar el valor predeterminado (tauri-app.exe)
• Configuración de SDKs: seleccione "No configurar SDKs" (Tauri utiliza un módulo de windows Rust, no los encabezados del SDK de C++).

Este comando hará lo siguiente:

• Crear Package.appxmanifest : el manifiesto que define la identidad de la aplicación
• Crear la carpeta Assets — iconos necesarios para el empaquetado MSIX y la publicación en la Tienda

Puede abrir Package.appxmanifest para personalizar aún más las propiedades, como el nombre para mostrar, el publicador y las funcionalidades.

4. Depurar con identidad

Para depurar con identidad, es necesario compilar el back-end de Rust y ejecutarlo con winapp run. Dado que npm run tauri dev administra el ciclo de vida del proceso, es más difícil integrar la identidad allí. En su lugar, crearemos un script personalizado. No se necesita ningún certificado ni firma para la depuración.

1. Agregar script: abra package.json y agregue un nuevo script tauri:dev:withidentity:

   "scripts": {
     "tauri": "tauri",
     "tauri:dev:withidentity": "cargo build --manifest-path src-tauri/Cargo.toml && (if not exist dist mkdir dist) && copy /Y src-tauri\\target\\debug\\tauri-app.exe dist\\ >nul && winapp run .\\dist"
   }
   

   Lo que hace este script:

   • cargo build ...: vuelve a compilar el back-end de Rust.
   • copy ... dist\\: almacena provisionalmente solo el archivo exe en una dist carpeta (la target\debug carpeta es muy grande y contiene artefactos de compilación intermedios que no forman parte de la aplicación).
   • winapp run .\\dist: registra un paquete de diseño flexible (al igual que una instalación MSIX real) e inicia la aplicación.

2. Ejecute el script:

   npm run tauri:dev:withidentity
   

Ahora debería ver la aplicación abierta y mostrar un "Nombre de familia del paquete", confirmando que se está ejecutando con la identidad. Ahora puede empezar a usar y depurar las API que requieren la identidad del paquete, como Notificaciones o las nuevas API de IA, como PhiLice.

5. Paquete con MSIX

Una vez que esté listo para distribuir la aplicación, puede empaquetarla como MSIX que proporcionará la identidad del paquete a la aplicación.

En primer lugar, añada un script pack:msix a su package.json.

"scripts": {
  "tauri": "tauri",
  "tauri:dev:withidentity": "...",
  "pack:msix": "npm run tauri -- build && (if not exist dist mkdir dist) && copy /Y src-tauri\\target\\release\\tauri-app.exe dist\\ >nul && winapp pack .\\dist --cert .\\devcert.pfx"
}

Lo que hace este script:

• npm run tauri -- build: compila el back-end de Rust en modo de lanzamiento.
• copy ... dist\\: almacena provisionalmente solo el archivo exe en una dist carpeta (la target\release carpeta es muy grande y contiene artefactos de compilación intermedios que no forman parte de la aplicación).
• winapp pack .\\dist --cert .\\devcert.pfx: empaqueta y firma la aplicación como MSIX.

Generación de un certificado de desarrollo

Los paquetes MSIX deben estar firmados. Para las pruebas locales, genere un certificado de desarrollo autofirmado:

winapp cert generate --if-exists skip

Construir, preparar y empaquetar

npm run pack:msix

Instalación del certificado

Para poder instalar el paquete MSIX, debe confiar en el certificado de desarrollo en el equipo. Ejecute este comando como administrador (solo tiene que hacerlo una vez por certificado):

winapp cert install .\devcert.pfx

Instalación y ejecución

Instale el paquete haciendo doble clic en el archivo generado .msix o mediante PowerShell:

Add-AppxPackage .\tauri-app.msix

Una vez instalada, puedes iniciar la aplicación desde el menú Inicio. Usted debería ver la aplicación que se ejecuta con autenticación de usuario.

Tips

1. Una vez que esté listo para su distribución, puede firmar su MSIX con un certificado de firma de código de una Autoridad de Certificación para que los usuarios no tengan que instalar un certificado autofirmado.
2. El Microsoft Store firmará el MSIX por usted, no es necesario firmar antes del envío.
3. Es posible que tenga que crear varios paquetes MSIX, uno para cada arquitectura que admita (x64, Arm64).

Pasos siguientes

• Distribute a través de winget: Envíe su MSIX al repositorio Windows Administrador de paquetes Community
• Publicar en la Microsoft Store: Utiliza winapp store para enviar tu paquete
• Configurar CI/CD: Usa la acción de GitHub para automatizar el empaquetado en la tubería
• Explore Windows APIs: Con la identidad del paquete, ahora puede usar notificaciones, IA en el dispositivo y otras APIs dependientes de la identidad