Progressive Web Apps – A Web Turbinada

Certamente você já acessou um website mobile ou também conhecido como web app e durante o acesso talvez tenha percebido que na maioria das vezes são lentos e pesados, gerando uma experiência frustrante e desestimulante.

A noticia boa é que muitos desenvolvedores tem lutado para que seus web apps sejam tão performáticos quanto aplicativos da loja de aplicativos ou App Store.

O principal ponto aqui, é que um aplicativo disponível em uma App Store precisa ser nativo ou híbrido (A diferença entre apps híbridos e nativos aqui), ou seja, você precisa instalar em seu device e aceitar os termos de permissão antes mesmo de saber se o aplicativo é realmente bom. Convenhamos que isso também gera algum tipo de frustração, afinal, instalar e desinstalar aplicativos o tempo todo, ou até mesmo instalar um aplicativo que você irá usar apenas uma unica vez, não é algo que nos deixa feliz, sem falar que a internet no Brasil é lenta e caríssima, então, se você precisa baixar um app de 30mb, além da demora, ainda terá o risco de ao final do download seu plano de dados tenha se esgotado.

Pensando neste cenário, nasce o conceito Progressive Web Apps (PWA) ou aplicativo progressivo para a web, apesar da tradução um tanto estranha, trata-se de um aplicativo que usa recursos modernos dos navegadores para oferecer uma experiência semelhante aos apps nativos/híbridos e  são implementados em HTML, CSS e JavaScript.

Neste momento você deve estar se perguntando: Então qual a diferença do Web App e o Progressive Web App?

A diferença é que o PWA é um web app turbinado, ou seja, você começa acessando pelo navegador, o que não requer que você o instale pela App Store e a medida que vai interagindo com ele, este vai se tornando progressivamente mais app .

Vamos a um exemplo real

Se você salvar este website de exemplo em PWA na homescreen do seu dispositivo, você terá então, um ícone de atalho personalizado, onde o app irá funcionar em tela cheia sem a barra de navegação do browser, aproveite e desligue o acesso a internet e você verá que o aplicativo continuará funcionando offline, você ainda poderá receber push notification, assim como as aplicações mobile fazem.

Screenshot_2016-09-30-16-01-51Figura 01 – Adicionar à tela inicial

Além disso, podemos ter acesso a geolocalização, entre outros, como um aplicativo nativo/híbrido, a premissa minima é que você precisa acesso-lo pelo menos uma vez com acesso a internet para ser feito o cache do app.

Para o site ser considerado PWA, temos 10 conceitos chaves, retirados do próprio site do Google, para separar PWA de sites normais, que precisam ser cumpridas:

  1. Seguro – Servido via HTTPS para evitar espionagem e garantir que o conteúdo não foi adulterado.
  2. Progressivo – Trabalha para todos os usuários, independentemente da escolha do navegador, porque eles são construídos com progressive enhancement como um princípio central.
  3. Responsivo – Se encaixa em qualquer formato de tela: desktop, celular, tablet, entre outros.
  4. Independente de acesso a internet –  com a tecnologia de Service workers é possível ter acesso a aplicação mesmo em redes de baixa qualidade ou até offline.
  5. App-like – Experiência de um aplicativo nativo/híbrido para o usuário, porque eles são construídos sobre o modelo app shell.
  6. Sempre atualizado – não é necessário baixar as atualizações, uma vez que o site está na web, na próxima vez que você entrar, será atualizado em background.
  7. Detectável – são identificáveis ​​como “aplicações”, graças ao W3C manifest e  registro do escopo do Service worker, permitindo que os motores de busca possam encontrá-los.
  8. Re-engajável – Faça o reengajamento fácil através de recursos como push notification para trazer o usuário de volta.
  9. Instalável – Permitir que os usuários mantenham o atalho do aplicativo em sua tela inicial com um ícone personalizado, sem o incômodo de uma loja de aplicativos.
  10. Linkavel – Facilidade em compartilhar via URL para alguém e não requer instalação complexa.

Seguindo essas orientações, você irá assegurar que seu aplicativo funciona muito bem, não apenas quando visualizado no browser, mas também quando é usado separadamente, através de um atalho na tela inicial do dispositivo.

O que Progressive Web Apps não são?

Toda e qualquer tecnologia que precisa empacotar arquivos executáveis, seja ele um .apk, .exe ou qualquer outra coisa, que necessita ser baixado a partir da  loja de aplicativos e instalado no dispositivo do usuário.

PWA não requer instalação, você precisa simplesmente visitar o site e o salva na tela inicial como um atalho. Desenvolvimento e manutenção de iOS, Android e Windows não é mais um problema, mas o suporte ao navegador precisa ser levado em consideração. Atualmente no caso do iOS o suporte tem ressalvas, sendo preciso aplicar contornos necessários, como appCache para funcionamento offline entre outros. Você pode verificar o suporte iOS para Service workers aqui.

E como tudo isso é possível?

Graças a um script orientado a eventos chamado Service workers que é executado por navegadores que possuem suporte a ele. Mesmo com um site rodando offline, você terá a possibilidade de trabalhar com push notifications, geolocalização, atualizações de conteúdo em background, interceptação e cacheamento de requisições de imagens, JavaScript, folhas de estilos CSS, XHR, etc. Esse script funciona como um guarda-chuva de funcionalidades.

Na minha visão Service Worker é o futuro da web, por isso, minha dica é estudá-lo e explorá-lo cada vez mais.

Veja aqui o que é Service Worker

Veja mais aplicativos PWA

Conclusão

Podemos notar que com essa nova tecnologia a web ficou turbinada, ou seja, estamos presenciando a revolução da plataforma, onde podemos oferecer uma experiência tão boa quanto a dos aplicativos nativos/híbrido para nossos usuários. Com Service workers nós ficamos no controle da situação, pois temos a disposição várias funcionalidades que já citamos aqui. O conceito de Progressive Web Apps com Service Workers está apenas no inicio, definitivamente agrega muito valor a qualquer website. Espero que tenham gostado!!!

🙂

Referências

[1] – Progressive Web Apps: o melhor da Web appficada
[2] – The Building Blocks Of Progressive Web Apps
[3] – Offline Web com Service Workers – Sergio Lopes
[
4] – Service Worker Nightly
[
5] – ServiceWorker: A revolução da plataforma Web
[
6] – Progressive Web Apps
[7] – O que são Progressive Web Apps
[
8] – Sergio Lopes – Shopping App

Por PATRÍCIA GOMES DOS SANTOS SILVA

Analista de Sistemas apaixonada por front-end e boas práticas em desenvolvimento web, acredita que HTML, CSS e Javascript são a base e podemos mudar o mundo através da web.

Postado em: 03 de outubro de 2016

Confira outros artigos do nosso blog

Aplicações mobile multiplataforma com React Native e Expo

25 de março de 2019

Anderson Silva

Indicações de leitura para começar 2019 no “mundo Devops”

15 de março de 2019

André Jesus

Como ter previsibilidade no método Kanban

12 de março de 2019

Ricardo Augusto Shikota

Indo além da “página 2” da transformação digital

12 de março de 2019

Carlos Netto

Deixe seu comentário