Stewan Pacheco
- +10 anos XP em des. web
- Frontend Engineer na Voxo
- Autor no CodeCanyon
- Ensino Médio Nacional
- Técnico Contec
- Ciência da Computação UVV
“Logic will get you from A to Z; imagination will get you everywhere.”
Progressive Web Apps são experiências que combinam o melhor da web com o melhor das aplicações nativas
É útil para o usuário desde a primeira visita
Não é preciso instalação
Melhora a experiência do usuário "on demand"
Rápido carregamento (mesmo offline)
Ícone na home screen
do aparelho
Experiência fullscreen
Envio de push notifications
Características de um PWA
- Progressivo
- Responsivo
- Independente
- App-like
- Atualizado
- Seguro
- Engajado
- Instalável
- Linkável
Progressivo
Melhora a experiência do usuário gradativamente
Responsivo
Se encaixa em qualquer dispositivo
Independente
Trabalha mesmo offline ou em conexões lentas
App-like
Arquitetura Shell
Atualizado
Service Workers
Seguro
Obrigatório uso de HTTPS
Engajado
Notificações Push
Linkável
www
Instalável
Home Screen
Manifest.json
{
"short_name": "Voice Memos",
"name": "Voice Memos Application",
"icons": [
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html?home=true",
"display": "standalone",
"orientation": "landscape"
}
<head>
<meta charset="utf-8">
<title>Progressive Web Application</title>
<link rel="manifest" href="./manifest.json">
</head>
Cases
- 2x mais page views
- 74% aumento no tempo gasto
- 82% aumento na conversão para iOS
Suporte
Demonstração
https://demopwa.in/
Fontes
- Documentação PWA
https://developers.google.com/web/progressive-web-apps/
- Github
Obrigado ;)
https://stewan.io
PWA - Progressive Web Apps
By Stewan Pacheco
PWA - Progressive Web Apps
Apresentação da palestra sobre PWA que apresentei na UVV em 2016
- 2,033