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

Implementando PWA em qualquer projeto

Rogério Chaves
July 27, 2017
Programming
2
180

Implementando PWA em qualquer projeto

ou: removendo a mágica de progressive web apps

Rogério Chaves

July 27, 2017
Tweet

More Decks by Rogério Chaves

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

Other Decks in Programming

See All in Programming
Lambda(Python)の リファクタリングが好きなんです
komakichi
3
220
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
4
1.3k
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
130
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
180
エンジニアが挑む、限界までの越境
nealle
1
290
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
320
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
200
Vibe Coding の話をしよう
schroneko
12
3.1k
Thank you <💅>, What's the Next?
ahoxa
1
560
Make Parsers Compatible Using Automata Learning
makenowjust
2
5.7k
The Implementations of Advanced LR Parser Algorithm
junk0612
1
830
スモールスタートで始めるためのLambda×モノリス（Lambdalith）
akihisaikeda
2
300

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why Our Code Smells
bkeepers
PRO
336
57k
How to Ace a Technical Interview
jacobian
276
23k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
400
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Docker and Python
trallard
44
3.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
Site-Speed That Sticks
csswizardry
5
500

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_