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/
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
*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.
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.
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.
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
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
vinicius73
minodriven
furukawayasuto
tkmnzm
shintanimoto
k_takasaki
mikobaaaaa0920
johanjanssens
speed1313
akkeylab
takashimiyahara
.png){kind=avatar}
headwaters
mkeeda
lynnandtonic
thekraken
destraynor
kastner
ammeep
garrettdimon
myddelton
searls
erikaheidi
jennybc
jmmastey
addyosmani