Converter um site em um aplicativo nativo, seja no celular ou no desktop, pode ser bastante útil. O problema com os marcadores, especialmente para engenheiros de software, é que muitas vezes precisamos trabalhar em diferentes navegadores, portanto, ter tudo em um conjunto de marcadores de um navegador pode ser um problema. Eu também diria que os sites com uma finalidade específica são um ótimo caso para converter um site em aplicativo de desktop. Recentemente, encontrei nativefier, um utilitário de código aberto que cria um aplicativo de desktop nativo envolvendo o site em Electron.
Instalação
O senhor pode usar o NPM para instalar o nativefier e o node-icns, que usaremos para criar um ícone personalizado para o aplicativo:
npm install -g nativefier # App creator npm install -g node-icns # Icon creator
Os documentos do nativefier fornecem um método para criar o ícone do aplicativo da área de trabalho, mas o ImageMagick e o iconutils são necessários – o node-icns poupará o senhor de algumas dificuldades.
Criar o ícone do aplicativo
É importante criar o ícone do aplicativo antes de criar o próprio aplicativo. O senhor pode criar um ícone de aplicativo com node-icns e uma imagem de sua escolha:
# Generate icon set required by macOS nicns --in app-icon.png --out app-icon.icns
Use um PNG de alta qualidade, em formato quadrado – a transparência será preservada e o tamanho do arquivo não importa, pois os arquivos ficarão em seu computador.
Criando o aplicativo
O nativefier oferece uma série de parâmetros de configuração que o senhor pode usar para criar seu aplicativo. Vamos criar um aplicativo usando muitos dos parâmetros úteis:
nativefier \
--name "David Walsh Blog" \
--verbose \
--counter \
--icon app-icons.icns \
--fast-quit \
--inject custom-css.css \
--inject custom-js.js \
--flash # gross
"https://davidwalsh.name"
Será gerado um diretório chamado “{appname}-darwin-x64” e, dentro desse diretório, estará o arquivo do aplicativo, que você pode arrastar para o seu Applications (ou qualquer que seja o equivalente em seu sistema operacional) e para o seu dock. Observe que é possível adicionar arquivos JavaScript e CSS personalizados do usuário para ocultar anúncios, modificar cores e comportamento e assim por diante. O —counter argument é particularmente interessante: um aplicativo da Web como o Gmail que atualiza seu <title> como uma pseudo-notificação acionará um ponto vermelho de notificação sobre o ícone do aplicativo quando uma atualização for feita.
Aplicativos da Web como o IRCCloud e sites como o DevDocs são candidatos perfeitos para a conversão em aplicativo de desktop.
Obrigado a Byron Jones por me informar sobre o nativefier!
