Progressive web apps
- 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