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

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.

More Decks by Felipe Nascimento de Moura

Other Decks in Programming

Transcript

  1. Por: Felipe N. Moura

    View Slide

  2. Google Developer Expert

    View Slide

  3. Google Developer Expert
    Fundador da
    BrazilJS e da Nasc

    View Slide

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

    View Slide

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

    View Slide

  6. Service Workers
    a seu serviço

    View Slide

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

    View Slide

  8. More POWER, babe!!!

    View Slide

  9. Special powers
    - Gerenciar redirecionamentos

    View Slide

  10. View Slide

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

    View Slide

  12. View Slide

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

    View Slide

  14. View Slide

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

    View Slide

  16. View Slide

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

    View Slide

  18. PROGRESSIVA

    View Slide

  19. How?
    - Baseado em tecnologias Web
    - Tecnologias Open source
    - Assíncrono (promises)
    - Seguro (https, e no escopo do service worker)

    View Slide

  20. Evolução do próprio Service Worker
    - Promises
    - Cache API
    - Fetch
    - Web Notifications

    View Slide

  21. WEB

    View Slide

  22. What for?
    - Suporte em diferentes plataformas

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  26. APP

    View Slide

  27. PROGRESSIVE
    WEB
    APP

    View Slide

  28. Internet
    No
    Brasil

    View Slide

  29. View Slide

  30. Internet no Brasil

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. Necessidades básicas

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  41. Let's CODE!

    View Slide

  42. But first…
    The theory

    View Slide

  43. View Slide

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

    View Slide

  45. Teoria
    "A teoria é a diferença entre saber, e SABER"
    -- by Felipe N. Moura

    View Slide

  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

    View Slide

  47. Lifecycle

    View Slide

  48. Service Worker lifecycle

    View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. Let's CODE!

    View Slide

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

    View Slide

  54. HTML (index.html)

    View Slide

  55. HTML (index.html)
    DONE

    View Slide

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

    View Slide

  57. sw.js

    View Slide

  58. View Slide

  59. sw.js

    View Slide

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

    View Slide

  61. Sw.js - redirects

    View Slide

  62. Sw.js - redirects (404)

    View Slide

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

    View Slide

  64. Cool, or what?!

    View Slide

  65. Hora de
    mergulhar fundo!

    View Slide

  66. Cache

    View Slide

  67. Cache

    View Slide

  68. Application Shell

    View Slide

  69. Fetch from Cache

    View Slide

  70. Fetch from Cache

    View Slide

  71. Fetch from Cache

    View Slide

  72. Fetch from Cache

    View Slide

  73. Fetch from Cache

    View Slide

  74. Fetch from Cache

    View Slide

  75. Fetch from Cache

    View Slide

  76. IndexedDB

    View Slide

  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

    View Slide

  78. ImportScripts

    View Slide

  79. Importing Scripts

    View Slide

  80. Web
    Notification

    View Slide

  81. Web Notification

    View Slide

  82. Web Notification

    View Slide

  83. Web Notification

    View Slide

  84. Web Notification
    webapp-manifest.json

    View Slide

  85. Web Notification
    Index.html (page script)

    View Slide

  86. Web Notification
    sw.js

    View Slide

  87. MANIFEST

    View Slide

  88. index.html

    View Slide

  89. webapp-manifest.json

    View Slide

  90. View Slide

  91. View Slide

  92. Hard times!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  96. Hard times!
    - Teste offline

    View Slide

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

    View Slide

  98. Hard times!
    - Teste offline
    - Teste em lie-fi
    - Use o lighthouse

    View Slide

  99. TOOLS

    View Slide

  100. Meet the DSW
    The
    Dynamic
    Service
    Worker

    View Slide

  101. Meet the DSW
    $ npm install -g dsw

    View Slide

  102. DSW - import and call .setup

    View Slide

  103. dswfile.json

    View Slide

  104. DSW

    View Slide

  105. DSW - Not found HTML

    View Slide

  106. DSW - not found images

    View Slide

  107. DSW - caching images

    View Slide

  108. DSW - Redirecting

    View Slide

  109. Redirect com variáveis

    View Slide

  110. DSW - caching css and js

    View Slide

  111. Outras ferramentas
    SW-Toolbox

    View Slide

  112. Outras ferramentas
    SW-Precache

    View Slide

  113. TKS!

    View Slide

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

    View Slide