Imagine que você precisa de um aplicativo para solucionar um problema, mas ele precisa estar tanto como um aplicativo, seja
no mobile, seja desktop. Você pode criar um aplicativo nativo para cada plataforma, mas isso pode ser um pouco caro e
demorado. Então, você pode criar um PWA (Progressive Web Application), que é um aplicativo web que pode ser instalado em
qualquer dispositivo, seja ele mobile ou desktop.
Mas afinal, o que é um PWA?
Um PWA é um aplicativo web que pode ser instalado em qualquer dispositivo, seja ele mobile ou desktop. Ele é construído com
tecnologias web modernas, como HTML, CSS e JavaScript, e pode ser instalado em qualquer dispositivo e a experiência que eu
tive foi simplesmente sensacional, o motivo? Transformei o Essentials em PWA e agora ele está disponível para instalação em
qualquer dispositivo, até mesmo como um aplicativo no desktop, o que facilita e muito de manter-se atualizado e sem depender
de um navegador ou acessar a página para ficar lembrando de instalar novos programas.
A ideia final é transformar vários de nossos produtos assim, dessa maneira, eliminamos a necessidade de usarmos o Electron
por exemplo para criar aplicativos desktop, pois o PWA é apenas um conversor simples que é gerado ao fazer a build da
ferramenta. Enquanto no Electron, ele seria um novo aplicativo, uma nova abordagem, remontar o código, pensar em uma nova
arquitetura, etc.
Tá, mas como você criou o PWA?
Existem várias maneiras de desenvolver um PWA, como eu sou focado em Javascript, acabei usando um pacote específico para o
framework que eu estava utilizando, no caso o next-pwa para atender a necessidade do Essentials que é desenvolvido em
Next.JS, mas saiba que existem vários pacotes que podem fazer isso, pra entender como eles funcionam, é só você ler com calma
a documentação de cada um deles. No caso do VueJS, você pode usar o vue-plugin-pwa e no React, você pode seguir direto a
documentação.
O que eu fiz? Inicialmente eu instalei o pacote next-pwa e adicionei ele no next.config.js:
const withPWA = require('next-pwa')
module.exports = withPWA({
pwa: {
dest: 'public',
},
})
Depois disso, eu adicionei o arquivo manifest.json na pasta public:
{
"name": "Essentials",
"short_name": "Essentials",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"description": "Essentials é uma ferramenta para gerenciar seus projetos de forma simples e rápida.",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
E após isso, com a ajuda do next-pwa, eu não preciso criar manualmente o service-worker.js ou sw.js, ele é gerado
quando eu peço a build do projeto, então eu só precisei rodar a build e o arquivo foi gerado automaticamente, claro, eu tive
que colocar todos os detalhes, adicionar os tamanhos de imagens 192x192 e 512x512 e o tipo de imagem que é png e
pronto, além de claro, definir no theme_color (aonde vai ficar a cor do cabeçalho do aplicativo) e voilà, o PWA já estava
funcionando.
Não consegui testar localmente, claro, porque ele depende de estar em produção pra funcionar, por conta da comunicação que
ele tem com o navegador para gerar o aplicativo, mas você pode ver através do Essentials que isso funciona e é muito
gratificante como uma ferramenta tão pequena pode ser tão útil. Se tiver dificuldades para ver como ele funciona, você pode ver a nossa documentação sobre o aplicativo. E fiquei ainda mais com a sensação de dever cumprido, em saber que um aplicativo que foi desenvolvido
para web pode se transformar em aplicativo e acessar vários dispositivos, comportar várias situações sem ter que adaptar inteiramente o código, fazer toda a transformação, mudar a arquitetura, enfim, foi uma experiência demais.
Por que você deveria transformar seu Web App em PWA?
- O PWA permite que sua aplicação tenha um modo offline por meio da configuração de um service worker. Dá um pouco de trabalho e exige dedicação, mas funciona muito bem!
- Normalmente os PWAs ocupam menos espaço no celular do usuário, pois o navegador só guarda o cache da sua aplicação.
- Ele pode te ajudar a economizar em requisições! Sim, você pode configurar o seu service worker para interceptar requisições. Caso os dados da requisição já estejam guardados no cache, ele vai pegar os seus dados por meio do service worker e retornar sem fazer a requisição.
- Construir um app PWA é muito mais fácil que construir um app nativo, seja ele realmente nativo como os apps em Swift (Objective C), Android Studio (Java), ou seja ele um framework híbrido, como React Native ou Ionic. Isso se dá pelo fato de que, na verdade, um PWA é apenas um web app adicionado em fullscreen na tela inicial do seu celular por meio de um navegador já instalado.
- A diferença entre um app nativo e um PWA é quase irreconhecível (caso o layout dele seja bem feito). É ótimo para testar aquele famoso MVP da sua startup.
- Você não precisa passar pela burocracia das lojas, principalmente da Apple Store para subir atualizações. É só subir.
Desvantagens
Se você quer que seu app tenha algum recurso que envolva a câmera do celular e seu público alvo possui iOS, desista do PWA. No Android funciona bem, você consegue acessar a câmera do dispositivo tanto em legacy mode (usando o app nativo da câmera do celular) ou direto pelo app (caso seu servidor tenha https).
Já o Safari (único app capaz de adicionar PWA à tela inicial no iOS,) só permite acesso à câmera em modo legacy. Nesse caso, seria interessante criar um PWA em android e um app nativo para iOS. Ou utilizar um framework como React Native para fazer um app híbrido.
Push Notifications
Novamente, o Safari possui limitações quanto a push notifications, é como se você tivesse que desenhar dois códigos de push diferentes: um para todo mundo, outro para a apple. É simplesmente irritante.
Nos casos em que você quer apenas oferecer uma interface mobile mais interessante para o usuário, já possui um layout feito para ser responsivo, vale à pena tentar implementar o PWA.
Você pode ver esse artigo escrito originalmente no meu blog.
Top comments (0)