3 maneiras de criar aplicativos cross-platform usando tecnologias da web

Está precisando decidir quando e como reutilizar suas habilidades na web para ter o maior alcance possível e criar apps cross-platform?
Neste artigo vamos te mostrar 3 maneiras de usar tecnologias da web para criar aplicativos de cross-platform.
Obviamente, você não pode conhecer todos esses frameworks e ferramentas. Não há uma combinação específica para utilizar todos eles também. Você terá que fazer uma escolha com base em suas preferências, necessidades, requisitos de projetos e conjunto de habilidades existentes dos membros de sua equipe.
Mas a boa notícia é que qualquer pilha que você escolheu, é uma pilha da web. Isso fornecerá benefícios adicionais para suporte entre plataformas.

Peso

Vamos começar pela solução óbvia e principal em que você deve pensar: Progressive Web App ou PWA. Se você ainda não sabe o que é um PWA, aqui estão bons recursos para ler / assistir:
– Nosso principal ponto de entrada contendo toneladas de bons recursos:  https://developer.microsoft.com/en-us/windows/pwa
– Criando Progressive Web Apps durante BUILD 2018 por Jeff Burtoft
– Progressive Web Apps no Google Developers
– Progressive Web Apps no MDN.

O que é o PWA?

Em resumo, um PWA é um aplicativo da web que usa os recursos mais recentes disponíveis para corresponder o mais próximo possível a um aplicativo nativo. Por exemplo, ele pode ser instalado em um desktop / celular, funcionará perfeitamente offline e deve usar uma abordagem de IU moderna.
Por ser baseado em padrões, ele funciona em várias plataformas no Windows, Mac, Android, iOS e pode até cair em qualquer navegador da sua Smart TV, por exemplo!
O mínimo viável que você precisa implementar para começar a alegar que está construindo um PWA é:
– HTTPS . Um PWA deve ser servido por um canal seguro.
– Manifesto de aplicativo da Web . Um pequeno pedaço de JSON que descreve como seu PWA deve se comportar ou como instalá-lo.
– Trabalhador de serviço . A parte central do seu PWA, possibilitando um verdadeiro cenário offline, além de impulsionar o desempenho do seu aplicativo da web.
Graças ao Web App Manifest criado pelo PWA Builder , o usuário pode instalar o aplicativo da web em sua tela inicial. Você pode revisar o manifesto no Github , bem como o código-fonte completo deste jogo PWA.
Você verá que decidi usar uma propriedade de exibição definida como autônoma . Isso removerá a interface do usuário da borda (o “cromo”) do navegador quando o aplicativo for iniciado na tela inicial. A experiência será então diferente da clássica que você tem dentro do navegador. Também estou forçando a orientação a ser definida como paisagem.
Isso é muito útil no caso de jogos, pois a jogabilidade é frequentemente otimizada para uma orientação específica. Hoje, o truque usual é usar uma consulta de mídia para pedir ao usuário para girar a tela.
Você provavelmente já viu isso. Graças ao Web App Manifest, você pode ter certeza de que seu aplicativo está usando a orientação correta diretamente.
Agora que já sabemos tudo sobre o Web App Manifest, vamos falar sobre os Service Workers. Como um lembrete, o Service Worker é um pedaço de JavaScript que atua como um proxy de cliente entre sua página da web e o servidor.
Primeiro você precisa registrá-lo e, uma vez instalado, ele será capaz de capturar todas as solicitações de busca enviadas por sua página da web para a rede.
Com base na lógica de seu aplicativo e na experiência direcionada, você tem várias estratégias possíveis para gerenciar o cache do service worker . O PWA Builder está fornecendo vários trabalhadores de serviço prontos para serem usados. Você provavelmente terá que adaptar o código para atender perfeitamente às suas necessidades, mas é um bom ponto de partida.

Como você pode ver, mesmo sem nenhuma conectividade de rede, o jogo ainda pode ser carregado do navegador. O service worker está obtendo os arquivos do aplicativo (JS, HTML, CSS e imagens) de seu cache enquanto o mecanismo do jogo obtém os ativos 3D do jogo do IndexedDB.

Prós e contras

Então, quais são os Prós Contras de um PWA que você precisa ter em mente ao pensar em seu novo aplicativo?
PROs

• É apenas um site!
  • Atualizações fáceis no servidor web
  • Mesmo código em todos os lugares
  • Use sua estrutura favorita (Angular, Vue, React) ou linguagem (TypeScript, JavaScript)
• Alto alcance / qualquer dispositivo
• Indexável

CONs

• Mesma UI / UX em todas as plataformas
• Não (sempre) tenha acesso total à plataforma / hardware

