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

Progressive Web Apps - Service workers e o DSW

Progressive Web Apps - Service workers e o DSW

Palestra apresentada no DevFestBH em 2016.
Nesta palestra, aprofundei bastante no uso dos Service Workers e na criação de Progressive Web Apps.
Apresentei também, as vantagens de usar o DSW, projeto open source no npm desenvolvido por brasileiros para facilitar o uso de Service Workers.

929ed9958756c5c829a9eed068910646?s=128

Felipe Nascimento de Moura

November 05, 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. Special powers - Gerenciar redirecionamentos @felipenmoura

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

  10. @felipenmoura

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

    de cache @felipenmoura
  12. @felipenmoura

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

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

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

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

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

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

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

    offline, ou quando a internet está intermitente @felipenmoura
  20. 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
  21. 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
  22. APP

  23. PROGRESSIVE WEB APP

  24. Internet No Brasil

  25. None
  26. Internet no Brasil

  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. @felipenmoura

  34. Necessidades básicas @felipenmoura

  35. Let's CODE!

  36. But first… The theory

  37. None
  38. Teoria "A teoria é a diferença entre saber, e SABER"

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

    -- by Felipe N. Moura @felipenmoura
  40. 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
  41. Lifecycle

  42. Service Worker lifecycle

  43. None
  44. None
  45. None
  46. Let's CODE!

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

  48. HTML (index.html) @felipenmoura

  49. HTML (index.html) DONE

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

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

  52. @felipenmoura

  53. sw.js @felipenmoura

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

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

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

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

  58. Cool, or what?!

  59. Hora de mergulhar fundo!

  60. Cache @felipenmoura

  61. Cache @felipenmoura

  62. Application Shell @felipenmoura

  63. Fetch from Cache @felipenmoura

  64. Fetch from Cache @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. IndexedDB

  71. 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
  72. ImportScripts

  73. Importing Scripts @felipenmoura

  74. MANIFEST

  75. index.html @felipenmoura

  76. webapp-manifest.json @felipenmoura

  77. @felipenmoura

  78. @felipenmoura

  79. Web Notification

  80. Web Notification @felipenmoura

  81. Web Notification @felipenmoura

  82. Web Notification

  83. Web Notification webapp-manifest.json @felipenmoura

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

  85. Web Notification sw.js @felipenmoura

  86. Hard times! @felipenmoura

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

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

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

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

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

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

    Use o lighthouse
  93. TOOLS

  94. None
  95. Meet DSW $ npm install -g dsw

  96. DSW - import and .setup

  97. dswfile.json

  98. DSW

  99. DSW - Not found HTML

  100. DSW - not found images

  101. DSW - caching images

  102. DSW - Redirecting

  103. DSW - Redirect com variáveis

  104. DSW - caching css and js

  105. DSW - Output String

  106. DSW - IndexedDB

  107. DSW - Push Notifications

  108. DSW - API

  109. DSW - Init

  110. DSW - Debug

  111. DSW - Debug

  112. Outras ferramentas SW-Toolbox

  113. Outras ferramentas SW-Precache

  114. Faça seu usuário pensar:

  115. Que tipo de magia é esta?!

  116. TKS!

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