PWA Devs ACATE - Marco Aurélio Cevey - YouDeserve

Reconhecimento,
benefícios e
possibilidade de
crescimento.
@youdeserve.today
www.youdeserve.today
PWAs:
ONDE VIVEM,
O QUE FAZEM E
PARA QUE SERVEM?
Agenda
• Introdução
• Desafios com aplicativos móveis
• Facilidade de acessos à sites
• Surgimento das PWAs
• O que é preciso para ser uma PWA
• Service Worker
• Manifest
• HTTPS
• Checklist
• Vantagens
• Desvantagens
• Quando usar ou não
• Cases
• Extensão Lighthouse
• Bora ver o PWA: Reconheça YD
• Aplicando o Lighthouse
• https://web.dev/i18n/pt/progressive-web-apps/
Intro Clique aqui para adicionar texto
dução
Desafios dos aplicativos
• “De todos os aplicativos disponíveis nas lojas cerca de
60% nunca foram baixados, a pesquisa realizada relata
também que mais de 65% de usuários de smartphones
não realizam nenhum donwload de aplicativo por mês.”
• Alta burocracia nas lojas de aplicativos;

• Desafios com espaços no celular do usuário;
• Taxa de conversão médias, pois o usuário precisa ir na
loja instalar o app e depois utilizar;
• Desafios ao aplicar manutenção e distribuição de
updateas;
Facilidade de acessos à sites/web apps
• “Um estudo recente da We Are Social e Hootsuite
apontou que os brasileiros gastam 4 horas e 45 minutos
por dia na internet em seus dispositivos móveis. Isso
representa mais de 50% de todo o tempo gasto on-line
diariamente, e coloca o Brasil como o terceiro país em
uso de internet móvel no mundo, atrás apenas de
Tailândia e Filipinas.”
• Acesso direto pelo navegador sem instalação direta

• Fácil disponibilidade de acesso e manutenção;
• Taxa de conversão altas, pois o usuário já irá acessar o
site ou app;
• Estudos indicam que usuários visitam até 100 site ao
mês, ao contraponto que instalam até 5 aplicativos;
Surgime
nto Clique aqui para adicionar texto
PWAs
O que são PWAs?
• Bem, de uma maneira bastante simplista, trata-se de
uma aplicativo web (web app) que utiliza as mais
modernas capacidades dos navegadores (web browsers)
para entregar experiências cada vez mais similares aos
aplicativos nativos.
• Outro ponto importante é o que diz respeito à palavra

“progressivo” no nome. Os PWAs ajustam suas
funcionalidades aos recursos disponíveis, habilitando
novas funções progressivamente, de acordo com o que é
disponibilizado pelo navegador utilizado.
O que é preciso para ser uma PWA
• A tecnologia PWA possui diferentes
componentes técnicos, que, ao serem
combinados, fazem com que o aplicativo
web funcione da melhor forma.
• Confira os principais componentes:

• Service worker
• Manifest
• HTTPS
Service worker
• O service worker é um componente Javascript, que
funciona como um proxy entre o navegador e a
rede, gerenciando as notificações por push e
possibilitando a criação de um aplicativo web
offline, através da API de cache do navegador.
• Falando de um modo não técnico, o que tudo isso

quer dizer? O service worker armazena todos os
recursos necessários no cache do navegador. Dessa
forma, quando um usuário utilizar um aplicativo e
decidir retornar seu uso novamente, tudo vai estar
da mesma maneira que ele deixou, como seria em
um app, de fato.
Manifest
• O manifest é um arquivo que contém
todas as informações do aplicativo,
como o ícone que aparece na tela
inicial do dispositivo, o nome
abreviado do app, o plano de fundo ou
o tema, entre outras funções.
HTTPS
• Com o service worker realizando a
ponte entre as solicitações de rede e
os resultados no aplicativo para o
usuário, o PWA precisa do HTTPS e seu
protocolo para total segurança do
funcionamento.
Checklist
Existe uma série de itens e características criadas pela Google que definem o que são
esperados de um PWA:
• Progressivo: feito para qualquer usuário, independentemente do browser;

