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

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

O que é PWA?

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.

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

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

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.

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/

Recursos e Possibilidades

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

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

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

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.

*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.

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

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...

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.

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

E as lojas de aplicativos?

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

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.

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

Casos de uso

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

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/

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

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

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

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

Obrigado bit.ly/vinicius73-pwa-talk