Gabriel Medina
Sou front-end developer. Formado em Tecnologia em Análise e Desenvolvimento de Sistemas, pelo Instituto Federal de Mato Grosso do Sul.
Por Gabriel Medina
Progressive Web Apps
Gabriel Medina
Progressive Web Apps
Quando a World Wide Web surgiu só tinha mato!
Progressive Web Apps
Quem vai arrumar essa bagunça? HTML!
Progressive Web Apps
Linguagens de Script tornaram a Web mais dinâmica!
Progressive Web Apps
A Web começa a ser vista como plataforma!
Progressive Web Apps
Facebook desistiu da Web como plataforma em 2013
Progressive Web Apps
O que é um App?
Progressive Web Apps
Aplicações nativas aproveitam o máximo dos recursos disponíveis
Progressive Web Apps
Antigamente precisavam ser distribuídos em disquetes ou CDs
Progressive Web Apps
Usuários de dispositivos móveis gastam 87% do tempo em aplicações nativas
Progressive Web Apps
Mas 80% desse tempo é investido em apenas 3 apps principais
Progressive Web Apps
Quantos novos apps você instala por mês?
Progressive Web Apps
Quantos novos websites você acessa por dia?
Progressive Web Apps
Ainda temos problemas de distribuição e alcance
Abrindo a App Store ~ 300ms
Procurar App ~ 500ms
Aceitar permissões ~ 500ms
Download e instalação ~ 2s
Abrir e começar a usar ~ 200ms
Progressive Web Apps
Cada passo entre o usuário e sua aplicação custa ~20% de perda
Progressive Web Apps
Sua WebApp pode estar a apenas um link de distância
Progressive Web Apps
Uma WebApp bem otimizada pode iniciar em segundos mesmo nas piores conexões!
Progressive Web Apps
Uma WebApp com conteúdo relevante pode ser achada ao acaso
Progressive Web Apps
Uma WebApp tem atualização automática
Progressive Web Apps
A Web tem o melhor modelo de distribuição de software já criado!
Progressive Web Apps
Mas afinal, o que torna uma WebApp Progressiva?
Progressive Web Apps
Segundo a Google, uma PWA precisa ser:
Progressive Web Apps
Confiável
Deve carregar instantaneamente e nunca mostre o famoso dinossauro, mesmo em condições de rede ruins.
Progressive Web Apps
Rápida
Responda rapidamente às interações do usuário com animações suaves, sem travamento durante o scroll.
Progressive Web Apps
Engajável
Deve trazer características de um aplicativo nativo, com uma experiência de usuário imersiva.
Progressive Web Apps
Tá, mas o que é uma PWA?
Work Offline
Better User Experience
Native Recourse
Installation Homescreen
Mas os navegadores suportam isso? SIM!
Progressive Web Apps
Progressive Web Apps
Mas porque eu deveria construir uma PWA?
Progressive Web Apps
Progressive WebApp são mais rápidas!
Aumento nas conversões
Aumentar o engajamento
Alta disponibilidade
Progressive Web Apps
Certo, mas que ferramentas são essas?
Google checklist:
Progressive Web Apps
Use HTTPS
Progressive Web Apps
Responsive design
Progressive Web Apps
Trabalhe offline
Progressive Web Apps
Service Workers
É um script que o navegador executa em segundo plano que disponibiliza funcionalidades normalmente encontradas em aplicativos nativos
Progressive Web Apps
Service Workers
Experiências off-line avançadas
Sincronizações em segundo plano
Notificações push
Progressive Web Apps
Experiencia de usuário imersiva!
Progressive Web Apps
Manifest.json
Fornecem a capacidade de salvar uma WebApp marcada como favorita na homescreen de um dispositivo.
Progressive Web Apps
Manifest.json
// manifest.json
{
"name": "Minha Progressive Web App",
"short_name": "Minha PWA",
"description": "Esta é minha primeira Progressive Web App",
"display": "fullscreen",
"background_color": "black",
"icons": [{
"src": "images/icon.png",
"sizes": "192x192"
}]
}// index.html
<link rel="manifest" href="/manifest.json">
Progressive Web Apps
Lighthouse
Progressive Web Apps
A Web é a nova plataforma Nativa!
Progressive Web Apps
Obrigado!
Progressive Web Apps
Referências
https://developers.google.com/web/progressive-web-apps
https://developers.google.com/web/progressive-web-apps/checklist
https://developers.google.com/web/fundamentals/web-app-manifest
https://developers.google.com/web/fundamentals/primers/service-workers/
https://developers.google.com/web/tools/lighthouse
https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask
Progressive Web Apps
By Gabriel Medina
Progressive Web Apps
Evolua sua aplicação web para o próximo nível! Uma breve introdução a Progressive Web Apps (PWA)
