Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWAs - Progressive Web Apps - DevFest Cerrado

PWAs - Progressive Web Apps - DevFest Cerrado

Palestra apresentada durante o DevFest Cerrado, falando sobre Progressive Web Apps (ou PWAs) abordando bastante o funcionamento de Service Workers, do manifest e da CacheAPI.

929ed9958756c5c829a9eed068910646?s=128

Felipe Nascimento de Moura

September 30, 2017
Tweet

Transcript

  1. Por: Felipe N. Moura @felipenmoura

  2. Google Developer Expert Co-Fundador da BrazilJS e da Nasc Cerca

    de 12 anos de desenvolvimento Web Apaixonado por JS!!
  3. None
  4. None
  5. None
  6. Compostas por 3 tecnologias - APIs abertas da Web -

    Service Workers - Manifest
  7. Service Workers a seu serviço

  8. Special powers - Gerenciar redirecionamentos @felipenmoura

  9. None
  10. Special powers - Gerenciar redirecionamentos - Interceptar requisições @felipenmoura

  11. @felipenmoura

  12. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle

    de cache @felipenmoura
  13. @felipenmoura

  14. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle

    de cache - Controle de versão @felipenmoura
  15. None
  16. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle

    de cache - Controle de versão - Evolução progressiva @felipenmoura
  17. PROGRESSIVA

  18. How? - Baseado em tecnologias Web - Tecnologias Open source

    - Assíncrono (promises) - Seguro (https, e no escopo do service worker) @felipenmoura
  19. WEB

  20. What for? - Suporte em diferentes plataformas @felipenmoura

  21. What for? - Suporte em diferentes plataformas - Funciona mesmo

    offline, ou quando a internet está intermitente @felipenmoura
  22. What for? - Suporte em diferentes plataformas - Funciona mesmo

    offline, ou quando a internet está intermitente - Torna-se "Instalável" no dispositivo do usuário @felipenmoura
  23. What for? - Suporte em diferentes plataformas - Funciona mesmo

    offline, ou quando a internet está intermitente - Torna-se "Instalável" no dispositivo do usuário - Muito mais performático @felipenmoura
  24. APP

  25. PROGRESSIVE WEB APP

  26. Internet No Brasil

  27. None
  28. Internet no Brasil

  29. None
  30. Por: Felipe N. Moura @felipenmoura

  31. None
  32. None
  33. None
  34. None
  35. @felipenmoura

  36. Necessidades básicas @felipenmoura

  37. Let's CODE!

  38. But first… The theory

  39. None
  40. Teoria "A teoria é a diferença entre saber, e SABER"

    @felipenmoura
  41. Teoria "A teoria é a diferença entre saber, e SABER"

    -- by Felipe N. Moura @felipenmoura
  42. Service workers - Rodam em escopo próprio - Uma vez

    registrados, rodam em "background" - Exigem HTTPS (ou localhost) - Somente podem interceptar requests no próprio escopo @felipenmoura
  43. Lifecycle

  44. Service Worker lifecycle

  45. None
  46. None
  47. None
  48. Let's CODE!

  49. Let's CODE! Now, for real!

  50. HTML (index.html) @felipenmoura

  51. HTML (index.html) DONE

  52. Browser que não suportam Service Worker, nem saberão o que

    estão perdendo!
  53. sw.js @felipenmoura

  54. @felipenmoura

  55. sw.js @felipenmoura

  56. sw.js * Deve retornar um objeto Response para o método

    respondWith. @felipenmoura
  57. Sw.js - Redirecting @felipenmoura

  58. Sw.js - redirects (404) @felipenmoura

  59. - Redirecionamento via JavaScript - 404 customizado, via JavaScript

  60. Cool, or what?!

  61. Hora de mergulhar fundo!

  62. Cache @felipenmoura

  63. Cache @felipenmoura

  64. Application Shell @felipenmoura

  65. Fetch from Cache @felipenmoura

  66. Fetch from Cache @felipenmoura

  67. Fetch from Cache @felipenmoura

  68. Fetch from Cache @felipenmoura

  69. Fetch from Cache @felipenmoura

  70. Fetch from Cache @felipenmoura

  71. Fetch from Cache @felipenmoura

  72. IndexedDB

  73. SW tem acesso ao IndexedDB - Pode ser usado para

    armazenar o resultado de requisições a JSONs - Assíncrono (apesar da sintaxe "feia") - Permite filtragem, pesquisa e atualizações @felipenmoura
  74. ImportScripts

  75. Importing Scripts @felipenmoura

  76. MANIFEST

  77. index.html @felipenmoura

  78. webapp-manifest.json @felipenmoura

  79. @felipenmoura

  80. @felipenmoura

  81. Web Notification

  82. Web Notification @felipenmoura

  83. Web Notification @felipenmoura

  84. Web Notification

  85. Web Notification webapp-manifest.json @felipenmoura

  86. Web Notification Index.html (page script) @felipenmoura

  87. Web Notification sw.js @felipenmoura

  88. Hard times! @felipenmoura

  89. Hard times! - Desligue o cache (no console do browser)

  90. Hard times! - Desligue o cache (no console do browser)

    - Limpe os dados do cache
  91. Hard times! - Desligue o cache (no console do browser)

    - Limpe os dados do cache - Visualize todos os Service workers
  92. Hard times! - Teste offline

  93. Hard times! - Teste offline - Teste em lie-fi

  94. Hard times! - Teste offline - Teste em lie-fi -

    Use o lighthouse
  95. TOOLS

  96. None
  97. Outras ferramentas SW-Toolbox

  98. Outras ferramentas SW-Precache

  99. TKS!

  100. Thank you! @felipeNmoura (github || facebook) / felipenmoura felipenmoura.com