Exibir uma notificação usando JavaScript (bindings JS)

Este guia explica como exibir uma notificação de um aplicativo do SDK do Aplicativo Windows diretamente a partir do JavaScript do processo principal do Electron, usando bindings JS gerados.

Pré-requisitos

Antes de iniciar este guia, verifique se você:

• Concluiu a configuração do ambiente de desenvolvimento.

Etapa 1: Exibir uma notificação no processo principal do Electron

Importe as associações geradas por meio da importação do #winapp/bindings pacote, crie uma notificação de aplicativo e mostre-as com o gerenciador de notificações padrão:

Requer @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8. Projetos mais antigos podem fazer upgrade com npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings para que winapp init configure o mapa de importações #winapp/bindings, ou manter a forma relativa require('../.winapp/bindings/index.js') (o caminho é relativo a src/index.js; ajuste-o se o arquivo de entrada estiver em outro lugar).

// 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_ mapeia a propriedade do SDK do Aplicativo Windows Default. As associações geradas adicionam o trailing _ porque default é uma palavra-chave JavaScript.

Etapa 2: Executá-lo

Antes que as notificações funcionem, verifique se o aplicativo é executado com a identidade:

npx winapp node add-electron-debug-identity

Note

Esse comando já faz parte do postinstall script adicionado no guia de instalação, portanto, ele é executado automaticamente após npm install. Execute-o manualmente sempre que você modificar Package.appxmanifest, atualizar ativos de aplicativo ou reinstalar dependências.

Agora inicie o aplicativo:

npm start

A notificação de SDK do Aplicativo Windows é exibida quando o processo principal chama showNotification.

Próximas etapas

Parabéns! Agora você está exibindo notificações do SDK do Aplicativo Windows no seu aplicativo Electron — sem addon nativo, sem etapa de compilação com node-gyp. 🎉

Agora você está pronto para:

• Empacote seu aplicativo para distribuição — produza um MSIX que você pode distribuir (o ambiente de execução @microsoft/dynwinrt já está no seu dependencies).

Ou explore outros guias:

• Chame APIs do Windows a partir do JavaScript — escolha um arquivo e leia as dimensões da imagem usando bindings em JS.
• Chamar o Phi Silica com JavaScript — resumir textos com a IA do SDK do Aplicativo Windows por meio de bindings de JS.
• Execute o WinML com JavaScript — use a descoberta de provedores de ML do SDK do Aplicativo Windows com onnxruntime-node.
• Criando um complemento nativo do C++ – equivalente de complemento C++ nativo para notificações.
• Visão geral de introdução – retorne ao guia principal.

Recursos adicionais

• Documentação da CLI do winapp — referência completa da CLI (init, restore, ). node generate-bindings
• Exemplo de aplicativo Electron – exemplo de trabalho completo, incluindo associações JS.
• @microsoft/dynwinrt – o runtime que alimenta as associações geradas.
• @microsoft/dynwinrt-codegen – o gerador de código.