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 full-size slide

  2. Google Developer Expert

    View full-size slide

  3. Google Developer Expert
    Fundador da
    BrazilJS e da Nasc

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Service Workers
    a seu serviço

    View full-size slide

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

    View full-size slide

  8. More POWER, babe!!!

    View full-size slide

  9. Special powers
    - Gerenciar redirecionamentos

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. What for?
    - Suporte em diferentes plataformas

    View full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. PROGRESSIVE
    WEB
    APP

    View full-size slide

  21. Internet
    No
    Brasil

    View full-size slide

  22. Internet no Brasil

    View full-size slide

  23. Necessidades básicas

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  28. But first…
    The theory

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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 full-size slide

  32. Service Worker lifecycle

    View full-size slide

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

    View full-size slide

  34. HTML (index.html)

    View full-size slide

  35. HTML (index.html)
    DONE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Sw.js - redirects

    View full-size slide

  39. Sw.js - redirects (404)

    View full-size slide

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

    View full-size slide

  41. Cool, or what?!

    View full-size slide

  42. Hora de
    mergulhar fundo!

    View full-size slide

  43. Application Shell

    View full-size slide

  44. Fetch from Cache

    View full-size slide

  45. Fetch from Cache

    View full-size slide

  46. Fetch from Cache

    View full-size slide

  47. Fetch from Cache

    View full-size slide

  48. Fetch from Cache

    View full-size slide

  49. Fetch from Cache

    View full-size slide

  50. Fetch from Cache

    View full-size slide

  51. 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 full-size slide

  52. ImportScripts

    View full-size slide

  53. Importing Scripts

    View full-size slide

  54. Web
    Notification

    View full-size slide

  55. Web Notification

    View full-size slide

  56. Web Notification

    View full-size slide

  57. Web Notification

    View full-size slide

  58. Web Notification
    webapp-manifest.json

    View full-size slide

  59. Web Notification
    Index.html (page script)

    View full-size slide

  60. Web Notification
    sw.js

    View full-size slide

  61. webapp-manifest.json

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. Hard times!
    - Teste offline

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. Meet the DSW
    The
    Dynamic
    Service
    Worker

    View full-size slide

  69. Meet the DSW
    $ npm install -g dsw

    View full-size slide

  70. DSW - import and call .setup

    View full-size slide

  71. dswfile.json

    View full-size slide

  72. DSW - Not found HTML

    View full-size slide

  73. DSW - not found images

    View full-size slide

  74. DSW - caching images

    View full-size slide

  75. DSW - Redirecting

    View full-size slide

  76. Redirect com variáveis

    View full-size slide

  77. DSW - caching css and js

    View full-size slide

  78. Outras ferramentas
    SW-Toolbox

    View full-size slide

  79. Outras ferramentas
    SW-Precache

    View full-size slide

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

    View full-size slide