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

- Google

Obrigado ;)

https://stewan.io