$30 off During Our Annual Pro Sale. View Details »

PWA - Progressive Web Apps

PWA - Progressive Web Apps

Uma introdução aos PWA e seu potencial de mudança de experiencia de usuário.

Vinicius Reis

July 03, 2019
Tweet

More Decks by Vinicius Reis

Other Decks in Programming

Transcript

  1. Progressive Web Apps
    Mudando a forma como nosso usuário
    interage com nossos produtos

    View Slide

  2. Vinicius Reis
    @vinicius73
    @LuizVinicius73
    Gravo aulas sobre Vue.js, JavaScript e Laravel para codecasts.com.br
    Claro Controle @ M4U

    View Slide

  3. O que é PWA?

    View Slide

  4. O que é PWA?
    É um termo guarda-chuva cunhado pelo Google
    para aplicações web que tenham as seguintes
    características.
    - Resiliência ~> Offline First.
    - Rapidez ~> Responde rapidamente ao usuário.
    - Envolvente ~> Transmite uma experiência nativa.
    PWA não é uma tecnologia proprietária ou exclusiva do google.

    View Slide

  5. O que realmente é PWA?
    Uma combinação de tecnologias web,
    que juntas transformam a forma como
    o usuário interage com aplicações web.
    Web App Manifest Service Worker
    Capacidades
    Expandidas
    Integração com o
    Sistema Operacional

    View Slide

  6. O que realmente é PWA?
    Uma combinação de tecnologias web,
    que juntas transformam a forma como
    o usuário interage com aplicações web.
    Web App Manifest Service Worker
    Capacidades
    Expandidas
    Integração com o
    Sistema Operacional

    View Slide

  7. Experiência progressiva.
    De forma geral, os recursos de um PWA
    não impactam a utilização da aplicação
    em plataformas não compatíveis, ou
    que não tenham todos os recursos
    utilizados.
    Todas as features devem ser
    implementadas de forma progressiva e
    incremental.

    View Slide

  8. Compatibilidade
    Todos os navegadores atuais são
    compatíveis com as especificações
    necessárias.
    Isso inclui todos os sistemas
    operacionais onde esses navegadores
    rodam.
    Não há tecnologias proprietárias atreladas ao
    PWA, tudo é aberto e padronizado pelo W3C.
    https://whatwebcando.today/

    View Slide

  9. Recursos e Possibilidades

    View Slide

  10. Pode rodar em qualquer dispositivo Dispositivo e ecossistema específico
    Rápido de abrir e usar Download & Instalação
    Abre do navegador Abre de um atalho/menu
    Sempre roda no navegador Roda por si mesmo
    Sempre roda em uma aba Roda em sua própria janela
    Provavelmente não funciona sem internet Normalmente funciona offline
    Não otimizado para o dispositivo Recursos poderosos/integração com o SO
    Linkável Não linkável
    “eu uso isso” “eu tenho isso”
    Web Apps

    View Slide

  11. Pode rodar em qualquer dispositivo
    Rápido de abrir e usar & Pode ser instalado
    Abre do navegador & Abre de um atalho/menu
    Sempre roda no navegador Roda por si mesmo
    Sempre roda em uma aba Roda em sua própria janela
    Provavelmente não funciona sem internet Normalmente funciona offline
    Não otimizado para o dispositivo integração com o SO
    Linkável
    “eu uso isso” & “eu tenho isso”
    PWA

    View Slide

  12. Aplicação Web Instalável
    Cria um ícone na home e lista de aplicativos
    do usuário.
    Uma vez que este processo é feito o usuário
    tem acesso a uma aplicação full screen
    indistinguível de uma aplicação nativa.
    bit.ly/pokemon-memory

    View Slide

  13. Aplicação Web Instalável
    Este processo de instalação não se limita a
    dispositivos móveis.
    Linux, Mac e Windows também permitem
    essa operação.

    View Slide

  14. *Google vs Apple vs Microsoft
    A maior questão atual do PWA é a forma como
    essas 3 marcas lidam com as aplicações instaladas.
    Google, com o Chrome é a com maior suporte e
    incentivo de instalação dessas aplicações.
    Microsoft aceita PWAs em sua loja. Em versões
    mais recentes do Edge já é possível de instalar
    diretamente do site.
    Apple é a que mais resiste, mesmo que já seja
    possível instalar PWA em aparelhos Apple, a opção
    não é destacada.

    View Slide

  15. Push e Web Notificações
    Assim como aplicações nativas é
    possível enviar notificações ao
    usuários.

    View Slide

  16. Offline First
    Depois do primeiro acesso, todos os
    assets da aplicação podem ser
    armazenados.
    Todas as interações seguintes podem
    acontecer sem internet.
    Isso gera grande economia de dados,
    além de maior velocidade.
    É possível ter controle refinado sobre as políticas de cache,
    como tipos de arquivos, endpoints, validade...

    View Slide

  17. Tarefas de segundo plano
    É possível programar tarefas para
    momentos mais propícios.
    Imagine poder reter um pedido http
    feito enquanto a aplicação estava
    offline e enviar a mesma quando a
    internet do usuário for restabelecida.

    View Slide

  18. Pagamentos
    Meio de pagamento seguro controlado
    diretamente pelo sistema operacional
    e navegador.
    - Google Pay
    - Apple Pay
    - Samsung Pay

    View Slide

  19. E as lojas de aplicativos?

    View Slide

  20. Windows Store
    Percorre e adiciona automaticamente
    aplicações PWA em sua loja usando o
    Bing.
    Permite o empacotamento e envio
    manual também.

    View Slide

  21. Google Play
    Criou o TWA (Trusted Web Activity),
    uma aplicação que tem como objetivo
    abrir um PWA existente.
    O detalhe fica na fluidez do processo, o
    PWA aberto por esta técnica age
    exatamente como se estivesse sendo
    aberta no navegador, compartilhando
    storage e cookies.

    View Slide

  22. App Store
    Apesar do Safari suportar PWA, a Apple
    não fornece meio de encontrar uma
    aplicação em sua loja.

    View Slide

  23. Casos de uso

    View Slide

  24. Pinterest
    Reconstruíram sua aplicação
    mobile com PWA, com isso o
    engajamento cresceu 60%.
    Eles também obtiveram um
    aumento de 44% na receita de
    anúncios gerados por usuários, e
    o tempo gasto no site aumentou
    em 40%.
    https://bit.ly/2iRxC36

    View Slide

  25. Uber
    Versão otimizada para usuários de 2G e
    com aparelhos de baixo desempenho.
    Permite usar o uber no computador
    sem precisar instalar o app.
    Usando técnicas de otimização e
    carregamento preguiçoso chegaram a
    uma aplicação com um core de 50k
    https://eng.uber.com/m-uber/

    View Slide

  26. Trivago
    Teve um aumento de engajamento de
    mais de 100% ao acrescentarem
    recursos de PWA em seu portal.
    Os usuários continuam usando a
    aplicação mesmo quando ficam offline,
    desses 67% continuam navegando no
    site quando voltam a ficar on-line.
    https://bit.ly/2xdvUym

    View Slide

  27. Tinder
    Conseguiram reduzir o tempo
    de carregamento da aplicação
    de 11.91 para 4.69 segundos.
    A aplicação PWA é 90% menor
    que a versão nativa.
    https://bit.ly/2pTSw7R

    View Slide

  28. Forbes
    Diminuiu seu tempo carregamento no
    mobile de 6.5 para 2.5 segundos.
    Impressões por visita subiram 10%.
    https://bit.ly/2VCvsu1

    View Slide

  29. AliExpress
    Aumentou sua taxa de conversão para
    novos usuários em 104%.
    2x mais páginas visitas por usuário.
    Aumento de 74% de tempo gasto por
    sessão.
    https://bit.ly/2fq2ckc

    View Slide

  30. Obrigado
    bit.ly/vinicius73-pwa-talk

    View Slide