JavaScript からの通知を表示する (JS バインド)

このガイドでは、生成された JS バインディングを使用して、Electron メイン プロセス JavaScript から直接Windows アプリ SDK アプリ通知を表示する方法について説明します。

[前提条件]

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

手順 1: Electron メイン プロセスからの通知を表示する

#winapp/bindings パッケージのインポートを使用して生成されたバインドをインポートし、アプリ通知をビルドして、既定の通知マネージャーで表示します。

@microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8が必要です。 古いプロジェクトは、npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindingsを使用してアップグレードして、winapp initのインポート マップを#winapp/bindingsワイヤ化するか、相対フォームをrequire('../.winapp/bindings/index.js')のままにします (パスはsrc/index.jsに対して相対的です。エントリ ファイルが他の場所にある場合は調整します)。

// 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_は、Windows アプリ SDK Default プロパティをマップします。 _は JavaScript キーワードであるため、生成されたバインディングは末尾のdefaultを追加します。

手順 2: 実行する

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

npx winapp node add-electron-debug-identity

Note

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

次に、アプリを起動します。

npm start

メイン プロセスがshowNotificationを呼び出すと、Windows アプリ SDK通知が表示されます。

次のステップ

おめでとうございます! これで、Electron アプリからのWindows アプリ SDK通知 (ネイティブ アドオンなし、node-gypビルド ステップなし) が表示されるようになりました。 🎉

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

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

その他のリソース

  • Last updated on