mundo real progressive web apps no · 2019-11-29 · progressive web apps no mundo real...
TRANSCRIPT
![Page 1: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/1.jpg)
Progressive Web Apps no mundo real@PatrickPorto
![Page 2: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/2.jpg)
Sobre mim
Software Enginner na Globo.com
Plataforma de Publicação
Bacharel em Ciência da Computação
@patrickporto @patrickporto
![Page 3: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/3.jpg)
glo.bo/talentos
![Page 4: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/4.jpg)
O que é a plataforma de publicação?
![Page 5: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/5.jpg)
![Page 6: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/6.jpg)
Usuários da Plataforma de Publicação
![Page 7: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/7.jpg)
2000
Vignette CMSProprietário
![Page 8: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/8.jpg)
2008
GloboCoreDjango
![Page 9: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/9.jpg)
2014
BackstageMicroserviços
![Page 10: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/10.jpg)
Backstage Admin
![Page 11: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/11.jpg)
Tecnologias no Backstage Admin
![Page 12: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/12.jpg)
CMA As A Service na Globo.com
Backstage Admin Backstage Provision
https://globo.com/wp-admin/<component-slug>/<sub-route>
GET
multi-content-app.js
![Page 13: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/13.jpg)
26kUsuário ativos no Backstage Admin
![Page 14: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/14.jpg)
139Content Manager Application (CMA) no Backstage Admin
![Page 15: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/15.jpg)
Como fazer um app mobile?
![Page 16: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/16.jpg)
Como manter um app mobile?
![Page 17: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/17.jpg)
Backstage Admin + PWA
![Page 18: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/18.jpg)
Confiável
Otimização da experiência dos editores em redes móveis
![Page 19: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/19.jpg)
Rápido
Ofertar a sensação de fluidez para publicações rápidas de conteúdo
![Page 20: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/20.jpg)
Envolvente
CMA instalável e executando em tela cheia, sem precisar de uma loja de
aplicativos
![Page 21: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/21.jpg)
Web App Manifest
![Page 22: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/22.jpg)
Web App Manifest - iOS
![Page 23: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/23.jpg)
Atenção com as viewports
100vw 100vw
100vh
100vh
![Page 24: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/24.jpg)
Recurso Estratégia
JS, CSS e fontes StaleWhileRevalidate
apps StaleWhileRevalidate
apis NetworkFirst
authentication NetworkFirst
authorization NetworkFirst
![Page 25: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/25.jpg)
PWA Checklist - Básico
O site é servido em HTTPS
As páginas são responsivas em tablets e dispositivos móveis
Todos os URLs de aplicativos carregam enquanto estão offline
Metadados providenciados para Add to Home screen
O carregamento da página é rápido o suficiente em redes móveis
O site funciona em vários navegadores
As transições de página não parecem estar bloqueadas na rede
Cada página tem um URL
![Page 26: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/26.jpg)
PWA Checklist - Adicional
Indexável e Social
Experiência do Usuário
Performance
Caching
Push notifications
![Page 27: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/27.jpg)
De usuários nos dispositivos móveiscomparado ao ano anterior
+54%
![Page 28: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/28.jpg)
![Page 29: mundo real Progressive Web Apps no · 2019-11-29 · Progressive Web Apps no mundo real @PatrickPorto. Sobre mim Software Enginner na Globo.com ... Web App Manifest - iOS. Atenção](https://reader034.vdocuments.pub/reader034/viewer/2022042219/5ec5576d13b08355f20a9edb/html5/thumbnails/29.jpg)