Ir para o conteúdo principal

Perguntas Frequentes no Electron

Por que estou tendo problemas para instalar o Electron?​

Ao executar o npm install electron, alguns usuários encontram erros de instalação.

Em quase todos os casos, esses problemas são resultado de problemas de rede e não de problemas reais com o pacote npm electron. Erros como ELIFECYCLE, EAI_AGAIN, ECONNRESET, e ETIMEDOUT são resultados da falta de internet. A melhor solução é tentar trocar de rede, ou aguardar um pouco e tentar instalar novamente.

Se a instalação via npm falhar, você também pode tentar baixar o Electron diretamente do código fonte em electron/electron/releases.

Quando o Electron será atualizado para a versão mais recente do Chrome?​

A versão do Chrome utilizada no Electron normalmente é disponibilizada dentro de uma ou duas semanas depois que uma versão estável do Chrome é liberada. Esta estimativa não é garantida, depende da quantidade de trabalho envolvido na atualização.

Somente a versão estável do Chrome é usada. Se uma correção importante estiver em beta ou dev canal, vamos realizar um backport dela.

Para mais informações, consulte a introdução de segurança.

Quando o Electron será atualizado para a versão mais recente do Node.js?​

Quando uma nova versão do Node.js é lançada, geralmente esperamos por cerca de um mês antes de atualizar a do Electron. Assim, podemos evitar sermos afetados por erros introduzidos na nova versão do Node.js, o que acontece muito frequentemente.

Novos recursos do Node.js geralmente são trazidos por atualização da V8, desde que o Electron usa o V8 enviado pelo navegador Chrome. Os novos recursos brilhante do JavaScript de uma nova versão Node.js esta geralmente no Electron.

Como compartilhar dados entre página da web?​

Para compartilhar dados entre páginas web (os processos de renderização) a maneira mais simples é usar as APIs do HTML5 que já estão disponíveis nos navegadores. As melhores opções são Storage API, localStorage, sessionStorage, e o IndexedDB.

Como alternativa, você pode usar as ferramentas de IPC que são fornecidos pelo Electron. Para compartilhar dados entre os processos principal e de renderização, você pode usar os módulos ipcMain e ipcRenderer. Para se comunicar diretamente entre páginas web, você pode enviar um MessagePort de uma para a outra, possivelmente via o processo principal usando ipcRenderer.postMessage(). A comunicação subsequente através das portas de mensagens é direta e não desvia o processo principal.

A minha bandeja de aplicativo desapareceu depois de alguns minutos.​

Isto acontece quando a variável que é usada para armazenar a bandeja é coletada pelo garbage collector.

Se você encontrar esse problema, esses artigos podem ser úteis:

Se você quer uma solução rápida, você pode fazer as variáveis globais, alterando seu código:

const { app, Tray } = require('electron')
app.whenReady().then(() =>{
 const tray = new Tray('/path/to/icon.png')
 tray.setTitle('hello world')
})

para isto:

const { app, Tray } = require('electron')
let tray = null
app.whenReady().then(() => {
  tray = new Tray('/path/to/icon.png')
  tray.setTitle('hello world')
})

Eu não posso usar jQuery/RequireJS/Meteor/AngularJS em Electron.​

Devido à integração de Node.js do Electron, existem alguns símbolos extras inseridos o DOM como module, exports e require. Isso causa problemas por causa de algumas bibliotecas que querem inserir os símbolos com os mesmos nomes.

Para resolver isso, você pode desativar a integração com node no Electron:

// No processo main.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

Mas se você quer manter as habilidades de usar Node.JS e Electron APIs, você tem que renomear os símbolos na página, antes de incluir outras bibliotecas:

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>

require('electron').xxx é indefinido.​

Quando usar o módulo built-in do Electron você pode encontrar um erro como este:

> require('electron').webFrame.setZoomFactor(1.0)
Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined

É bem provável que você esteja utilizando o módulo no processo errado. Por exemplo, electron.app pode apenas ser usado pelo processo principal, enquanto electron.webFrame está apenas disponível no processo de renderização.

A fonte parece borrada, o que é isso e o que eu posso fazer?​

Se a anti-aliasing de sub-pixel estiver desativada, então os textos nas telas LCD podem aparecer embaçados. Exemplo:

Exemplo de renderização de subpixel

A anti-aliasing de sub-pixel precisa de um fundo não transparente na camada que contem os glyphs de texto. (Veja esta publicação para mais informações).

Para alcançar isso, defina o plano de fundo do construtor para BrowserWindow:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  backgroundColor: '#fff'
})

O efeito é visível apenas em (algumas?) telas de LCD. Mesmo que você não veja diferença, alguns de seus usuários podem. É melhor sempre definir o fundo desta forma, a menos que você tenha razões para não fazê-lo.

Aviso que apenas definir o background no CSS não tem o mesmo efeito desejado.