A Electron pode levar seu aplicativo da Web para a área de trabalho. Aqui está como começar

Electron é uma estrutura que empacota seu aplicativo Web com uma cópia do Chrome, permitindo que ele seja executado na área de trabalho de um usuário juntamente com aplicativos nativos. É fácil de instalar e requer apenas que você solte seu index. html e outras dependências.

O que é o elétron e como ele funciona?

Electron é essencialmente um contêiner de desktop para seu aplicativo da web. Ele é construído sobre o Chromium, que é o ramo de código aberto do Google Chrome sem os recursos específicos do Google. Toda vez que você abre um aplicativo Electron, ele abre uma nova janela do navegador, exceto que ele está bloqueado na sua página carregada nos arquivos do aplicativo e não possui a barra de URLs ou outros recursos do navegador. No entanto, você ainda terá acesso às Ferramentas de desenvolvedor do Chromium para depurar seu aplicativo.

Se o aplicativo for rápido o suficiente, você provavelmente nem saberia que estava usando uma página da Web em vez de um aplicativo nativo.

O grande benefício do Electron é que ele torna seu aplicativo multiplataforma. Como tudo está sendo executado em uma variante do Chromium, e o Chromium é compilado para Windows, macOS e Linux, qualquer aplicativo Electron pode ser facilmente empacotado em qualquer sistema operacional. Você não precisa se preocupar com compatibilidade, pois a única coisa que muda é a base na qual o aplicativo é executado.

O elétron é comumente usado junto com uma estrutura da web como React, Vue ou Angular para criar aplicativos da web poderosos. Você tem acesso a toda a biblioteca npm, algo que você não tem com um aplicativo da web comum. O aplicativo Electron empacotado pode ser atualizado automaticamente como um site real.

Além disso, como a Electron carrega seu aplicativo Web a partir de um arquivo compactado em vez de seus servidores, o tempo de carregamento pode ser reduzido drasticamente, pois não há conteúdo enviado pela rede (além das chamadas de API). Além disso, isso sobrecarrega seus servidores se a maioria dos usuários decidir usar o aplicativo de desktop.

A principal desvantagem do Electron em comparação com um aplicativo nativo é o desempenho. Por estar essencialmente abrindo uma nova instância do Chrome, os aplicativos Electron podem usar muito mais RAM do que seus equivalentes nativos. Você também não tem a velocidade de linguagens de baixo nível como C, pois tudo será escrito em JavaScript, embora não seja mais lento do que algo sendo executado em um navegador, e não é destina-se a substituir aplicativos que precisam fazer pleno uso do metal.

Como começar

O elétron é surpreendentemente fácil de configurar. Embora você possa instalar o pacote npm e importá-lo para um novo projeto de Nó, a equipe da Electron fornece um projeto de início rápido com alguns dos padrões pré-configurados. Você também pode obter outros modelos, como o electron-react-boilerplate, que vem com o React pré-configurado.

Tudo o que você precisa para executar o Electron é ter o Node instalado. Em seguida, você pode clonar o repositório:

 git clone https://github. com/electron/electron-quick-start

cd no diretório do projeto e instale o Electron e suas dependências relacionadas com:

 instalação npm 

A partir daqui, você pode executar o npm start para iniciar o servidor de desenvolvimento, que abrirá o index. html padrão com o Hello World:

Você pode substituir este index. html pelo seu site e mover todas as suas dependências. Isso é realmente o suficiente; por exemplo, aqui está um modelo de Bootstrap carregado no Electron, funcionando perfeitamente sem tocar em nenhum código:

Embora você possa deixar assim, a Electron oferece outros recursos que tornam a experiência da área de trabalho melhor que você deseja configurar.

Apimentando o elétron

Muitos aplicativos da Electron optam por renunciar completamente à barra superior padrão, o que confere à aplicação uma aparência mais limpa. Por exemplo, o Slack (que usa Elétron e Reagir) não tem a barra superior; em vez disso, o conteúdo alcança todo o caminho até a parte superior da janela e é disponibilizado espaço para os controles da janela do macOS.

Isso não funciona bem no Windows; você ainda pode ocultar a barra de título com frame: false, mas também oculta completamente os controles da janela, dificultando a saída do aplicativo nativamente.

No macOS, no entanto, você pode obter esse efeito editando a função de inicialização no main. js, onde a janela do navegador é criada, e especificando titleBarStyle: 'hidden'. Esta propriedade será ignorada pelo Windows.

 mainWindow = new BrowserWindow ({titleBarStyle: 'hidden', largura: 800, height: 600, webPreferences: {preload: path. join (__ dirname, 'preload. js')}}) 

Além disso, você pode usar o hiddenInset para colocar mais preenchimento entre os controles da janela e a borda da janela. De qualquer forma, você provavelmente deve ter algo estático nesse canto (como uma barra lateral) para impedir que pareça estranho ao rolar.

Isso desativa o arrasto da janela, mas você pode adicioná-lo manualmente criando uma div invisível posicionada absolutamente na parte superior da tela e fornecendo a -webkit-app-region: drag; propriedade.

Além disso, você pode usar outras integrações de sistema, como menus personalizados da área de trabalho, integrações do macOS Dock, TouchBar e barra de tarefas do Windows, além de arrastar e amp; solta. Todas essas integrações acontecem por meio da API da Electron e não tocam no código do seu aplicativo, a menos que você queira.

Criando seu aplicativo

Para empacotar seu aplicativo para produção, você precisará usar uma ferramenta como o construtor de elétrons. Você também pode baixar manualmente os binários predefinidos da Electron e empacotá-lo com o aplicativo, mas o construtor é muito mais fácil.

Adicione-o ao seu projeto:

fio

 adiciona electron-builder --dev 

Especifique uma configuração de compilação no seu package. json (documentação de todas as opções):

 "build": {"appId": "your. id", "mac": {"category": "your. app. category. type"}} 

Adicione os ícones do seu aplicativo e o script electron-builder ao seu package. json para facilitar o uso:

 "scripts": {"pacote": "construtor de elétrons --dir", "dist": "construtor de elétrons"} 

Agora, quando você executa o npm dist, seu aplicativo é empacotado em um formato distribuível.

Uma coisa que você deseja adicionar (e verificar se funciona) é a atualização automática. Caso contrário, você não terá como enviar alterações aos usuários como faria em um aplicativo da web comum. Você pode adicionar esse recurso com a biblioteca update-electron-app.

Via: How to Geek