Mostrar una notificación desde JavaScript (enlaces JS)

En esta guía se muestra cómo mostrar directamente una notificación de una aplicación de SDK de Aplicaciones para Windows desde el JavaScript del proceso principal de Electron mediante enlaces de JS generados.

Prerequisites

Antes de comenzar con esta guía, asegúrate de que:

• Completó la configuración del entorno de desarrollo.

Paso 1: Mostrar una notificación desde el proceso principal de Electron

Importe los enlaces generados a través de la importación del #winapp/bindings paquete, compile una notificación de aplicación y muestrelos con el administrador de notificaciones predeterminado:

Requiere @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8. Los proyectos más antiguos pueden actualizarse con npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings para que winapp init configure el mapa de importaciones #winapp/bindings, o bien mantener la forma relativa require('../.winapp/bindings/index.js') (la ruta es relativa a src/index.js; ajústala si tu archivo de entrada se encuentra en otra ubicación).

// src/index.js (Electron main, CommonJS)
const {
  AppNotificationBuilder,
  AppNotificationManager,
} = require('#winapp/bindings');

function showNotification(title, message) {
  const notification = AppNotificationBuilder
    .create()
    .addText(title)
    .addText(message)
    .buildNotification();

  AppNotificationManager.default_.show(notification);
}

const createWindow = () => {
  // ... existing window creation code ...

  // Test the Windows App SDK notification
  showNotification(
    'Hello from Electron!',
    'This notification is powered by the Windows App SDK!'
  );
};

Note

AppNotificationManager.default_ asigna la propiedad Default del SDK de aplicaciones de Windows. Los enlaces generados agregan el final _ porque default es una palabra clave de JavaScript.

Paso 2: Ejecutarlo

Antes de que funcionen las notificaciones, asegúrese de que la aplicación se ejecuta con identidad:

npx winapp node add-electron-debug-identity

Note

Este comando ya forma parte del script postinstall añadido en la guía de configuración, por lo que se ejecuta automáticamente después de npm install. Ejecútelo manualmente siempre que modifique Package.appxmanifest, actualice los recursos de la aplicación o vuelva a instalar las dependencias.

Ahora inicie la aplicación:

npm start

La notificación SDK de Aplicaciones para Windows aparece cuando el proceso principal llama a showNotification.

Pasos siguientes

¡Felicidades! Ya puedes mostrar notificaciones de SDK de Aplicaciones para Windows desde tu aplicación Electron, sin complemento nativo y sin ningún paso de compilación con node-gyp. 🎉

Ahora ya está listo para:

• Empaqueta tu aplicación para su distribución — genera un MSIX que puedes distribuir (el @microsoft/dynwinrt entorno de ejecución ya está en tu dependencies).

O explore otras guías:

• Llamar a Windows API desde JavaScript: elija un archivo y lea sus dimensiones de imagen mediante enlaces JS.
• Llamar a Phi Silica desde JavaScript — resumir texto con la IA de SDK de Aplicaciones para Windows mediante enlaces de JavaScript.
• Ejecutar WinML desde JavaScript — use la detección de proveedores de ML de SDK de Aplicaciones para Windows con onnxruntime-node.
• Creación de un complemento nativo de C++ : homólogo nativo de C++ para las notificaciones.
• Introducción: vuelva a la guía principal.

Recursos adicionales

• Documentación de la CLI de winapp : referencia completa de la CLI (init, restore, node generate-bindings).
• Aplicación de ejemplo de Electron — ejemplo funcional completo, incluidos los bindings de JS.
• @microsoft/dynwinrt : el entorno de ejecución que alimenta los enlaces generados.
• @microsoft/dynwinrt-codegen : el generador de código.