PWA - Progressive Web Apps

PWA - Progressive Web Apps

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

F803c45d62a468e0cb990398c004bd3e?s=128

Vinicius Reis

July 03, 2019
Tweet

Transcript

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

    com nossos produtos
  2. Vinicius Reis @vinicius73 @LuizVinicius73 Gravo aulas sobre Vue.js, JavaScript e

    Laravel para codecasts.com.br Claro Controle @ M4U
  3. O que é PWA?

  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.
  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
  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
  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.
  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/
  9. Recursos e Possibilidades

  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
  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
  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
  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.
  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.
  15. Push e Web Notificações Assim como aplicações nativas é possível

    enviar notificações ao usuários.
  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...
  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.
  18. Pagamentos Meio de pagamento seguro controlado diretamente pelo sistema operacional

    e navegador. - Google Pay - Apple Pay - Samsung Pay
  19. E as lojas de aplicativos?

  20. Windows Store Percorre e adiciona automaticamente aplicações PWA em sua

    loja usando o Bing. Permite o empacotamento e envio manual também.
  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.
  22. App Store Apesar do Safari suportar PWA, a Apple não

    fornece meio de encontrar uma aplicação em sua loja.
  23. Casos de uso

  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
  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/
  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
  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
  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
  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
  30. Obrigado bit.ly/vinicius73-pwa-talk