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

PWA - Progressive Web Apps

By Stewan Pacheco

Made with Slides.com

PWA - Progressive Web Apps

Apresentação da palestra sobre PWA que apresentei na UVV em 2016

  • 2,211

More from Stewan Pacheco