Introdução | Electron

• Introdução | Electron

Darwin

• o MacOS é chamado de darwin no electron. O comportamento padrão do windows e linux quando clica no x para fechar o programa é matar o processo diferente do que provavelmente acontece no macOS.

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Ipcmain

O ipcMain do Electron é um módulo que permite a comunicação entre o processo principal (main process) e os processos de renderização (renderer processes) em aplicações Electron. Este módulo é crucial para gerenciar comunicações assíncronas ou síncronas em um ambiente de múltiplos processos. Aqui estão os métodos principais disponíveis em ipcMain e suas funções:

1. on(eventName, listener)
   • Função: Registra um ouvinte que é chamado sempre que o processo de renderização envia uma mensagem via ipcRenderer.send ou ipcRenderer.sendSync com o eventName correspondente.
   • Exemplo de uso: Utilizado para ouvir por mensagens contínuas, como solicitações de dados.
2. once(eventName, listener)
   • Função: Semelhante ao on, mas o ouvinte é invocado apenas uma vez. Após o ouvinte ser chamado para um evento, ele é automaticamente removido.
   • Exemplo de uso: Útil para eventos que são esperados para ocorrer apenas uma vez durante a sessão, como uma confirmação de inicialização.
3. removeListener(eventName, listener)
   • Função: Remove um ouvinte previamente registrado para o eventName.
   • Exemplo de uso: Usado quando você não precisa mais ouvir por eventos específicos, como após o fechamento de uma janela ou finalização de uma tarefa.
4. removeAllListeners(eventName)
   • Função: Remove todos os ouvintes registrados para o eventName.
   • Exemplo de uso: Bom para limpeza de eventos, especialmente ao descarregar um componente ou fechar uma janela para evitar vazamentos de memória.
5. handle(channel, listener)
   • Função: Registra um manipulador que é chamado quando o processo de renderização invoca ipcRenderer.invoke. O manipulador é projetado para processar solicitações e responder com um valor de retorno, que pode ser uma promessa que resolve para esse valor.
   • Exemplo de uso: Usado para solicitações assíncronas onde uma resposta é esperada pelo processo de renderização, como buscar dados do disco.
6. handleOnce(channel, listener)
   • Função: Semelhante ao handle, mas o manipulador é invocado apenas uma vez. Depois disso, é automaticamente removido.
   • Exemplo de uso: Ideal para tarefas de configuração única que precisam de uma resposta, como verificar permissões ou configurar configurações iniciais.
7. removeHandler(channel)
   • Função: Remove o manipulador registrado para um canal específico. Se nenhum manipulador estiver registrado, nada acontece.
   • Exemplo de uso: Útil para desregistrar manipuladores de ipcRenderer.invoke quando não são mais necessários, como após uma tarefa ser concluída.

Esses métodos permitem uma comunicação robusta e flexível entre os diferentes processos em uma aplicação Electron. O uso apropriado desses métodos contribui significativamente para a eficiência e reatividade de aplicações Electron.

Arquivos preload e rendered

• preload: Executa antes do conteúdo da web, expõe APIs seguras ao contexto da janela.
• é uma camada que está entre o renderer e o main

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// Expor APIs seguras para o contexto do renderizador
contextBridge.exposeInMainWorld('api', {
  send: (channel, data) => {
    // Canais permitidos
    const validChannels = ['toMain'];
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  receive: (channel, func) => {
    const validChannels = ['fromMain'];
    if (validChannels.includes(channel)) {
      // Remover listener antes de adicionar um novo para evitar duplicações
      ipcRenderer.removeAllListeners(channel);
      ipcRenderer.on(channel, (event, ...args) => func(...args));
    }
  }
});

• Neste exemplo, o contextBridge.exposeInMainWorld é usado para expor um objeto api no contexto global da janela do navegador, permitindo uma comunicação segura através de canais validados.

• renderer: Processo de renderização, manipula a interface do usuário e lógica da aplicação.

// renderer.js

// Enviar uma mensagem para o processo principal
document.getElementById('myButton').addEventListener('click', () => {
  window.api.send('toMain', 'Button was clicked!');
});

// Receber uma mensagem do processo principal
window.api.receive('fromMain', (data) => {
  console.log(`Received: ${data}`);
  // Exibir a mensagem recebida em um elemento do DOM
  document.getElementById('response').innerText = data;
});

• Neste exemplo, quando o botão com o ID myButton é clicado, ele envia uma mensagem para o processo principal usando a API send definida no preload.js. Ele também define um listener para receber mensagens do processo principal e exibir esses dados em um elemento com o ID response.

Olhar a estrutura de um .asar

• Instale o @electron/asar

npm install --engine-strict @electron/asar

• Vá ao diretório onde contém o .asar e rode o comando

npx asar extract <nome_do_arquivo> <diretorio_para_onde_sera_extraido>