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.

Felipe Nascimento de Moura

October 14, 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. Service workers...Why?!
    - Controle sobre requisições
    - Controle sobre cache
    - Controle sobre redirecionamentos
    - Controle sobre páginas inexistentes

    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. 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
    - Pode tornar-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
    - Pode tornar-se "Instalável" no dispositivo do usuário
    - Muito mais performático

    View full-size slide

  20. INTERNET NO
    BRASIL

    View full-size slide

  21. Internet no Brasil

    View full-size slide

  22. Necessidades básicas

    View full-size slide

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

    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. But first…
    The theory

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

  30. Service Worker lifecycle

    View full-size slide

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

    View full-size slide

  32. HTML (index.html)

    View full-size slide

  33. HTML (index.html)
    DONE

    View full-size slide

  34. Browsers que não suportam Service Worker,
    nem saberão o que estão perdendo!

    View full-size slide

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

    View full-size slide

  36. sw.js - redirects

    View full-size slide

  37. sw.js - redirects (404)

    View full-size slide

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

    View full-size slide

  39. Cool, or what?!

    View full-size slide

  40. Hora de
    mergulhar fundo!

    View full-size slide

  41. Application Shell

    View full-size slide

  42. Fetch from Cache

    View full-size slide

  43. Fetch from Cache

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

  50. ImportScripts

    View full-size slide

  51. Importing Scripts

    View full-size slide

  52. Web
    Notification

    View full-size slide

  53. Web Notification

    View full-size slide

  54. Web Notification

    View full-size slide

  55. Web Notification

    View full-size slide

  56. Web Notification (webapp-manifest.json)

    View full-size slide

  57. Web Notification (Index.html)

    View full-size slide

  58. Web Notification (sw.js)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. Hard times!
    - Teste offline

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. Meet DSW
    The
    Dynamic
    Service
    Worker

    View full-size slide

  66. Meet DSW
    $ npm install -g dsw

    View full-size slide

  67. DSW - import and .setup

    View full-size slide

  68. dswfile.json

    View full-size slide

  69. DSW - Not found HTML

    View full-size slide

  70. DSW - not found images

    View full-size slide

  71. DSW - caching images

    View full-size slide

  72. DSW - Redirecting

    View full-size slide

  73. DSW - Redirect com variáveis

    View full-size slide

  74. DSW - caching css and js

    View full-size slide

  75. DSW - Output String

    View full-size slide

  76. DSW - IndexedDB

    View full-size slide

  77. DSW - Push Notifications

    View full-size slide

  78. Outras ferramentas
    SW-Toolbox

    View full-size slide

  79. Outras ferramentas
    SW-Precache

    View full-size slide

  80. Faça seu usuário
    pensar:

    View full-size slide

  81. Que tipo de magia
    é esta?!

    View full-size slide

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

    View full-size slide