Na verdade, mesmo se você estiver enviando seu aplicativo para a Windows Store, as atualizações serão feitas no servidor da Web que hospeda o PWA e serão refletidas imediatamente no dispositivo do usuário. Você terá que passar pelo processo de validação pela primeira vez, é claro, mas as atualizações futuras serão muito mais rápidas de enviar para o dispositivo do que uma atualização de um aplicativo nativo clássico em que um novo pacote deve ser enviado a cada vez. Se você não publicar em uma loja, bem, é apenas um site novamente. A Web está oferecendo, de longe, o maior alcance possível hoje, já que cada dispositivo possui um navegador da web. Também é fácil ser indexado pelos motores de busca. Os links diretos fazem parte da web, embora possam ser difíceis de implementar em um aplicativo nativo.
Claro, nem tudo é perfeito usando uma abordagem PWA . Você terá a mesma UI / UX em todas as plataformas . Se você precisa diferenciar a UX em uma plataforma específica para abraçar sua linguagem de design específica, isso não é algo fácil. Além disso, conforme discutido antes, você nem sempre terá acesso total à plataforma . Se seu aplicativo precisa discutir com um dispositivo USB, por exemplo, isso pode ser um bloqueador.

Electron App

Electron é um projeto criado e mantido pelo Github. Como o Github foi adquirido pela Microsoft, parece que Electron é um projeto da Microsoft de certa forma agora 😉
Costumava haver algum delta importante entre a versão do Chromium enviada com o projeto Electron e o lançamento oficial do Chrome . Isso foi reduzido recentemente. Por exemplo, o lançamento estável do Electron 3.0 foi lançado em setembro de 2018 com o Chromium 66. Você pode encontrar versões mais recentes do lançamento do Chromium 68 ou 69 do Electron. Ainda assim, o Electron está geralmente alguns meses atrasado nas compilações públicas mais recentes do Chrome / Chromium. Isso significa que você não poderá enviar um código usando os recursos mais recentes fornecidos com o Chrome dentro de um aplicativo Electron. Tenha isso em mente. Mas você só terá que esperar algumas semanas / meses antes que ele se torne disponível na versão Chromium enviada no branch Electron.
Um aplicativo de elétrons pode integrar melhor o ambiente de desktop. Conforme explicado em seu documento, você pode definir os documentos recentes, gerenciar notificações ou arrastar arquivos para fora da janela, por exemplo. Você também pode ter acesso ao sistema de arquivos via Node.js, conforme explicado neste documento: Electron Application Architecture.
Conforme mostrado no diagrama acima, Electron está fornecendo uma camada de abstração por meio de um conjunto de APIs. Você pode então ter um código JavaScript comum direcionado a várias plataformas , a ponte é feita por essas APIs. Mas você também pode usar ou escrever um plug-in Node.js nativo para fazer chamadas específicas para a plataforma, se necessário. No caso do Windows 10, por exemplo, se você gostaria de fazer chamadas nativas para a API WinRT, você pode usar este módulo Node.js: https://github.com/NodeRT/NodeRT. Este é um projeto escrito e usado pelo Slack para melhor integrar a plataforma Windows 10.
De minha parte, decidi verificar, para me divertir, até que ponto poderia usar o Electron para criar uma cópia do aplicativo Calculadora padrão instalado, que é escrito em UWP / XAML. Em primeiro lugar, para alcançar o efeito acrílico fluente / fundo desfocado, encontrei este pacote NPM: windows10-fluently-vibrancy para aplicativos Electron.
Usando os recursos CSS mais recentes, como CSS Grid e Flexbox combinados com alguns outros truques, consegui criar algo relativamente fechado para o design do aplicativo Calculadora. Veja este vídeo comparando as duas

Prós e contras

Mais uma vez, para ajudá-lo a decidir se o Electron pode ser uma boa escolha para você, aqui estão os PROs e CONs:
PROs

• Use sua pilha da web favorita (front + node.js)
• Motor do navegador controlado
• Pode interagir com o sistema por meio de chamadas nativas
• Linux / MacOS / Windows facilmente direcionado

CONs

• Incorporar um Chromium & Node.js completo
  • Tamanho
• • Atualizações de segurança do Chromium
• Apenas desktop
• Web UI

Aplicativos Híbridos

Outra maneira de ultrapassar as barreiras reais do PWA é usar uma abordagem híbrida. Híbrido significa que você criará um “aplicativo nativo” com um componente WebView que hospedará seu aplicativo da web.
Em seguida, você usará uma ponte entre esse componente WebView e o aplicativo nativo para fazer chamadas nativas para a plataforma a partir de seu código JavaScript. O WebView pode ocupar 100% do layout do seu aplicativo ou parte dele.
Em ambos os casos, seu aplicativo será considerado híbrido. Você pode, por exemplo, usar apenas uma pequena parte do layout do seu aplicativo para incorporar um serviço de mapa da web.
Existem 2 opções para construir um aplicativo híbrido:

• Apache Cordova
• Seu próprio aplicativo nativo com um WebView dentro dele
  • XAML / C # ou C ++
  • Swift / Objective C
  • Java, etc

Mas se você usar a segunda opção, terá que cuidar sozinho da comunicação entre o WebView e seu código JS com o código nativo.
É por isso que a escolha mais óbvia a se considerar é Cordova . Você pode aprender mais sobre Cordova: https://cordova.apache.org/ se ainda não o conhece.
Gostou das dicas sobre cross-platform? É possível encontrar maneiras de criar na web. Para mais conteúdos sobre tecnologia e aplicativos, continue acompanhando o nosso blog.