• Responsivo: feito para qualquer dispositivo (desktop, tablet e mobile);
• Conectável: funciona mesmo se o usuário estiver offline;
• App-like: o usuário deve se sentir em um aplicativo nativo;
• Atualizado: não é necessário baixar atualizações do aplicativo, o browser simplesmente
irá detectar e atualizar a versão automaticamente, caso necessário;
• Seguro: feito somente com HTTPS (Hyper Text Transfer Protocol Secure), procurando
garantir que o domínio ou endereço é verificado;
• Engajável: através de Notificações Push, o usuário pode ser constantemente engajado;
• Instalável: é possível adicionar um ícone na tela principal do smartphone e desktop
com apenas um clique;
Vantagens
• Poucas alterações no código do site;
• Utilização de HTML/CSS/Javascript;
• Acesso à API’s nativas como
geolocalização, câmera, microfone, etc;
• Envio de notificações push;
• Aplicação muito leve (menos de 1MB
geralmente);
• Suporte à utilização offline;
• Tempo de carregamento mais curto
• Mais engajamento e conversão de
usuários
Desvantagens
• Suporte cross-browser (existem muitos
navegadores);
• Sem acesso à vibração, sensores,
comunicação com outros apps, etc (veja
https://whatwebcando.today/);
• Não é possível adicioná-los às lojas de
aplicativos;
• Interface web pode perder performance
em aplicações mais pesadas;
• Pode não passar a legitimidade de uma
aplicação mobile;
Quando usar ou não
• CADA CASO É UM CASO! ÓTIMO PARA MVPs!
• O PWA é uma ótima opção quando a empresa quer migrar para um app, oferecendo
uma boa experiência aos usuários com funcionalidades simples e agilidade.
• É importante lembrar, no entanto, que, por ser um ambiente híbrido, o PWA tem
limitações em comparação com apps nativos, principalmente quando se fala de
funcionalidades mais robustas. Sendo assim, convém analisar as necessidades do
seu negócio para concluir qual opção é a mais adequada.
• Além disso, vale dizer que o PWA e o app nativo não são excludentes. A empresa
pode ter os dois, o primeiro para facilitar o acesso dos usuários aos recursos mais
básicos e o segundo para oferecer funcionalidades mais avançadas.
https://br.pinterest.com/
https://open.spotify.com/
https://tinder.com/
CASES https://m.uber.com/
https://mobile.twitter.com/
https://app.youdeserve.today/
https://reconheca.youdeserve.today/
O aplicativo de relacionamento,
desenvolveu seu próprio PWA em
cerca de 3 meses. Embora o
aplicativo Android da Tinder exija
o download de 30 MB, a sua
versão PWA oferece a experiência
principal do Tinder a um custo de
dados de 2,8 MB. O PWA também
CASES
parece incentivar mais atividades.
Comparado aos usuários dos
aplicativos nativos, os usuários do
PWA mais, ou seja, arrastam com
mais frequência o dedo para o
lado na tela (funcionalidade do
aplicativo para mostrar ou não
interesse por outro usuário),
enviam mais mensagens e usam o
aplicativo por períodos mais
longos.
A Uber precisava de um aplicativo
que pudesse ser usado por
qualquer pessoa,
independentemente da
velocidade do dispositivo e da
rede. Sua solução foi desenvolver
um PWA que imita seus
aplicativos nativos em
funcionalidade, mas que
CASES apresentava um tamanho em MB

significativamente menor em
dados armazenados. Usando
pequenas bibliotecas e SVGs
(Scalable Vector Graphics ou
Gráficos de Vetor Escaláveis) em
vez de imagens sempre que
possível, o Progressive Web App
do Uber tem apenas 50 KB e
carrega em menos de três
segundos mesmo em redes 2G!
Extensão Lighthouse
Uma ferramenta que pode auxiliar muito durante o desenvolvimento de PWAs é a
Lighthouse, também criada pela própria Google. Inicialmente, a ferramenta foi
projetada para auditar PWAs, mas seu objetivo é auxiliar no aprimoramento de todos os
aspectos de um App Web. Ela pode ser executada via terminal ou instalada no Chrome
como uma extensão. A ferramenta aplica testes em um site, trazendo dicas, sugestões e
possíveis soluções em 5 pontos diferentes: Performance, Acessibilidade, Boas Práticas
(Best Practices), SEO (Search Engine Optimization ou Otimização de Ferramenta de
Busca) e PWA.
Bora ver o PWA: Reconheça YD
https://reconheca.youdeserve.today/
Base utilizada para o PWA:

https://ionicframework.com/docs/an
gular/pwa
Bora ver o PWA: Reconheça YD
* Angular
* Ionic
* TypeScript
* Firebase Hosting
* @angular/pwa
* API de compartilhamento do Browser
* API de status da internet
* Service Worker https://reconheca.youdeserve.today/
* Serviço para instalação do PWA
* Arquivo de Manifesto Base utilizada para o PWA:
https://ionicframework.com/docs/an
gular/pwa
Aplicando o Lighthouse
WEB DEV
https://web.dev/i18n/pt/progressive-web-apps/
Referências
• https://medium.com/@leoxavier_49819/vamos-falar-sobre-
os-progressive-web-apps-os-pwas-15567ab11639
• https://www.digitalhouse.com/br/blog/o-que-e-pwa/
• https://rockcontent.com/br/blog/progressive-web-apps/
• https://web.dev/i18n/pt/progressive-web-apps/
• https://www.digitalhouse.com/br/blog/o-que-e-pwa/
• https://rockcontent.com/br/blog/progressive-web-apps/
• https://blog.rocketseat.com.br/pwa-o-que-e-quando-
utilizar/
• https://resultadosdigitais.com.br/marketing/pwa/
• https://venturus.org.br/o-que-sao-pwas/
• https://medium.com/@leoxavier_49819/vamos-falar-sobre-
os-progressive-web-apps-os-pwas-15567ab11639
Muito
obrigado!
marco.cevey@youdeserve.today
@marcoacevey
www.youdeserve.today
+55 (49) 9 99573676

PWA Devs ACATE - Marco Aurélio Cevey - YouDeserve

Enviado por

Direitos autorais:

Formatos disponíveis

PWA Devs ACATE - Marco Aurélio Cevey - YouDeserve

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

PWA Devs ACATE - Marco Aurélio Cevey - YouDeserve

Enviado por

Direitos autorais:

Formatos disponíveis

Reconhecimento,

• Alta burocracia nas lojas de aplicativos;

• Acesso direto pelo navegador sem instalação direta

• Outro ponto importante é o que diz respeito à palavra

• Confira os principais componentes:

• Falando de um modo não técnico, o que tudo isso

• Progressivo: feito para qualquer usuário, independentemente do browser;

CASES apresentava um tamanho em MB

Base utilizada para o PWA:

Você também pode gostar