Erstellen eines nativen C++-Addon mit Benachrichtigungen

In diesem Handbuch erfahren Sie, wie Sie ein systemeigenes C++-Addon erstellen, das die Windows App SDK-Benachrichtigungs-APIs in Ihrer Electron-App aufruft. Dies ist ein guter Ausgangspunkt für das Verständnis nativer Addons, bevor Sie in komplexere Szenarien eintauchen.

Voraussetzungen

Bevor Sie diesen Leitfaden starten, stellen Sie sicher, dass Sie folgendes haben:

• Einrichtung der Entwicklungsumgebung abgeschlossen

Schritt 1: Erstellen eines nativen C++-Add-Ons

Erstellen wir nun ein systemeigenes Addon mit C++ und node-addon-api. Dadurch erhalten Sie direkten Zugriff auf Windows-APIs mit maximaler Leistung.

npx winapp node create-addon

Dadurch wird ein nativeWindowsAddon/ Ordner mit:

• nativeWindowsAddon.cc – Ihr C++-Code, der Windows-APIs aufruft
• binding.gyp - Buildkonfiguration für Node-gyp

Mit dem Befehl werden außerdem erforderliche Entwicklungsabhängigkeiten (nan, node-addon-api, node-gyp) installiert und ein build-nativeWindowsAddon-Skript zu Ihrem package.json hinzugefügt.

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

Die generierte Vorlage enthält eine Beispiel-ShowNotification-Funktion, die die Windows SDK-Benachrichtigungs-APIs verwendet. Überprüfen wir, ob alles ordnungsgemäß eingerichtet ist, indem wir das Add-On erstellen:

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

Schritt 2: Testen des generierten Add-Ons

Überprüfen wir, ob das generierte Add-On funktioniert, indem wir es aus dem Hauptprozess aufrufen. Öffnen:src/index.js

1. Fügen Sie den Addonimport mit Ihren anderen require Anweisungen oben hinzu:

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

2. Rufen Sie die Benachrichtigungsfunktion am Ende der createWindow() Funktion auf:

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

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

Bevor die Benachrichtigungs-API funktioniert, müssen Sie sicherstellen, dass Ihre App mit Identität ausgeführt wird. Laufen:

npx winapp node add-electron-debug-identity

Führen Sie nun Ihre App aus:

npm start

Sie sollten eine Benachrichtigung sehen! 🎉 Das generierte Addon ist sofort einsatzbereit.

Schritt 3: Upgrade auf Windows App SDK Benachrichtigungen

Nachdem wir nun bestätigt haben, dass das Addon funktioniert, aktualisieren wir es, um die moderne Windows App SDK-Benachrichtigungs-APIs (Microsoft.Windows.AppNotifications) zu verwenden, die eine bessere Entwicklererfahrung und mehr Features bieten. Wir haben das Windows App SDK bereits eingerichtet, als wir den Init-Befehl aus den Einrichtungsschritten ausgeführt haben.

Öffnen Sie nativeWindowsAddon/nativeWindowsAddon.cc und ersetzen Sie den gesamten Inhalt durch diesen Code:

#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)

Die wichtigsten Änderungen hier sind der Wechsel vom älteren Windows.UI.Notifications-Namespace zum modernen Microsoft.Windows.AppNotifications-APIs und verwenden AppNotificationBuilder, um Benachrichtigungen zu erstellen, anstatt XML-Zeichenfolgen manuell zu erstellen. Dies bietet eine übersichtlichere, besser verwendbare API, die mit den Windows App SDK Mustern konsistent ist.

Schritt 4: Neuerstellen und Testen

Erstellen Sie nun das Addon mit dem aktualisierten Code neu:

npm run build-nativeWindowsAddon

Aktualisieren Sie die Nachricht src/index.js so, dass sie die Änderung widerspiegelt:

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

Führen Sie Ihre App erneut aus:

npm start

Die aktualisierte Benachrichtigung wird mithilfe der modernen Windows App SDK-APIs angezeigt!

Nächste Schritte

Herzlichen Glückwunsch! Sie haben erfolgreich ein systemeigenes C++-Addon erstellt, das Windows App SDK APIs aufruft! 🎉

Jetzt sind Sie bereit für:

• Verpacken Ihrer App für Verteilung – Erstellen Eines MSIX-Pakets, das Sie verteilen können

Oder erkunden Sie andere Guides:

• Creating a Phi Silica Addon – Erfahren Sie, wie Sie Windows AI-APIs in einem C#-Addon verwenden.
• Erstellen einer WinML-Erweiterung – Lernen Sie, wie Sie Windows-Maschinelles Lernen in einer C#-Erweiterung verwenden.
• Übersicht über erste Schritte – Zurück zum Hauptleitfaden

Zusätzliche Ressourcen

• winapp CLI-Dokumentation - Vollständige CLI-Referenz
• Sample Electron App – Vollständiges Arbeitsbeispiel mit C++-Add-On
• node-addon-api – C++↔-JavaScript-Interoperabilitätsbibliothek
• Windows App SDK Samples - Sammlung von Windows App SDK Beispielen