Mostrare una notifica tramite JavaScript (binding JavaScript)

Questa guida spiega come visualizzare direttamente una notifica di un'app SDK per app di Windows dal codice JavaScript del processo principale di Electron usando binding JavaScript generati.

Prerequisiti

Prima di iniziare questa guida, assicurarsi di avere:

• Completata la configurazione dell'ambiente di sviluppo.

Passaggio 1: Mostrare una notifica dal processo principale di Electron

Importare le associazioni generate tramite l'importazione del #winapp/bindings pacchetto, compilare una notifica dell'app e visualizzarla con gestione notifiche predefinita:

Richiede @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8. I progetti meno recenti possono essere aggiornati con npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings per fare in modo che winapp init colleghi la mappa delle importazioni #winapp/bindings, oppure mantenere la forma relativa require('../.winapp/bindings/index.js') (il percorso è relativo a src/index.js; modificalo se il file di ingresso si trova altrove).

// 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_ mappa la proprietà Default di SDK per app di Windows. Le associazioni generate aggiungono l'elemento finale _ perché default è una parola chiave JavaScript.

Passaggio 2: Eseguilo

Prima che le notifiche funzionino, assicurarsi che l'app venga eseguita con l'identità:

npx winapp node add-electron-debug-identity

Note

Questo comando fa già parte dello script aggiunto nella guida all'installazione postinstall , quindi viene eseguito automaticamente dopo npm install. Eseguilo manualmente ogni volta che modifichi Package.appxmanifest, aggiorni gli asset dell'app o reinstalli le dipendenze.

Avviare ora l'app:

npm start

La notifica di SDK per app di Windows viene visualizzata quando il processo principale chiama showNotification.

Operazioni successive

Congratulazioni! Ora mostri le notifiche di SDK per app di Windows nella tua app Electron, senza addon nativo e senza fase di compilazione node-gyp. 🎉

A questo momento è possibile:

• Crea un pacchetto dell'app per la distribuzione — crea un pacchetto MSIX che puoi distribuire (il runtime @microsoft/dynwinrt è già nel tuo dependencies).

In alternativa, esplorare altre guide:

• Chiamare Windows API da JavaScript: selezionare un file e leggerne le dimensioni dell'immagine usando associazioni JS.
• Chiamare Phi Silica da JavaScript — riassumere il testo con l'IA di SDK per app di Windows tramite binding JS.
• Eseguire WinML da JavaScript — usare il rilevamento del provider ML di SDK per app di Windows con onnxruntime-node.
• Creazione di un componente aggiuntivo nativo C++ - componente aggiuntivo C++ nativo per le notifiche.
• Panoramica introduttiva : tornare alla guida principale.

Risorse aggiuntive

• Documentazione dell'interfaccia della riga di comando winapp - Informazioni di riferimento complete dell'interfaccia della riga di comando (init, restore, node generate-bindings).
• Esempio di app Electron : esempio di lavoro completo, incluse le associazioni JS.
• @microsoft/dynwinrt : il runtime che alimenta le associazioni generate.
• @microsoft/dynwinrt-codegen , il generatore di codice.