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. Google Developer Expert Fundador da BrazilJS e da Nasc Cerca

    de 12 anos de desenvolvimento Web Apaixonado por JS!!
  2. Special powers - Gerenciar redirecionamentos - Interceptar requisições - Controle

    de cache - Controle de versão - Evolução progressiva
  3. How? - Baseado em tecnologias Web - Tecnologias Open source

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

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

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

    offline, ou quando a internet está intermitente - Torna-se "Instalável" no dispositivo do usuário
  7. 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
  8. APP

  9. 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
  10. Mas além disto... "Uma PWA é mais do que apenas

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

    uma página com boa performance." -- by Felipe N. Moura
  12. 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
  13. 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
  14. Hard times! - Desligue o cache (no console do browser)

    - Limpe os dados do cache - Visualize todos os Service workers
  15. DSW