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

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário