PWAs - Mais que apps, Progressive Web Apps

PWAs - Mais que apps, Progressive Web Apps

Minha palestra em português sobre PWAs (Progressive Web Apps) focada em Service Workers, abordando Cache API, IndexedDB, Web Notifications, entre outras tecnologias.

Transcript

  1. Por: Felipe N. Moura

  2. Google Developer Expert

  3. Google Developer Expert Fundador da BrazilJS e da Nasc

  4. Google Developer Expert Fundador da BrazilJS e da Nasc Cerca

    de 12 anos de desenvolvimento Web
  5. Google Developer Expert Fundador da BrazilJS e da Nasc Cerca

    de 12 anos de desenvolvimento Web Apaixonado por JS!!
  6. Service Workers a seu serviço

  7. Service workers...Why?! - Controle sobre requisiçõs - Controle sobre cache

    - Controle sobre redirecionamentos
  8. More POWER, babe!!!

  9. Special powers - Gerenciar redirecionamentos

  10. None
  11. Special powers - Gerenciar redirecionamentos - Interceptar requisições

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

    de cache
  14. None
  15. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle

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

    de cache - Controle de versão - Evolução progressiva
  18. PROGRESSIVA

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

    - Assíncrono (promises) - Seguro (https, e no escopo do service worker)
  20. Evolução do próprio Service Worker - Promises - Cache API

    - Fetch - Web Notifications
  21. WEB

  22. What for? - Suporte em diferentes plataformas

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

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

    offline, ou quando a internet está intermitente - Torna-se "Instalável" no dispositivo do usuário
  25. 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
  26. APP

  27. PROGRESSIVE WEB APP

  28. Internet No Brasil

  29. None
  30. Internet no Brasil

  31. None
  32. None
  33. None
  34. None
  35. None
  36. Necessidades básicas

  37. O celular, é apenas mais uma vítma

  38. O culpado é o desenvolvedor que... - Não minifica scripts

    e estilos - Não otimiza imagens - Tem mais banners que conteúdo - Tem o DOM bagunçado - Páginas não responsivas
  39. Mas além disto... "Uma PWA é mais do que apenas

    uma página com boa performance."
  40. Mas além disto... "Uma PWA é mais do que apenas

    uma página com boa performance." -- by Felipe N. Moura
  41. Let's CODE!

  42. But first… The theory

  43. None
  44. Teoria "A teoria é a diferença entre saber, e SABER"

  45. Teoria "A teoria é a diferença entre saber, e SABER"

    -- by Felipe N. Moura
  46. 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
  47. Lifecycle

  48. Service Worker lifecycle

  49. None
  50. None
  51. None
  52. Let's CODE!

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

  54. HTML (index.html)

  55. HTML (index.html) DONE

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

    estão perdendo!
  57. sw.js

  58. None
  59. sw.js

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

    respondWith.
  61. Sw.js - redirects

  62. Sw.js - redirects (404)

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

  64. Cool, or what?!

  65. Hora de mergulhar fundo!

  66. Cache

  67. Cache

  68. Application Shell

  69. Fetch from Cache

  70. Fetch from Cache

  71. Fetch from Cache

  72. Fetch from Cache

  73. Fetch from Cache

  74. Fetch from Cache

  75. Fetch from Cache

  76. IndexedDB

  77. 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
  78. ImportScripts

  79. Importing Scripts

  80. Web Notification

  81. Web Notification

  82. Web Notification

  83. Web Notification

  84. Web Notification webapp-manifest.json

  85. Web Notification Index.html (page script)

  86. Web Notification sw.js

  87. MANIFEST

  88. index.html

  89. webapp-manifest.json

  90. None
  91. None
  92. Hard times!

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

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

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

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

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

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

    Use o lighthouse
  99. TOOLS

  100. Meet the DSW The Dynamic Service Worker

  101. Meet the DSW $ npm install -g dsw

  102. DSW - import and call .setup

  103. dswfile.json

  104. DSW

  105. DSW - Not found HTML

  106. DSW - not found images

  107. DSW - caching images

  108. DSW - Redirecting

  109. Redirect com variáveis

  110. DSW - caching css and js

  111. Outras ferramentas SW-Toolbox

  112. Outras ferramentas SW-Precache

  113. TKS!

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