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.

Felipe Nascimento de Moura

November 05, 2016
Tweet

More Decks by Felipe Nascimento de Moura

Other Decks in Programming

Transcript

  1. Por: Felipe N. Moura
    @felipenmoura

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

    View full-size slide

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

    View full-size slide

  9. @felipenmoura

    View full-size slide

  10. Special powers
    - Gerenciar redirecionamentos
    - Interceptar requisições
    - Controle de cache
    @felipenmoura

    View full-size slide

  11. @felipenmoura

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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

    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
    - Muito mais performático
    @felipenmoura

    View full-size slide

  19. PROGRESSIVE
    WEB
    APP

    View full-size slide

  20. Internet
    No
    Brasil

    View full-size slide

  21. Internet no Brasil

    View full-size slide

  22. @felipenmoura

    View full-size slide

  23. Necessidades básicas
    @felipenmoura

    View full-size slide

  24. But first…
    The theory

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 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

    View full-size slide

  28. Service Worker lifecycle

    View full-size slide

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

    View full-size slide

  30. HTML (index.html)
    @felipenmoura

    View full-size slide

  31. HTML (index.html)
    DONE

    View full-size slide

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

    View full-size slide

  33. sw.js
    @felipenmoura

    View full-size slide

  34. @felipenmoura

    View full-size slide

  35. sw.js
    @felipenmoura

    View full-size slide

  36. sw.js
    * Deve retornar um objeto Response para o método respondWith.
    @felipenmoura

    View full-size slide

  37. Sw.js - Redirecting
    @felipenmoura

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Cool, or what?!

    View full-size slide

  41. Hora de
    mergulhar fundo!

    View full-size slide

  42. Cache
    @felipenmoura

    View full-size slide

  43. Cache
    @felipenmoura

    View full-size slide

  44. Application Shell
    @felipenmoura

    View full-size slide

  45. Fetch from Cache
    @felipenmoura

    View full-size slide

  46. Fetch from Cache
    @felipenmoura

    View full-size slide

  47. Fetch from Cache
    @felipenmoura

    View full-size slide

  48. Fetch from Cache
    @felipenmoura

    View full-size slide

  49. Fetch from Cache
    @felipenmoura

    View full-size slide

  50. Fetch from Cache
    @felipenmoura

    View full-size slide

  51. Fetch from Cache
    @felipenmoura

    View full-size slide

  52. 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

    View full-size slide

  53. ImportScripts

    View full-size slide

  54. Importing Scripts
    @felipenmoura

    View full-size slide

  55. index.html
    @felipenmoura

    View full-size slide

  56. webapp-manifest.json
    @felipenmoura

    View full-size slide

  57. @felipenmoura

    View full-size slide

  58. @felipenmoura

    View full-size slide

  59. Web
    Notification

    View full-size slide

  60. Web Notification
    @felipenmoura

    View full-size slide

  61. Web Notification
    @felipenmoura

    View full-size slide

  62. Web Notification

    View full-size slide

  63. Web Notification
    webapp-manifest.json
    @felipenmoura

    View full-size slide

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

    View full-size slide

  65. Web Notification
    sw.js
    @felipenmoura

    View full-size slide

  66. Hard times!
    @felipenmoura

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. Hard times!
    - Teste offline

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  73. Meet DSW
    $ npm install -g dsw

    View full-size slide

  74. DSW - import and .setup

    View full-size slide

  75. dswfile.json

    View full-size slide

  76. DSW - Not found HTML

    View full-size slide

  77. DSW - not found images

    View full-size slide

  78. DSW - caching images

    View full-size slide

  79. DSW - Redirecting

    View full-size slide

  80. DSW - Redirect com variáveis

    View full-size slide

  81. DSW - caching css and js

    View full-size slide

  82. DSW - Output String

    View full-size slide

  83. DSW - IndexedDB

    View full-size slide

  84. DSW - Push Notifications

    View full-size slide

  85. Outras ferramentas
    SW-Toolbox

    View full-size slide

  86. Outras ferramentas
    SW-Precache

    View full-size slide

  87. Faça seu usuário
    pensar:

    View full-size slide

  88. Que tipo de magia
    é esta?!

    View full-size slide

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

    View full-size slide