Palestra sobre PWA realizada na semana CTS unime 09/11/2016

1. PROGRESSIVE WEB APPS
A REVOLUÇÃO DAS APLICAÇÕES WEB MOBILE

2. APRESENTAÇÃO
• João Maciel
• Desenvolvedor de software há 5 anos
• Formado em Desenvolvimento Web pelo Senai
• Cursando 8º semestre de Sistemas de informação na Unime
• Trabalhando na Soterotech como programador
• j.maciel.hd@gmail.com
• github.com/jmaciel

3. O QUE SÃO PROGRESSIVE WEB APPS
• Basicamente são a mesma coisa que um web app comum, porém se
comporta de forma progressiva
• O que significa para um web app ser progressivo?
• Significa que a aplicação vai ganhando suas capacidades
progressivamente de acordo com as capacidades dos
navegadores que estão sendo utilizados, ou seja, a experiência
vai melhorando a depender dos recursos disponíveis no
dispositivo do usuário.
• Uma outra definição sugere que é um app que possui todos os
benefícios das aplicações web e das aplicações nativas, e essa é a
definição mais comumente vista
• PWAs são híbridos de web com nativo, sendo aplicações web que

4. DEFINIÇÃO
• O Que é necessário para uma aplicação web ser considerada progressiva?
• Alex Russel cita as seguintes características para um progressive web app:
• Responsivo: se encaixa em qualquer resolução de tela.
• Independente de conexão: o app deve poder funcionar off-line
• Similaridade a um app nativo: o app deve parecer e se comportar como um
app nativo
• Sempre atualizado: o usuário não precisa “baixar uma atualização do app”
de tempos em tempos.
• Seguro: o conteúdo do app é servido com TLS para prevenir intrusos.
• Discoverable: é facilmente achado por mecanismos de busca
• Re-engajável: pode chamar o usuário de volta para o app
• Instalável: pode ser adicionado a homescreen do celular e acessado mesmo
off-line
• Linkável: a essência da web, pode ser facilmente compartilhado e acessado

5. PORQUÊ UTILIZAR PWA?
• Um estudo aponta que uma aplicação perde 20% dos
usuários a cada passo adicional que é necessário para
utilizá-la
• Numa aplicação nativa você precisa buscar o app na
loja de aplicativos, instalar e só então abrir ele
• Em um PWA é necessário apenas acessar o link
• Um PWA é uma aplicação web que tira vantagem de
muitos recursos nativos, sem a complicação de
codificar para mais de uma plataforma, distribuição e

6. COMO OS PWAS FUNCIONAM
• Os PWAs utilizam diversos recursos de navegadores modernos
para funcionar como por exemplo:
• Geolocation
• Media File
• Web Manifest
• Service Workers
• Desses recursos de navegadores modernos o que se destaca é
o Service Worker pois permite algumas das funcionalidades
mais importantes para assemelhar um web app de um app
nativo

7. SERVICE WORKERS
• O que são?
• É um script que seu navegador executa em segundo plano, separado de
uma página Web, abrindo a porta para recursos que não precisam de
uma página ou interação do usuário.
• Importante saber:
• Não tem acesso direto ao DOM, entretanto, pode se comunicar com
paginas via postMessage interface, dessa forma consegue manipular a
DOM se necessário
• É um proxy de rede programável, permitindo controlarmos como as
requisições de nossa pagina são tratadas
• É finalizado quando não está em uso, então não é possível persistir
estados globais nele, para isso seria necessário utilizar IndexedDB API
• SW fazem usos extensos de Promises, então é necessário que aja um
conhecimento prévio

8. EXEMPLOS IMPLEMENTÁVEIS COM SW
• Sincronização em Segundo plano
• Push Notifications
• Receber atualizações centralizadas de informações pesadas
para serem calculadas como, geolocation ou gyroscopio, assim
multiplas paginas podem fazer uso de um unico agrupamento
de informação
• Client-side compiling e gerenciamento de dependencias para
CoffeeScript, less, CJS/AMD modules, etc. para uso de
desenvolvedoresMelhoramento de perfomace, baixando
antecipadamente alguns arquivos que o usuário irá utilizer em
breve, como algumas próximas imagens em uma galleria de
fotos.

9. PERGUNTAS?

10. LET’S CODE!

11. REFERÊNCIAS E LEITURAS RECOMENDADAS
• https://github.com/phpunime/syp-pwa-client
• https://developers.google.com/web/progressive-web-apps/
• https://codelabs.developers.google.com/codelabs/your-first-pwapp/
• https://pwa.rocks/
• http://hipsters.tech/progressive-web-apps-hipsters-03/
• http://arquiteturadeinformacao.com/mobile/o-que-sao-progressive-web-apps/
• https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
• http://digiday.com/platforms/wtf-progressive-web-apps/
• https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/
• http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
• https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
• https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
• https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API