Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Web Apps

661 views

Published on

Apresentação sobre Progressive Web Apps no evento Code Talks que ocorre quinzenalmente entre os desenvolvedores da Fixcode Tecnologia

Published in: Technology
  • Be the first to comment

Progressive Web Apps

  1. 1. PROGRESSIVE WEB APPS Adquirindo super-poderes PROGRESSIVAMENTE
  2. 2. SORRY!
  3. 3. eu sou uma Progressive Web App PRAZER,
  4. 4. O QUE É uma PWA? NÃO é uma especificação PROGRESSIVE por adquirir poderes progressivamente de acordo com a capacidade dos browsers EVOLUÇÃO de ideias que foram surgindo e amadurecendo ao longo dos anos que podem ser melhor aplicadas hoje, no cenário atual É uma BUZZWORD que de novo mesmo tem pouca coisa
  5. 5. VANTAGENS de apps nativas? Ótima PERFORMANCE Facilmente ACESSÍVEL a partir da home screen ANIMAÇÕES e INTERAÇÕES suaves
  6. 6. DESVANTAGENS de apps nativas? TEMPO de instalação Não é COMPARTILHÁVEL ATUALIZAÇÃO não costuma ser um procedimento padrão Lidar com devices com baixa MEMÓRIA
  7. 7. Show me your POWERS!
  8. 8. VANTAGENS de uma PWA INSTALÁVEL (mas ainda compartilhável usando URLs) É possível utilizar PUSH NOTIFICATIONS Pode funcionar OFFLINE e conexões lentas CARREGAMENTO INSTANTÂNEO e com splash screen (apps nativas) Excelente RENDERIZAÇÃO e ANIMAÇÕES SUAVES com 60fps Ainda funciona como uma web app normal, acessível pelo BROWSER SEGURANÇA, pois service workers requerem tráfego usando HTTPS
  9. 9. DESVANTAGENS de uma PWA Ainda é algo muito RECENTE Não é possível usar todas as FUNCIONALIDADES NATIVAS do device (https://whatwebcando.today) COMPATIBILIDADE dos navegadores Requer um nível mais alto de EXPERIÊNCIA dos desenvolvedores para gerar algo de ALTA QUALIDADE
  10. 10. QUEM veio para a festa?
  11. 11. APPLE não quer dançar a música que está tocando
  12. 12. INGREDIENTES de uma PWA 1. APPLICATION SHELL 3. SERVICE WORKERS 2. WEB APP MANIFEST
  13. 13. 1. Application Shell
  14. 14. Application Shell No MODELO PADRÃO, toda a página, inclusive o conteúdo é gerada no servidor antes de ser entregue para o browser. PWAs separam as partes que são ALTERADAS COM FREQUÊNCIA, que são essencialmente o conteúdo, das partes que não sofrem tantas mudanças
  15. 15. APPLICATION SHELL representa o MÍNIMO de HTML, CSS e JS requerido para fornecer a INTERFACE para a PWA garantindo uma boa performance. Primeiro carregamento é EXTREMAMENTE RÁPIDO e vai imediatamente para o CACHE Nas requisições sequentes a PWA não precisa carregar tudo novamente, apenas os dados necessários Application Shell
  16. 16. O QUE deve estar no meu Application Shell? O que precisa estar na PRIMEIRA TELA imediatamente? Quais componentes da INTERFACE são essenciais para o aplicativo? Quais os assets necessários (javascripts, styles, imagens etc)
  17. 17. 2. Web App Manifest
  18. 18. Web App Manifest Arquivo de configuração JSON DEFINE nome, ícones, splash screen, theme color, modo full screen, orientação da tela App ISOLADA no gerenciador de tarefas como qualquer outro aplicativo
  19. 19. EXEMPLO Web App Manifest
  20. 20. Web App Manifest VALIDATOR
  21. 21. Web App INSTALL BANNER Funcionalidade somente do CHROME BANNER sugerindo ao usuário instalar seu aplicativo na home screen REQUISITOS: service workers, web app manifest, engajamento do usuário EVENTOS: antes de exibir o banner, após instalar o app etc. Existem opções no dev tools para testar esses eventos
  22. 22. 3. Service Workers
  23. 23. Service Workers É um arquivo JAVASCRIPT que roda em BACKGROUND, separado da sua página, que não precisa estar aberta Como um PROXY que fica entre o browser e o servidor interceptando as requisições e decidindo como agir Fornece PODERES para PWAs existirem ALÉM do browser
  24. 24. Service Workers Pode definir quais EVENTOS que irão despertar o service worker (push notifications, sincronização quando conexão for restaurada etc) Por interceptar as requisições necessita HTTPS (exceto desenvolvimento), oferecendo SEGURANÇA Ao interceptar requisições, pode fazer CACHE dos recursos e usá-los como resposta em requisições subsequentes, respondendo instantaneamente e offline
  25. 25. REGISTRANDO Service Worker
  26. 26. REGISTRANDO Service Worker
  27. 27. ESCOPO Service Worker
  28. 28. INSTALANDO Service Worker
  29. 29. INTERCEPTANDO REQUISIÇÕES Service Worker
  30. 30. DICAS Service Workers Utilize o MODO ANÔNIMO para se certificar que os service workers e qualquer coisa que esteja em cache irão expirar chrome://serviceworker-internals - service workers instalados e seus estados. Você pode atualizá-los ou removê-los
  31. 31. DICAS Service Workers ATENÇÃO: Várias abas abertas compartilham o mesmo service worker. Ao atualizar o service worker a versão mais recente fica inativa até que todas as abas sejam fechadas ao se fechar a janela
  32. 32. DICAS Service Workers Use a guia Resources do Chrome Dev Tools para checar o que está acontecendo com service workers, cache, armazenamento etc
  33. 33. COMPATIBILIDADE Service Workers
  34. 34. FÁCIL de usar e baseado em chave-valor ARMAZENAMENTO Local Storage Pode armazenar APENAS STRINGS SÍNCRONO DISPONÍVEL em quase todos os navegadores NÃO é transacional Deve ser EVITADO!
  35. 35. ARMAZENAMENTO Caches Object FÁCIL de usar ASSÍNCRONO Muito RÁPIDO NÃO é transacional RECENTE e possui compatibilidade muito baixa
  36. 36. ARMAZENAMENTO IndexedDB RÁPIDO Permite armazenas DADOS COMPLEXOS ASSÍNCRONO TRANSACIONAL Alta COMPATIBILIDADE
  37. 37. ARMAZENAMENTO IndexedDB DIFICULDADE de uso da API, que exige várias configurações e manuseio de callbacks Biblioteca FACILITAM O USO: 1 - localForage - publicado pela Mozilla, fornece uma API parecida com Local Storage 2 - LoveField - fornece uma API parecida com SQL Opção mais INDICADA
  38. 38. EXEMPLOS de PWAs FLIPBOARD - Aplicativo agregador no formato de revistas traduzidos em mais de 20 idiomas Usuários ativos por mês cresceram 75%. Na web usuários podem chegar até um site através de um simples click FLIPKART - Mais popuplar ecommerce Indiano 63% dos usuários com internet 2G. Adicionaram service workers e simplificaram o site, facilitando a busca dos produtos e usando 3x menos dados do usuário. Navegação e visualização dos produtos offline resultaram em aumento de engajamento e vendas
  39. 39. #sóquenão
  40. 40. Referências https://classroom.udacity.com/courses/ud811 https://www.youtube.com/watch?v=sH7dlRnuh- k&feature=youtu.be&a= http://hipsters.tech/progressive-web-apps-hipsters-03 https://www.smashingmagazine.com/2016/08/a-beginners- guide-to-progressive-web-apps/
  41. 41. OBRIGADO!

×