Creazione di un componente aggiuntivo nativo C++ con notifiche

Questa guida illustra come creare un componente aggiuntivo nativo C++ che chiama le API di notifica SDK per app di Windows nell'app Electron. Questo è un ottimo punto di partenza per comprendere i componenti aggiuntivi nativi prima di approfondire scenari più complessi.

Prerequisiti

Prima di iniziare questa guida, assicurarsi di avere:

• Completata la configurazione dell'ambiente di sviluppo

Passaggio 1: Creare un componente aggiuntivo nativo C++

Si creerà un componente aggiuntivo nativo usando C++ e node-addon-api. In questo modo è possibile accedere direttamente alle API di Windows con prestazioni massime.

npx winapp node create-addon

Verrà creata una nativeWindowsAddon/ cartella con:

• nativeWindowsAddon.cc - Codice C++ che chiamerà le API Di Windows
• binding.gyp - Configurazione della compilazione per node-gyp

Il comando installa anche le dipendenze di sviluppo necessarie (nan, node-addon-api, node-gyp) e aggiunge uno script build-nativeWindowsAddon al package.json:

{
  "scripts": {
    "build-nativeWindowsAddon": "node-gyp clean configure build --directory=nativeWindowsAddon"
  }
}

Il modello generato include una funzione di esempio ShowNotification che usa le API di notifica Windows SDK. Verificare che tutto sia configurato correttamente creando il componente aggiuntivo:

# Build the C++ addon
npm run build-nativeWindowsAddon

Passaggio 2: Testare il componente aggiuntivo generato

Verificare che il componente aggiuntivo generato funzioni chiamandolo dal processo principale. Aprire src/index.js:

1. Aggiungi l'import dell'addon insieme alle altre istruzioni require nella parte superiore.

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

2. Chiamare la funzione di notifica alla fine della funzione createWindow().

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

  // Test the Windows SDK notification
  nativeWindowsAddon.showNotification(
    'Hello from Electron!',
    'This notification uses the Windows SDK.'
  );
};

Prima che l'API di notifica funzioni, è necessario assicurarsi che l'app venga eseguita con l'identità. Corri!

npx winapp node add-electron-debug-identity

Ora esegui l'applicazione:

npm start

Verrà visualizzata una notifica. 🎉 Il componente aggiuntivo generato funziona subito senza bisogno di configurazione.

Passaggio 3: Eseguire l'aggiornamento alle notifiche di SDK per app di Windows

Ora che il componente aggiuntivo è stato confermato, è possibile aggiornarlo per usare le API di notifica moderne SDK per app di Windows (Microsoft.Windows.AppNotifications), che offrono un'esperienza di sviluppo migliore e altre funzionalità. È già stato configurato il SDK per app di Windows quando è stato eseguito il comando init dai passaggi di installazione.

Aprire nativeWindowsAddon/nativeWindowsAddon.cc e sostituire l'intero contenuto con questo codice:

#include <napi.h>
#include <windows.h>

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

using namespace winrt;
using namespace Microsoft::Windows::AppNotifications;
using namespace Microsoft::Windows::AppNotifications::Builder;

// Function to display a Windows App SDK notification
void ShowNotification(const Napi::CallbackInfo& info) {
    Napi::Env env = info.Env();

    try {
        // Get arguments from JavaScript (title and message)
        if (info.Length() < 2 || !info[0].IsString() || !info[1].IsString()) {
            Napi::TypeError::New(env, "Expected two string arguments: title and message").ThrowAsJavaScriptException();
            return;
        }

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

        // Convert to wide strings
        std::wstring wTitle(title.begin(), title.end());
        std::wstring wMessage(message.begin(), message.end());

        // Use AppNotificationBuilder for a cleaner API
        AppNotificationBuilder builder;
        builder.AddText(wTitle);
        builder.AddText(wMessage);
        
        AppNotification notification = builder.BuildNotification();
        AppNotificationManager::Default().Show(notification);

    } catch (const winrt::hresult_error& ex) {
        Napi::Error::New(env, winrt::to_string(ex.message())).ThrowAsJavaScriptException();
    } catch (const std::exception& ex) {
        // Handle exceptions and throw back to JavaScript
        Napi::Error::New(env, ex.what()).ThrowAsJavaScriptException();
    } catch (...) {
        Napi::Error::New(env, "Unknown error occurred").ThrowAsJavaScriptException();
    }
}

// Initialize the module
Napi::Object Init(Napi::Env env, Napi::Object exports) {
    exports.Set(Napi::String::New(env, "showNotification"), Napi::Function::New(env, ShowNotification));
    return exports;
}

NODE_API_MODULE(addon, Init)

Le modifiche chiave in questo caso passano dallo spazio dei nomi Windows.UI.Notifications al moderno Microsoft.Windows.AppNotifications API e usano AppNotificationBuilder per costruire notifiche invece di creare manualmente stringhe XML. In questo modo è disponibile un'API più pulita e gestibile coerente con i modelli di SDK per app di Windows.

Passaggio 4: Ricompilare e testare

Ricompilare ora il componente aggiuntivo con il codice aggiornato:

npm run build-nativeWindowsAddon

Aggiornare il messaggio in src/index.js per riflettere la modifica:

nativeWindowsAddon.showNotification(
  'Hello from Electron!',
  'This notification is powered by the Windows App SDK!'
);

Eseguire di nuovo l'app:

npm start

Verrà visualizzata la notifica aggiornata usando le API di SDK per app di Windows moderne.

Operazioni successive

Complimenti. Hai creato con successo un componente aggiuntivo C++ nativo che chiama le API di SDK per app di Windows! 🎉

A questo momento è possibile:

• Creare un pacchetto dell'app per la distribuzione : creare un pacchetto MSIX che è possibile distribuire

In alternativa, esplorare altre guide:

• Creazione di un Addon Phi Silica - Scopri come utilizzare le API AI di Windows in un addon C#
• Creazione di un WinML Addon - Impara a utilizzare Windows Machine Learning in un componente aggiuntivo C#
• Panoramica introduttiva - Tornare alla guida principale

Risorse aggiuntive

• Documentazione dell'interfaccia della riga di comando di winapp - Informazioni di riferimento complete dell'interfaccia della riga di comando
• Esempio di app Electron - Esempio di lavoro completo con il componente aggiuntivo C++
• node-addon-api - Libreria di interoperabilità JavaScript C++ ↔
• SDK per app di Windows Samples - Raccolta di esempi di SDK per app di Windows