Afficher une notification à partir de JavaScript (liaisons JS)

Ce guide montre comment afficher directement une notification d’une application SDK d'application Windows depuis le code JavaScript du processus principal d’Electron grâce à des liaisons JavaScript générées.

Prerequisites

Avant de commencer ce guide, vérifiez que vous avez :

• Terminé la configuration de l’environnement de développement.

Étape 1 : Afficher une notification depuis le processus principal d’Electron

Importez les liaisons générées via l’importation de #winapp/bindings package, générez une notification d’application et affichez-la avec le gestionnaire de notifications par défaut :

Requiert @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8. Les projets plus anciens peuvent soit être mis à niveau avec npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings pour que winapp init configure la table d’imports #winapp/bindings, soit conserver la forme relative require('../.winapp/bindings/index.js') (le chemin est relatif à src/index.js ; ajustez-le si votre fichier d’entrée se trouve ailleurs).

// 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_mappe la propriété SDK d'application WindowsDefault. Les liaisons générées ajoutent le _ final, car default est un mot-clé JavaScript.

Étape 2 : l’exécuter

Pour que les notifications fonctionnent, vérifiez que votre application s’exécute avec l’identité suivante :

npx winapp node add-electron-debug-identity

Note

Cette commande fait déjà partie du postinstall script ajouté dans le guide d’installation. Elle s’exécute donc automatiquement après npm install. Exécutez-le manuellement chaque fois que vous modifiez Package.appxmanifest, mettez à jour les ressources de l’application ou réinstallez les dépendances.

À présent, démarrez l’application :

npm start

La notification SDK d'application Windows s’affiche lorsque le processus principal appelle showNotification.

Prochaines étapes

Félicitations ! Vous affichez désormais des notifications SDK d'application Windows depuis votre application Electron — aucun module complémentaire natif, aucune étape de génération node-gyp. 🎉

Vous êtes maintenant prêt à :

• Empaqueter votre application pour la distribution : produisez un MSIX que vous pouvez expédier (le @microsoft/dynwinrt runtime est déjà dans votre dependencies).

Ou explorez d’autres guides :

• Appelez Windows API à partir de JavaScript : choisissez un fichier et lisez ses dimensions d’image à l’aide de liaisons JS.
• Appelez Phi Silicon à partir de JavaScript : résumez le texte avec SDK d'application Windows IA via des liaisons JS.
• Exécuter WinML à partir de JavaScript — utilisez la découverte du fournisseur ML de SDK d'application Windows avec onnxruntime-node.
• Création d’un complément natif C++ : équivalent de complément C++ natif pour les notifications.
• Vue d’ensemble de la prise en main : revenez au guide principal.

Ressources additionnelles

• Documentation de l’interface CLI winapp : référence CLI complète (init, restore, node generate-bindings).
• Exemple d’application Electron : exemple de travail complet, y compris les liaisons JS.
• @microsoft/dynwinrt : runtime qui alimente les liaisons générées.
• @microsoft/dynwinrt-codegen : le générateur de code.