Avatar
Por .

Criado em .

Que tal jogar flappy bird no celular sem ter que entrar na play store? Ou melhor que tal ganhar dinheiro criando sites que também são apps para seu cabeleleiro ou para seu próprio negocío numa tacada só? Entenda agora o plausível futuro dos aplicativos no celular.

PWA (Progressive Web App) “Aplicativo Web Progressivo” em tradução livre. De acordo com a World Wide Web Consortium (W3C), É uma combinação de recursos dos navegadores web, que permite websites se comportarem como Aplicativos.

Como funciona

Os Progressive Web Apps tem comportamento de um aplicativo, tanto no celular como no computador, através do navegador. O mesmo código do PWA que é utilizado como App nos smartphones pode ser o mesmo que aparece como um site nos tradicionais PCs, isso porque ele é composto por HTML, CSS e Javascript, juntando essas linguagens somada as técnica de responsividade temos um efeito transfigurativo (Design que se adapta a diferentes telas).

OBS: PWA não é aplicativo hibrido como Ionic, PhoneGap, React Native dentre outros!

Foto da themojomedia, representanto um desgin responsivo.

OBS: PWA != SPA porém podem trabalhar juntos sem problema algum!

A construção de um PWA constitui de 2 recursos essenciais:

Imagem de um service worker

service worker PWA

  • Service Worker JS;
  • Mainifest JSON;

Como Matt Gaunt conta em “Service Workers: an Introduction“. Usando a API Service Worker, é criado um script que atua como Proxy, interceptando a troca de dados entre o navegador e o servidor remoto no Front-end. Esse script faz o cache de determinados arquivos da aplicação, e passa a responder com o código HTTP 200 “Ok”, entregado o conteúdo em cache, mesmo estando offline da rede.

Os Service workers utilizam esquema de promessas, pois trabalham de modo ascincrono. (Queiroz et al., 2018). Um exemplo claro é esperar o servidor remoto responder com os dados para realizar o cache. O cache só ocorrerá depois que os dados chegarem, ação a qual não é imediata então deve ocorrer com acionamento de eventos.

Nota: talvez um API similar ao service worker, se não a mesma, seja usada para minera cripto moedas. Se você souber, deixe nos comentários. Quem sabe eu traga isso em uma futura pesquisa.

O Manifest é um arquivos JSON que contém metadados como; nome, cor de tema, ícones, dentre outros, usado pelo sistema para instalar Web Apps. É com base nesse arquivo que o sistema cria um atalho na tela do smartphone similar a um App nativo. Esse Aquivo é uma especificação da W3C.


/**
 * Exemplo de manifest.json
 * See more: www.w3.org/TR/appmanifest
 */
{ 
 "name": "Donate App",
 "description": "This app helps you donate to worthy causes.", 
 "icons": 
     [{ 
      "src": "images/icon.png",
      "sizes": "192x192" 
     }] 
}

 

O PWA fica hospedado no servidor como um site qualquer, ao acessar o “link” ex: qrcodescan.in, um página será carregada como um site convencional, e após alguns segundo o usuário será questinoado se deseja salvar tál “página” na tela inicial do seu dispositivo.

Caso a mensagem não apareça, o usuário pode ir nos “3 pontinhos” ao lado do alternado de abas e selecionar a opção “adicionar a tela inicial”, (Add to Home Screen).

OBS 1: Se a mensagem não apreceu, há uma grande chance de que a página acessada, não seja um PWA. Os critérios para saber se é ou não um App progressivo estão logo adiante.

OBS 2: O Debug Life ainda não é um PWA.

Recursos acessíveis pelo PWA

Como dito no inicio desse artigo, o browser é o ambiente onde o PWA é executado. Nesse ambiente é possível ter acesso a recurso como:

  • API de Geolocalização: permite acesso a localização do dispositivo, fornecida por GPS, localização triangular GPRS ou por IP;
  • API de mídia: permite acesso a webcams ou câmeras e captura de áudio do microfone;
  • API de Mensagens Push: permite emitir mensagem de notificação, ex: Whatsapp no smartphone ou Web (quando permitida a notificação na área de trabalho.);
  • API de cache: uma das mais importante de todas, que permite guarda o *aplicativo*, seus arquivos (.html, .css, .js, etc…);

