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

872 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
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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!

×