通知を使用した C++ ネイティブ アドオンの作成

このガイドでは、Electron アプリでWindows アプリ SDK通知 API を呼び出す C++ ネイティブ アドオンを作成する方法について説明します。 これは、より複雑なシナリオに進む前にネイティブ アドオンを理解するための優れた出発点です。

[前提条件]

このガイドを開始する前に、次の作業が完了していることを確認してください。

手順 1: C++ ネイティブ アドオンを作成する

C++ と node-addon-api を使用してネイティブ アドオンを作成してみましょう。 これにより、最大のパフォーマンスでWindows API に直接アクセスできます。

npx winapp node create-addon

Note

このコマンドを実行すると、Pythonのインストールが求められる場合や、Visual Studioツールがまだインストールされていない場合は、必要なツールをインストールするように求められる場合があります。

これにより、次の nativeWindowsAddon/ フォルダーが作成されます。

  • nativeWindowsAddon.cc - Windows API を呼び出す C++ コード
  • binding.gyp - node-gyp のビルド構成

このコマンドでは、必要な開発依存関係 (nan、node-addon-api、node-gyp) もインストールされ、build-nativeWindowsAddonにpackage.json スクリプトが追加されます。

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

生成されたテンプレートには、Windows SDK 通知 API を使用するサンプル ShowNotification 関数が含まれています。 アドオンをビルドして、すべてが正しく設定されていることを確認しましょう。

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

Note

npx winapp node create-addon --template csを使用して C# アドオンを作成することもできます。 C# アドオンは node-api-dotnet を使用します。 その他のオプションについては、アドオンの作成に関する他のガイドまたは 完全なコマンド ドキュメント を参照してください。

手順 2: 生成されたアドオンをテストする

生成されたアドオンがメイン プロセスから呼び出されて動作することを確認しましょう。 src/index.jsを開きます。

  1. アドオンのインポートを、上部の他の require ステートメントと共に追加します。
const nativeWindowsAddon = require('../nativeWindowsAddon/build/Release/nativeWindowsAddon.node');
  1. createWindow()関数の末尾で通知関数を呼び出します。
const createWindow = () => {
  // ... existing window creation code ...

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

通知 API が機能する前に、アプリが ID で実行されていることを確認する必要があります。 走れ

npx winapp node add-electron-debug-identity

Note

このコマンドは既にセットアップ ガイドで追加した postinstall スクリプトの一部であるため、 npm install後に自動的に実行されます。 ただし、 Package.appxmanifestを変更したり、アプリ資産を更新したり、依存関係を再インストールしたりするたびに、手動で実行する必要があります。

次に、アプリを実行します。

npm start

通知が表示されます。 🎉 生成されたアドオンは、すぐに使用できます。

⚠️ 既知の問題: アプリのクラッシュまたは空のウィンドウ (クリックして展開)

電子アプリケーションのパッケージ化が疎である既知のWindowsバグがあり、アプリが起動時にクラッシュしたり、Web コンテンツをレンダリングしたりすることはありません。 この問題はWindowsで修正されましたが、まだすべてのデバイスに反映されていません。

回避策については、 開発環境のセットアップ を参照してください。

手順 3: Windows アプリ SDK通知にアップグレードする

アドオンが動作することを確認したので、最新の Windows アプリ SDK 通知 API (Microsoft.Windows.AppNotifications) を使用するようにアップグレードしてみましょう。これにより、開発者エクスペリエンスが向上し、より多くの機能が提供されます。 セットアップ手順から init コマンドを実行したときに、Windows アプリ SDKが既に設定されています。

nativeWindowsAddon/nativeWindowsAddon.ccを開き、内容全体を次のコードに置き換えます。

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

ここでの主な変更点は、古い Windows.UI.Notifications 名前空間からモダン Microsoft.Windows.AppNotifications API に切り替え、AppNotificationBuilder を使用して XML 文字列を手動で作成するのではなく、通知を作成することです。 これにより、Windows アプリ SDK パターンと一貫性のある、よりクリーンで保守しやすい API が提供されます。

手順 4: リビルドとテスト

次に、更新されたコードを使用してアドオンを再構築します。

npm run build-nativeWindowsAddon

src/index.jsのメッセージを更新して、変更を反映します。

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

アプリをもう一度実行します。

npm start

最新のWindows アプリ SDK API を使用して、更新された通知が表示されます。

次のステップ

おめでとうございます! WINDOWS APP SDK API を呼び出すネイティブ C++ アドオンが正常に作成されました。 🎉

これで、次の準備ができました。

または、他のガイドを調べる:

その他のリソース

  • Last updated on