Preact PWA gerando seu APK

Nesse artigo vamos, entender como criar um .apk da sua PWA criada com preact, e para isso vamos sofrer um pouco com algumas configurações.

Primeiro vamos instalar o sdk do java, essa é uma tarefa facil basta baixar a versão do seu SO https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

feito isso não esqueça de colocar no path

Linux no seu .bashrc

export JAVA_HOME=/usr/java/jdk<version>/bin/java
export PATH=$JAVA_HOME/bin:$PATH

MAC no seu .bash_profile

export JAVA_HOME=$(/usr/libexec/java_home)
export PATH=$JAVA_HOME/bin:$PATH

Agora vamos testar

java -version
java version "1.8.0_191"
Java(TM) SE Runtime Environment (build 1.8.0_191-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.191-b12, mixed mode)

Vamos agora instalar o SDK do android, que é bem simples depois que se pega o jeito.

entre em https://developer.android.com/studio quase no fim da pagina tem as versões.

Apos descompactar ira aparecer a pasta tools, essa pasta onde estao os binarios que iremos usar, crie uma pasta em sua home, pode por qualquer nome irei usar o nome de Android, e jogue a pasta tools dentro dela.

após isso entre na pasta tools pelo terminal

cd ~/Android/tools

e vamos instalar a versão do sdk que precisamos

./sdkmanager "platform-tools" "platforms;android-27"
touch ~/.android/repositories.cfg
./sdkmanager --update
./sdkmanager --licenses

isso pode demorar um pouco, apos isso vamos instalar o gradle

baixe a ultima versão, a versão completa em https://gradle.org/releases/

após isso vamos descompactar

agora vamos configurar o path, no meu caso deixo na home.

export PATH=$PATH:~/gradle-4.10.2/bin

Vamos testar

gradle -v
------------------------------------------------------------
Gradle 4.10.2
------------------------------------------------------------
Build time:   2018-09-19 18:10:15 UTC
Revision:     b4d8d5d170bb4ba516e88d7fe5647e2323d791dd
Kotlin DSL:   1.0-rc-6
Kotlin:       1.2.61
Groovy:       2.4.15
Ant:          Apache Ant(TM) version 1.9.11 compiled on March 23 2018
JVM:          1.8.0_191 (Oracle Corporation 25.191-b12)
OS:           Mac OS X 10.11.6 x86_64

agora vamos instalar o Cordova , esse carinha que vai fazer a magica

sudo npm install -g cordova

e tambem vamos instalar o ManifoldJS que ira preparar nossa PWA para virar apk

npm install -g pwabuilder

feito isso basta usar o seguinte comando na sua PWA, caso nao saiba como fazer uma vale a pena ler nosso artigo Netlify + Preact + PWABuilder

vamos usar o site do preact que é uma PWA

pwabuilder https://preactjs.com  -p android,ios -l debug

quando der um ls vera que temos a pasta Preact entre nela usando

cd Preact/Polyfills/cordova/

como passei por um erro quando rodei o cordova build, e não quero que passem a mesma raiva de horas vasculhando a internet, para corrigir isso, use

cordova platform remove android
cordova platform add android

então asta rodar

cordova build android

Apos todo esse trabalho, vem a alegria

/Users/Indev/projetos/app/Preact/Polyfills/cordova/platforms/android/app/build/outputs/apk/debug/app-debug.apk

esta ai nosso apk, agora sempre que quisermos gerar nao precisamos mais fazer todo o processo, basta apenas usar

pwabuilder <url da pwa> -p android,ios -l debug
cd <nome da pwa>/Polyfills/cordova
// por preucaução
cordova platform remove android
cordova platform add android
cordova build android

Facil, agora pode por sua app na play store e ser feliz.

Gostou do artigo, entao participe do nosso grupo no telegram e venha conhecer o mundo de PWAs e Preact
https://t.me/PreactJsBrasil