Creación de un complemento de notificación de C++ para Electron

En esta guía se muestra cómo crear un complemento nativo de C++ que use las API de notificación de Windows App SDK en la aplicación Electron. Este es un excelente punto de partida para comprender los complementos nativos antes de profundizar en escenarios más complejos.

Prerrequisitos

• Completado la configuración del entorno de desarrollo
• Windows 11

Paso 1: Crear un complemento nativo de C++

Use la CLI de winapp para generar una plantilla de complemento de C++:

npx winapp node create-addon --template cpp --name nativeWindowsAddon

Esto crea una nativeWindowsAddon/ carpeta con:

• addon.cc - El código de C++ que llamará a las API de Windows
• binding.gyp - Configuración de construcción para compilación nativa

El comando también agrega un build-addon script a package.json.

Compile el complemento:

npm run build-addon

Paso 2: Agregar código de notificación

Abra nativeWindowsAddon/addon.cc y actualícelo para usar las API de notificación de Windows App SDK. La plantilla generada incluye los encabezados necesarios de Windows SDK y Windows App SDK.

Incluya las dependencias para la API de notificación:

#include <winrt/Microsoft.Windows.AppNotifications.h>
#include <winrt/Microsoft.Windows.AppNotifications.Builder.h>

Agregue una función que muestre una notificación de Windows:

Napi::Value ShowNotification(const Napi::CallbackInfo& info) {
    Napi::Env env = info.Env();

    try {
        std::string title = info[0].As<Napi::String>().Utf8Value();
        std::string message = info[1].As<Napi::String>().Utf8Value();

        winrt::Microsoft::Windows::AppNotifications::Builder::AppNotificationBuilder builder;
        builder.AddText(winrt::to_hstring(title));
        builder.AddText(winrt::to_hstring(message));

        auto notification = builder.BuildNotification();
        winrt::Microsoft::Windows::AppNotifications::AppNotificationManager::Default().Show(notification);

        return Napi::Boolean::New(env, true);
    } catch (const winrt::hresult_error& e) {
        Napi::Error::New(env, winrt::to_string(e.message())).ThrowAsJavaScriptException();
        return env.Null();
    }
}

Registre la función en el Init método :

exports.Set("showNotification", Napi::Function::New(env, ShowNotification));

Paso 3: Compilar el complemento

npm run build-addon

Paso 4: Probar la notificación

Abra src/index.js y cargue el complemento:

const addon = require('../nativeWindowsAddon/build/Release/nativeWindowsAddon.node');

Agregue una llamada de prueba:

addon.showNotification('Hello from Electron!', 'This notification uses the Windows App SDK.');

Ejecute la aplicación:

npm start

Debería ver que aparece una notificación de Windows.

Paso 5: Actualizar la identidad de depuración

Siempre que modifique appxmanifest.xml, ejecute:

npx winapp node add-electron-debug-identity

Pasos siguientes

• Creación de un complemento de Phi Silica - uso de API de IA en el dispositivo
• Crear un complemento WinML: ejecutar modelos de machine learning
• Empaquetado para distribución : creación de un paquete MSIX firmado

Temas relacionados

• Configuración de Electron para el desarrollo de la API de Windows
• Referencia de la CLI de winapp
• API de notificación de Windows App SDK