Mostrar uma Notificação de JavaScript (ligações JS)

Este guia mostra como apresentar diretamente, a partir do JavaScript do processo principal do Electron, uma notificação de uma aplicação SDK de Aplicações Windows, recorrendo a associações JavaScript geradas.

Pré-requisitos

Antes de começar este guia, certifique-se de que:

• Concluí a configuração do ambiente de desenvolvimento.

Passo 1: Mostrar uma notificação do processo principal da Electron

Importa as ligações geradas através da #winapp/bindings importação de pacotes, cria uma notificação de aplicação e mostra-a com o gestor de notificações predefinido:

Requer @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8. Os projetos mais antigos podem atualizar com npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings para que winapp init configure o mapa de importações do #winapp/bindings, ou manter a forma relativa require('../.winapp/bindings/index.js') (o caminho é relativo a src/index.js; ajusta-o se o ficheiro de entrada estiver noutro local).

// 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 de Aplicações Windows Default. As ligações geradas adicionam o final _ porque default é uma palavra-chave JavaScript.

Passo 2: Executa

Antes de as notificações funcionarem, certifique-se de que a sua aplicação corre com identidade:

npx winapp node add-electron-debug-identity

Note

Este comando já faz parte do postinstall script adicionado no guia de configuração, por isso corre automaticamente após npm install. Executa-o manualmente sempre que modificares Package.appxmanifest, atualizares ativos da aplicação ou reinstalares dependências.

Agora inicia a aplicação:

npm start

A notificação do SDK de Aplicações Windows aparece quando o processo principal chama showNotification.

Próximas Etapas

Parabéns! Agora pode mostrar notificações do SDK de Aplicações Windows na sua aplicação Electron — sem extensão nativa, sem o passo de compilação node-gyp. 🎉

Agora está pronto para:

• Empacote a sua aplicação para distribuição — produza um MSIX que possa distribuir (o @microsoft/dynwinrt runtime já está incluído no seu dependencies).

Ou explore outros guias:

• Chame APIs do Windows a partir de JavaScript — escolha um ficheiro e leia as suas dimensões de imagem usando bindings JS.
• Invocar o Phi Silica a partir do JavaScript — resumir texto com o SDK de Aplicações Windows AI através de enlaces de JavaScript.
• Executar o WinML a partir do JavaScript — utilize a deteção de fornecedores do SDK de Aplicações Windows ML com onnxruntime-node.
• Criar um addon nativo em C++ — equivalente nativo em C++ para notificações.
• Visão Geral do Início — voltar ao guia principal.

Recursos adicionais

• Documentação do CLI winapp — referência completa do CLI (init, restore, node generate-bindings).
• Aplicação Electron de exemplo — exemplo completo e funcional, incluindo associações em JS.
• @microsoft/dynwinrt — o tempo de execução que alimenta as ligações geradas.
• @microsoft/dynwinrt-codegen — o gerador de código.