Dentre muitas outras APIs existes. Algumas experimentais, estáveis ou depreciadas. Você pode ver uma lista delas no site no MDN webAPI.

Identificando um PWA

Geralmente, ao acessar um endereço detentor de um PWA, o navegado emite uma mensagem (no android) perguntando se deseja adicionar tal App a tela inicial do sistema. Porém apenas emitir essa mensagem não basta, então a Google criou uma checklist que especifica quais pontos a aplicação deve cumprir para ser considerada um PWA. As principais delas são:

  1. Servidor sobre HTTPS: Por questões de segurança, os service workers *funcionam* apenas no protocolo HTTPS, para tentar evitar ataques to tipo man-in-the-middle;
  2. Desing responsivo em tablets e outro mobiles: a interface do app deve ser amigável ao usuário independete da tela do dispositivo;
  3. Todas as URLs (no popular: “links”) carregam offiline: todas as páginas que aparecem ao usuário devem ser carregaveis sem acesso rede;
  4. Provê metadados sobre o App: o manifest.json, deve conter informações sobre o app, para que o sistema possa adicionar na tela inicial;
  5. Ver mais.

Suporte

Atualmente o Google Chrome no android é quem melhor da suporte aos PWAs, Já os usuários de IOS podem desfrutar parcialmente dessa técnica de desenvolvimento apenas na versão 11.3, (A loja de app deles deve render uma grana “dahora”). Já a execução de PWA nos computadores não é muito vulgar, porem não há dificuldades na sua execução, basta acessar o PWA pela primeira vez, adicionar um atalho na Desktop (não é necessário) e pronto. Você mesmo pode tentar acessando: www.progressivewebflap.com.

O site PWA Rocks, dispobibiliza um grade de link para Apps Progressivos desde jogos a sites comerciais, vale apenas dar uma olha você que ainda é novo nesse assunto.

Ajude esse conhecimento a se propagar, compartilhe com a galera!

Dúvidas, criticas e sugestões, deixe nos cometários!

Referências:

Gaunt, Matt. Service Workers: an Introduction, 2018. Disponível em: <developers.google.com/web/fundamentals/primers/service-workers/> Acesso em: 19 de Set. 2018.

Lima, Matheus. Introdução aos Progressive Web Apps, 2017. Disponível em: < tableless.com.br/introducao-aos-progressive-web-apps/ > Acesso em: 19 de Set. 2018.

Alcidesqueiroz; Dicarlosdesign. API do Service Worker, 2018. Disponível em: < developer.mozilla.org/pt-BR/docs/Web/API/Service_Worker_API/ > Acesso em: 19 de Set. 2018.

Caceres, M. et al. Web App Manifest, 2018. Disponível em: < www.w3.org/TR/appmanifest/ > Acesso em: 19 de Set. 2018.

Calvalcante, R. et al. Usando geolocation, 2018. Disponível em: < developer.mozilla.org/pt-BR/docs/Using_geolocation#O_objeto_geolocation > Acesso em: 29 de Set. 2018.

Burnett, D. et al. Media Capture and Streams, 2017. Disponível em: < www.w3.org/TR/mediacapture-streams/ > Acesso em: 19 de Set. 2018.

Alex, R. et al. API Push, 2017. Disponível em: < developer.mozilla.org/pt-BR/docs/Web/API/API_Push > Acesso em: 19 de Set. 2017.

David, C. M. et al. Cache, 2018. Disponível em: < developer.mozilla.org/en-US/docs/Web/API/Cache > Acesso em: 19 de Set. 2018.

Veiras, W. et al. webAPI, 2018. Disponível em: < developer.mozilla.org/pt-BR/docs/WebAPI > Acesso em: 19 de Set. 2018.

Google Developers. Progressive Web App Checklist, 2018. Disponível em: < developers.google.com/web/progressive-web-apps/checklist > Acesso em: 21 de Set. 2018.

Rabelo, Eduardo, PWA no iOS: Como deixá-lo mais Nativo, 2018. Disponível em: < medium.com/@oieduardorabelo/pwa-no-ios-como-deix%C3%A1-lo-mais-nativo-e022f6c67b9c > Acesso em: 21 de Set. 2018.