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
170
A Brief History of Frontend
Avatar for Rogério Chaves rogeriochaves
1
40
Microfrontends
Avatar for Rogério Chaves rogeriochaves
2
140
Introducción a Elm
Avatar for Rogério Chaves rogeriochaves
0
70
Immutable App Architecture
Avatar for Rogério Chaves rogeriochaves
0
210
Faça programação funcional com JavaScript codando menos
Avatar for Rogério Chaves rogeriochaves
4
460
Introduction to Elm
Avatar for Rogério Chaves rogeriochaves
2
140
Single State Atom apps
Avatar for Rogério Chaves rogeriochaves
1
180
Playing with RxJS
Avatar for Rogério Chaves rogeriochaves
0
97

Other Decks in Programming

See All in Programming
Gemini CLIの"強み"を知る！ Gemini CLIとClaude Codeを比較してみた！
Avatar for Kota Hisafuru kotahisafuru
3
960
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
Avatar for Date Huang tjjh89017
0
280
DynamoDBは怖くない！〜テーブル設計の勘所とテスト戦略〜
Avatar for hiroto_0411 hyamazaki
0
190
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
Avatar for shunghsiyu shunghsiyu
0
340
なぜあなたのオブザーバビリティ導入は頓挫するのか
Avatar for ryotaro kobayashi ryota_hnk
5
580
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
Avatar for Masahiko Sakakibara rdlabo
0
470
Vibe coding コードレビュー
Avatar for kinopee kinopeee
0
420
PHPカンファレンス関西2025　基調講演
Avatar for SUGIMOTO Kei sugimotokei
6
1.1k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
Avatar for panda_program panda_program
3
720
実践！App Intents対応
Avatar for 野瀬田　裕樹 yuukiw00w
1
220
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
Avatar for r-kagaya rkaga
7
1.8k
Strands Agents で実現する名刺解析アーキテクチャ
Avatar for omiya omiya0555
1
110

Featured

See All Featured
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.5k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
760
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k

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_