Single Blog

Progressive Web Apps (PWA): O que é e por onde começar?

Muito tem se falado sobre as Progressive Web Apps (PWA) e o futuro do desenvolvimento Web. Sabemos que esta é uma mudança sem volta, e que estamos elevando nosso patamar quando falamos de aplicações Web. E aí, você está preparado?

Por que você gosta dos aplicativos Mobile?

Você já parou para se perguntar por que você utiliza um aplicativo para acessar o Facebook ao invés de utilizá-lo diretamente no navegador do seu telefone?

Bom, nós optamos por versões instaladas nos nossos dispositivos pelas facilidades que as mesmas oferecem. Você não precisa abrir um navegador, digitar uma URL, se autenticar e por aí vai. Basta clicar em um ícone na Home que está tudo pronto! Acessei o Facebook!

Além disso, o aplicativo é mais rápido normalmente, permite que eu trabalhe offline, me envia notificações. Tudo isto importa, e muito!

O que é ruim nas Apps Mobile?

O que então nos faz olhar e ainda pensar que as aplicações Web serão o futuro (novamente)?

Pois bem, as aplicações mobile hoje não são fácilmente linkáveis, ou seja, não tem como eu enviar um link do Facebook, de uma postagem da Web e você ver no seu telefone.

Além disso, elas não são indexadas pelos mecanismos de busca do Google, o que pode impactar diretamente a visibilidade da sua app, ficando restrita apenas ao marketplace.

Por fim temos a instalação e atualização dos aplicativos, que muitas vezes são muito custosos. Sabia que apenas 47% dos usuários do Samsung que está EXPLODINDO atualizaram seu firmware? Imagina para atualizar seu App.

O que é ruim nas Web Mobile Apps?

Elas tem que ser acessadas via Browser, tornando chato a digitação e abertura da mesma. Não tem notificações, a performance às vezes não ajuda, a experiência pode ser reduzida, e elas não trabalham offline!

O acesso via Browser é algo que não podemos mudar, porém, podemos tornar uma aplicação Web instalável, sabia? Há tempos existe um recurso nos browsers  (Chrome e Safari) chamado “Add to Home Screen”, onde você pode adicionar sua aplicação Web a tela inicial, deixando ela como se fosse uma aplicação instalada nativa, mas claro, sem consumir tanto espaço interno.

Nas últimas versões, o Chrome também disponibilizou notificações tanto no Browser Desktop quanto no Mobile, e se você utilizar um Service Worker que roda em background, ainda vai poder receber notificações quando sua App Web estiver fechada.

A performance é o caso mais engraçado aqui. Se você pegar o Bootstrap completo e jogar ele no Mobile, não terá performance. O cuidado tem que ser grande aqui, independente de framework ou tecnologia. Eu tenho usado o Angular Material e achado sensacional.

A performance afeta a experiência, juntamente com coisas muito estáticas, sem animações, que simplesmente surgem na tela. Pelo amor de Deus minha gente, temos caras como animate.css que faz animações em CSS, temos um ótimo suporte a SVG com animações já. Por que criamos sempre as mesmas aplicações, estáticas, feias, sem performance?

Para finalizar, o suporte offline existe já, seja com Service Workers ou via Cache do HTML5, hoje já podemos ter todos os nossos arquivos offline.

O que é o PWA então?

Antes de tudo, abra esta URL no seu telefone — http://paperplanes.world — isto é uma aplicação Web, que é melhor que muita aplicação nativa. Ela tem performance, animações, roda offline e por aí vai. Isto é um belo exemplo de PWA!

PWA é a junção de tudo isto que comentei acima! É uma aplicação Web com performance, animações, notificações, instalável, trabalhando offline, linkável, indexável e de fácil atualização. Já temos tudo para construir aplicações neste nível, inclusive, mostrei boa parte disso no curso de aplicações híbridas que fiz um tempinho atrás, onde fizemos um aplicativo Web, com performance, animação, rodando offline, instalável e distribuímos o mesmo via Electron, via Web e Mobile (PhoneGap ou Instalado pelo Browser).

De certa forma, o PWA é mais um manifesto do que outra coisa. É um apelo para construirmos aplicações melhores.

Recursos

Sei que falei muita coisa, e são muitas informações, então preparei aqui uma lista com os principais recursos que você pode começar a estudar para ficar preparado para o futuro da Web com PWA!

E você, o que achou do assunto? Deixa seu comentário!


balta.io - Seja um Assinante

Comments (5)

  1. Gostaria de saber o Xamarin vem ganhando espaço e não seria momentos também de falar sobre ele, vou você somente acha que Angula e phonegap são melhores e pronto ?

    1. Boas Pedro, Xamarin ganhou uma força IMENSA quando a Microsoft comprou ele e o tornou gratuito. Com certeza, hoje o Xamarin é o caminho para Mobile Apps. Note que falamos do FUTURO quando dizemos PWA. No presente, Xamarin ainda é “O cara”.

    1. O Aurélia é um framework JS assim como o Angular. Mas por hora ainda não vi novidades deles sobre PWA. O Angular lançou sua versão Mobile com suporte a vários Service Workers… No Aurélia ainda não vi nada disso. Abraços,

  2. Muito bom Balta… (Aliás comecei a segui-lo.. hehe)

    Há uns dias eu estava aqui quebrando a cabeça e até estudei por um dia inteiro PWA(Polyfills etc etc) pela doc oficial do Google que está maravilhosa! mas eu senti que as coisas apesar de muito boas ainda não estavam funcionando como eu esperava e as apps que já estão usando o conceito de PWA do google que estão online (suponho que o buscapé e o trello já estejam usando de acordo com alguma animações clássicas em alguns botões e transições de tela) sofrem do mesmo problema a tal “estranheza” ao navegar..

    Mas agora que vi que vc também entende que ainda é um “futuro” fiquei bem tranquilo e animado, porque o que já temos é muito bom! Mas em termos de confiabilidade ainda continuo com o Angular1/2 e Ionic / NativeScript para apps híbridas o conceito do PWA chegar passando igual um trator em cima disso tudo.. (acredito que é questão de adoção do mercado e tempo).

    Muito obrigado pelo post!

Post a Comment

© Copyright - balta.io