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

Service Workers a seus serviços

Service Workers a seus serviços

Palestra que apresentei na WebBR, evento da W3C, sobre as tecnologias web open source, Service Workers, Cache Api, Notifications, entre outras.

929ed9958756c5c829a9eed068910646?s=128

Felipe Nascimento de Moura

October 14, 2016
Tweet

Transcript

  1. Por: Felipe N. Moura @felipenmoura

  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. None
  7. Service Workers a seu serviço

  8. Service workers...Why?! - Controle sobre requisições - Controle sobre cache

    - Controle sobre redirecionamentos - Controle sobre páginas inexistentes
  9. More POWER, babe!!!

  10. Special powers - Gerenciar redirecionamentos

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

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

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

    de cache - Controle de versão
  17. None
  18. EVOLUÇÃO 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. What for? - Suporte em diferentes plataformas

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

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

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

    offline, ou quando a internet está intermitente - Pode tornar-se "Instalável" no dispositivo do usuário - Muito mais performático
  25. INTERNET NO BRASIL

  26. None
  27. Internet no Brasil

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. Necessidades básicas

  36. _Oi...qual a senha da wifi?

  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. Let's CODE!

  40. But first… The theory

  41. None
  42. Teoria "A teoria é a diferença entre saber, e SABER"

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

    -- by Felipe N. Moura
  44. 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
  45. Lifecycle

  46. Service Worker lifecycle

  47. None
  48. None
  49. None
  50. Let's CODE!

  51. Let's CODE! For real, this time!

  52. HTML (index.html)

  53. HTML (index.html) DONE

  54. Browsers que não suportam Service Worker, nem saberão o que

    estão perdendo!
  55. sw.js

  56. None
  57. sw.js

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

    respondWith.
  59. sw.js - redirects

  60. sw.js - redirects (404)

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

  62. Cool, or what?!

  63. Hora de mergulhar fundo!

  64. Cache

  65. Cache

  66. Application Shell

  67. Fetch from Cache

  68. Fetch from Cache

  69. Fetch from Cache

  70. Fetch from Cache

  71. Fetch from Cache

  72. Fetch from Cache

  73. Fetch from Cache

  74. IndexedDB

  75. 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
  76. ImportScripts

  77. Importing Scripts

  78. Web Notification

  79. Web Notification

  80. Web Notification

  81. Web Notification

  82. Web Notification (webapp-manifest.json)

  83. Web Notification (Index.html)

  84. Web Notification (sw.js)

  85. Hard times!

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

    quando o console está aberto)
  87. Hard times! - Desligue o cache (no console do browser)

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

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

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

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

    Use o lighthouse
  92. None
  93. Meet DSW The Dynamic Service Worker

  94. Meet DSW $ npm install -g dsw

  95. DSW - import and .setup

  96. dswfile.json

  97. DSW

  98. DSW - Not found HTML

  99. DSW - not found images

  100. DSW - caching images

  101. DSW - Redirecting

  102. DSW - Redirect com variáveis

  103. DSW - caching css and js

  104. DSW - Output String

  105. DSW - IndexedDB

  106. DSW - Push Notifications

  107. DSW - API

  108. DSW - Init

  109. DSW - Debug

  110. DSW - Debug

  111. Outras ferramentas SW-Toolbox

  112. Outras ferramentas SW-Precache

  113. Faça seu usuário pensar:

  114. Que tipo de magia é esta?!

  115. TKS!

  116. None
  117. Thank you! @felipeNmoura (github || facebook) / felipenmoura felipenmoura.com