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

Implementando PWA em qualquer projeto

Avatar for Rogério Chaves Rogério Chaves
July 27, 2017
Programming
2
190

Implementando PWA em qualquer projeto

ou: removendo a mágica de progressive web apps
Avatar for Rogério Chaves

Rogério Chaves

July 27, 2017
Tweet

More Decks by Rogério Chaves

See All by Rogério Chaves
O problema das Fake News
Avatar for Rogério Chaves rogeriochaves
1
160
A Brief History of Frontend
Avatar for Rogério Chaves rogeriochaves
1
32
Microfrontends
Avatar for Rogério Chaves rogeriochaves
2
130
Introducción a Elm
Avatar for Rogério Chaves rogeriochaves
0
68
Immutable App Architecture
Avatar for Rogério Chaves rogeriochaves
0
200
Faça programação funcional com JavaScript codando menos
Avatar for Rogério Chaves rogeriochaves
4
450
Introduction to Elm
Avatar for Rogério Chaves rogeriochaves
2
130
Single State Atom apps
Avatar for Rogério Chaves rogeriochaves
1
180
Playing with RxJS
Avatar for Rogério Chaves rogeriochaves
0
96

Other Decks in Programming

See All in Programming
In geheimer Mission: AI Agents entwickeln
Avatar for Jörg Neumann joergneumann
0
120
LRパーサーはいいぞ
Avatar for ydah ydah
7
1.5k
「理解」を重視したAI活用開発
Avatar for FastDOCTOR fast_doctor
0
320
ruby.wasmとWebSocketで遊ぼう！
Avatar for lni_T lnit
0
110
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
Avatar for hachi (Hayao Kimura) hayaokimura
5
1.2k
Browser and UI #2 HTML/ARIA
Avatar for ken7253 ken7253
2
190
CRUD から CQRS へ ～ 分離が可能にする柔軟性
Avatar for Takashi Kawae tkawae
0
160
生成AI時代のフルスタック開発
Avatar for Kenn Ejima kenn
8
1k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
Avatar for ALGO ARTIS algoartis
0
250
バイラテラルアップサンプリング
Avatar for Fadis fadis
3
630
20250426 GDGoC 合同新歓 - GDGoC のススメ
Avatar for Yoshimura Naoya getty708
0
120
“技術カンファレンスで何か変わる？” ──RubyKaigi後の自分とチームを振り返る
Avatar for shun ssagara00
0
160

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.7k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
298
20k
Building an army of robots
Avatar for Kyle Neath kneath
305
45k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k

Transcript

  1. IMPLEMENTANDO PWA EM QUALQUER PROJETO ou: removendo a mágica de

    progressive web apps

  2. O QUE SÃO PROGRESSIVE WEB APPS? 2

  3. EM RESUMO •Habilidade de instalar como um app nativo no

    android e chrome desktop •Splash screen, ícones, etc •Server-Side Rendering •Funciona Offline •HTML e CSS carregam mesmo se o javascript estiver quebrado •Foco em acessibilidade •É performático •Usa HTTPs 3

  4. 4 Como saber se estou no caminho correto? Lighthouse

  5. LIGHTHOUSE 5

  6. BREAKING NEWS! AGORA INTEGRADO COM CHROME! 6

  7. PWA CHECKLIST 7

  8. INSTALAÇÃO NATIVA 8

  9. ICONS & MANIFEST 9 realfavicongenerator.net Faz tudo pra você!

  10. MANIFEST.JSON 10

  11. ÍCONES 11

  12. SPLASH SCREEN 12

  13. FERRAMENTAS DO CHROME 13

  14. APP INSTALADO 14

  15. SERVER-SIDE RENDERING 15

  16. O QUE É SERVER SIDE RENDERING 16 Basicamente diminuir o

    tempo em tela branca

  17. CLIENT SIDE RENDERING VS SERVER SIDE RENDERING 17 Carregando HTML

    Carregando JS Render + Interativo Carregando HTML Interativo Render + Carregando JS

  18. UNCANNY VALLEY 18

  19. UNCANNY VALLEY 19

  20. COMO IMPLEMENTAR 20 elm-static-html react prerender.io

  21. PRERENDER.IO 21 •Solução fácil e genérica

  22. MODO OFFLINE 22

  23. SW-PRECACHE 23

  24. SERVICE WORKERS 24

  25. GUARDAR DADOS OFFLINE 25

  26. HTTPS 26

  27. HTTPS FÁCIL 27

  28. HTTP É PASSADO 28

  29. ACCESSIBILITY 29

  30. CÓDIGO - LIGHTHOUSE 30

  31. CORES - MATERIAL COLOR TOOL 31 https://material.io/color/

  32. AWESOME ACCESSIBILITY https://github.com/brunopulis/awesome-a11y 32

  33. 33 DEMO https://github.com/rogeriochaves/elm-todomvc-pwa

  34. OBRIGADO! twitter.com/_rchaves_