Artigos

Progressive Web Apps — O novo passo da Web

Estamos em um momento no qual as pessoas cada vez menos utilizam o desktop para navegar na web. Conheço pessoas que possuem um smartphoneda moda, uma smart tv caríssima, mas não possuem um computador de mesa em suas casas. Algum problema com isso? Hum… Não.

Esse mesmo perfil de usuário, navega na internet através de aplicativos ao invés de usar um browser. O Facebook, faz um esforço homérico para que seus usuários não saiam de seu aplicativo, mesmo quando clicam em um link para um site externo, se consolidando como uma plataforma fechada e um risco para a web aberta. Escrevi um post falando um pouco sobre isso.

No outro lado temos o Google, que se vende como uma empresa legal, mas tem um viés controlador também. No entanto, para o Google, é interessante que a web continue forte e aberta. E nesta guerra, eu escolho ficar do lado do Google.

E temos a Apple, que vive em um mundo à parte, focando em aplicativos e deixando a web em segundo plano. Seu navegador, o Safari, se transformou no que antes o Internet Explorer representava: atraso. Mas vamos em frente.

Diante desse contexto, vamos dar uma olhada nas alternativas que temos para desenvolver aplicativos mobile. Seus prós e contras.

Alternativas à Web

Aplicativos Nativos

São aplicativos desenvolvidos em plataformas nativas, iOS, Android, Windows Phone. Possuem suas linguagens próprias, Objective C, Swift, Java, Kotlin, C#, e possuem seus próprios componentes customizados. Geralmente possuem boa performance e fácil acesso a dispositivos do smartphone.

Mas agora, irei citar alguns motivos que me fazem, como desenvolvedor, fugir de aplicativos nativos como o diabo foge da cruz.

A curva de aprendizado é sinuosa. Desenvolver para iOS é bem diferente de desenvolver para Android. As linguagens são diferentes, filosofias diferentes, o fluxo de trabalho é diferente. Um único desenvolvedor iria gastar muito tempo para aprender como desenvolver nas plataformas disponíveis no mercado. Sem falar nas linguagens utilizadas, mas essa parte é uma opinião muito pessoal.

É necessário criar e manter vários projetos para a mesma aplicação. Várias bases de código diferentes que, no final das contas, fazem a mesma coisa. Além da necessidade de contratar desenvolvedores com skills em iOS e Android (vamos deixar Windows Phone de lado a partir daqui, devido sua baixa adoção).

O processo de publicação de aplicativos em lojas são burocráticos, principalmente na loja da Apple. Além de ser caro.

Aplicativos Híbridos

Agora sim! As coisas estão melhorando. Posso desenvolver aplicativos que podem ser publicados nas lojas de aplicativos usando tecnologias web como html5cssjavascript, usando plataformas como Cordova Ionic. O aplicativo gerado roda através de um WebView e dispositivos podem ser acessados através de javascript. Awesome! Só que não.

A parte ruim é que você irá precisar fazer um excelente trabalho no que diz respeito a experiência do usuário e usabilidade, já que você não estará usando os componentes e guidelines de interação com o usuário nativos das plataformas.

Geralmente apresentam performance inferior em relação aos apps nativos.

React Native

Hum… Vejamos… Empresas como Facebook, Uber, AirBnb, Walmart, dentre outras, já utilizam essa ferramenta para desenvolver seus apps mobile. Com react native é possível construir apps usando a biblioteca javascript do momento, React. React Native possui uma api javascript para acessar dispositivos e componentes nativos.

O app tem performance comparada a apps nativos. O código não roda em um WebView. São geradas duas versões do aplicativo, iOS e Android, usando a mesma base de código, que podem ser publicados em suas respectivas lojas.

O linguagem é javascript, a linguagem mais popular que existe, usando componentes React.

O único contra é ter que publicar o aplicativo em uma loja, como acontece com os demais aplicativos. Fora isso, você já deveria estar usando React Native.

Progressive Web Apps

É um web app que utiliza funcionalidades avançadas disponíveis no browser que causam uma experiência mobile muito similar a um app nativo. As principais características de um PWA são:

  • Oferecer uma expriência off-line para os usuários.
  • Oferecer uma experiência mobile app-like.
  • É instalável.
  • É possível utilizar push notifications para o engajamento.
  • É segura. Só funciona usando HTTPS.
  • Carregamento rápido mesmo em redes lentas.
  • É linkável. Cada tela do app possui uma url.
  • É indexável. Pode ser descoberta por mecanismos de busca.
  • É responsível. Funciona em vários tamanhos de telas.
  • É Progressiva. Pode ser utilizada mesmo que todas as funcionalidades ainda não estejam disponíveis.
Famoso PWA da Anitta. Feito com React e Material design. https://anitta-app.herokuapp.com/

O PWA é um aplicativo web desenvolvido com tecnologias web. Não há mistério.

Ao navegar entre as páginas, o navegador irá sugerir que você instale o aplicativo na home screen do seu smart phone.

Após a instalação, clicando no ícone do app, o aplicativo irá abrir no modo fullscreen, não mostrando a barra de url, oferecendo uma experiência app-like.

A grande vantagem é que não precisamos passar por processos burocráticos para fazer deploy do aplicativo em uma loja. Toda e qualquer atualização no aplicativo já estará disponível para o usuário on the fly, sem a necessidade de baixar a atualização.

Enquanto apps nativos podem ocupar de 100 MB a até 200 MB ou mais, PWAs ocupam espaço de armazenamento na faixa dos KB.

Outra vantagem é que teremos apenas um projeto para manter. Somente um projeto de app que roda em qualquer lugar. Esse é o poder da web.

PWA da Anitta E Palestras Coletivas na home screen.

A grande vantagem de se desenvolver em plataformas nativas é ter acesso a dispositivos do smartphone através da api nativa. No caso de aplicativos web, esse acesso ainda é limitado. Hoje, não é possível acessar a lista de contatos ou NFC pela web, por exemplo.

https://whatwebcando.today/

No entanto, acesso a dispositivos é só um aspecto de um bom aplicativo. Muitas vezes, não existe uma necessidade real de se desenvolver um aplicativo nativo. Um bom web app pode resolver o problema, principalmente agora que tempos muitas funcionalidades expostas por plataformas nativas disponíveis em aplicativos web.

Conclusão

Progressives Web Apps não são o futuro. Elas já estão entre nós já há algum tempo. Usuários do Android podem usufruir de uma experiência completa de um PWA. Já usuários do iPhone, ainda precisam aguardar a Apple disponibilizar o suporte a algumas funcionalidades no Safari que estão vindo no iOS 11.3 and macOS 10.13.4.

Em um próximo post, iremos explicar com detalhes como funciona e como implementar cada funcionalidade de uma PWA.

Obrigado por ler. Se gostou bate palma e compartilhe.

Até a próxima.

Para saber mais: https://developers.google.com/web/progressive-web-apps/

Texto originalmente publicado em Idopterlabs.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *