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. Good candidates are Storage API, localStorage, sessionStorage, and IndexedDB.

Como alternativa, você pode usar os primitivos 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. To communicate directly between web pages, you can send a MessagePort from one to the other, possibly via the main process using 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:

Subpixel rendering example

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).

To achieve this goal, set the background in the constructor for 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.