CapacitorJs, PWA e empacotando front-end para Android e iOS.

E aí artesão do código, se te chamarem para fazer deploy na sexta-feira, cai fora, é furada! 😉

Eu tenho um pé no mobile, já faz um bom tempo, entusiasta das tecnologias para web eu fiquei muito empolgado com a possibilidade de pegar um projeto com HTML, CSS e JS e poder transformar isso em um .apk que poderia ser publicado e instalado nos celulares Android e iOS pelo mundo, fantástico!

Adobe Phonegap, Cordova, Intel XDK, NativeScript-Vue foram tecnologias que estudei, a última em especial foi "quem me deu" o meu primeiro emprego, mas nem tudo são flores, eu chego ao NativeScript devido a um grande problema do desenvolvimento híbrido, a WebView!

De forma bem simplista, a WebView é um navegador sem a cara de navegador, até aí tudo bem, acontece que muitos celulares tinham seu próprio navegador e esses geralmente não eram tão compatíveis com várias coisas do HTML5, etc. Rolava então uma situação complicada, se teu app caía em um celular com o Chrome(ou o app WebView, logo depois), rodava tudo lindamente, agora, se teu app dava a sorte de cair em celulares com o próprio navegador, como era o caso da Sansung, quebrava tudo! Com o tempo algumas soluções foram surgindo e hoje temos um pouco mais de segurança para poder investir em desenvolvimento híbrido com tecnologias web.

CapacitorJs

"Capacitor is an open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS." CapacitorJs

O CapacitorJs é uma criação da glra do Ionic, e vem para ficar no lugar do Cordova e a proposta dele é empacotar qualquer front-end ou ser usado em sua PWA, seus plugins seguem esse princípio, exemplo do plugin de geolocation que vai funcionar no navegador e nas plataformas mobile, mas você deve pensar "claro que funciona, é tudo web!", na verdade, não é bem assim, o Cordova, por exemplo, usa tecnologias web, porém não vai rodar em navegadores fora de uma plataforma mobile.

Simples assim

Para você empacotar o teu aplicativo, será tão simples assim:

// instalando o capacitor
npm i @capacitor/core
npm i -D @capacitor/cli

// inicializando configuração
npx cap init

Arquivo de configuração:

// capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'local-chat',
  webDir: 'dist', // ⚠️ destino da build do projeto front-end
  server: {
    androidScheme: 'https'
  }
}

export default config

// adicionando as plataformas
npm i @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios

// faça build do projeto front-end

// sincronizar o código da build
npx cap sync

// abrir o projeto no android studio ou xcode
npx cap open android/ios

// ou simplesmente rodar se seu ambiente estiver configurado
npx cap run android

Seguindo os passos a cima você já pode ver o aplicativo rodando em seu smartphone, considere que o ambiente deve estar configurado para que tudo funcione.

Conclusão

Atualmente eu considero o desenvolvimento híbrido como uma alternativa válida e eficiente para a maioria dos cenários de aplicativos, o contexto do desenvolvimento é bem maior do que o mostrado aqui, por exemplo, você pode em algum momento ter que produzir código nativo para as plataformas para poder resolver problemas específicos, mas na minha opinião isso não invalida o uso dessa alternativa.