PWA: o que é? Vale a pena?

Os PWAs são aplicativos híbridos entre web e dispositivos móveis. Imagine quando você visita seu site favorito em seu smartphone e recebe uma solicitação para adicionar o site à página inicial do aplicativo.

Agora que o aplicativo está instalado no telefone, você pode ter a mesma experiência do navegador atual, sem nenhuma informação de tela, exceto o aplicativo, ou seja, toda a interface do navegador, como barra de endereços, botões, favoritos, etc., é removida.

“Mas é o mesmo que um aplicativo nativo?” Não exatamente. Discutiremos isso mais na postagem do blog, mas os PWAs diferem de várias maneiras dos aplicativos nativos vendidos em lojas de aplicativos como Google Play (Android) e App Store (iOS).

Ah, outra coisa que vale lembrar é que não há necessidade de escolha entre PWAs e aplicativos nativos, até mesmo grandes empresas os possuem, como Twitter, Uber, Facebook, etc.

Por que precisamos de PWA?

De fato, os usuários de smartphones cresceram exponencialmente na última década. Atualmente, mais de 60% da web acontece por meio de um dispositivo móvel na palma da sua mão (dados da Statista Mobile Usage Survey).

E precisamos de PWAs por vários motivos:

portabilidade

limitações de hardware

fácil acesso à web

aumento do número de serviços on-line

À medida que mais e mais usuários usam smartphones, otimizar a experiência do usuário nesses dispositivos é fundamental.

Para empresas menores que muitas vezes não têm aplicativos nativos devido a restrições de orçamento ou tempo, usar um PWA é uma ótima oportunidade de conquistar clientes oferecendo uma ótima experiência dentro de suas possibilidades.

Devido a limitações de hardware ou memória no dispositivo, alguns usuários podem preferir aplicativos baseados na Web para evitar o download e a instalação.

Dependendo do setor em que a empresa atua, esse pode ser um fator relevante a ser considerado.

Características de um PWA

De acordo com Alex Russell, do Google, um Progressive Web App deve ser:

Progressivo: Funciona para qualquer usuário, independentemente do navegador, pois é construído com aprimoramento progressivo como princípio central.

Responsivo: Adapta-se a qualquer formato: desktop, smartphone, tablet ou o que vier a seguir.

Conexões autônomas: service workers aprimorados para trabalhar offline ou em redes de baixa qualidade.

App-like: parece um aplicativo, com interação e navegação no estilo de aplicativo, porque está integrado ao modelo de shell do aplicativo.

Atual: Deve estar sempre atualizado devido ao processo de atualização do service worker.

Seguro: servido por HTTPS para evitar invasões e garantir que o conteúdo não seja adulterado.

Detectável: Como o manifesto do W3C e o escopo de registro do service worker permitem que os mecanismos de pesquisa os localizem, eles são identificáveis ​​como “aplicativos”.

Reengajamento: reengaje facilmente com recursos como notificações push.

Instalável: permite que os usuários salvem os aplicativos mais úteis na tela inicial sem acessar a loja de aplicativos.

Linkável: Compartilhe facilmente via URL sem instalação complicada.

Como funciona um PWA?

Os PWAs têm alguns componentes técnicos que trabalham juntos para fazer um aplicativo da Web funcionar conforme o esperado, são eles:

pwa

Componentes técnicos de um PWA

Service Worker

Nosso aplicativo web se comunica diretamente com a internet e, sem rede, não há aplicativo web.

Na primeira visita, o service worker armazena os recursos necessários no cache do navegador e, quando o usuário visita o aplicativo novamente, o service worker verifica o cache e retorna o resultado antes de verificar a rede.

Caso você não saiba, um Service Worker é um componente de código JavaScript que atua como um proxy entre o navegador e a web.

Ele gerencia notificações push e ajuda a criar aplicativos da web offline usando a API de cache do navegador.

Isso pode melhorar o desempenho do seu aplicativo, independentemente de seu dispositivo estar conectado à Internet ou não.

Manifest

Um arquivo de manifesto é um arquivo JSON que contém informações sobre um aplicativo, como um ícone a ser exibido quando adicionado à tela inicial, o nome abreviado do aplicativo, a cor de fundo ou o tema.

Um exemplo do arquivo Manifest.json:

{

"short_name": "Gabba",

"name": "Gabba Hey",

"icons": [

{

"src": "/images/gabba.png",

"type": "image/png",

"sizes": "192x192"

},

{

"src": "/images/icons-512.png",

"type": "image/png",

"sizes": "512x512"

}

],

"start_url": "/home/?source=pwa",

"background_color": "#3367D6",

"display": "standalone",

"scope": "/home/",

"theme_color": "#3367D6"

}

HTTPS

Como os service workers interceptam solicitações de rede e podem modificar os resultados, os PWAs precisam usar HTTPS.

Nada de especial aqui, mas por motivos de segurança é importante observar a presença do protocolo HTTPS.

Quais as vantagens do PWA?

Existem inúmeros pontos positivos na utilização de ferramentas progressivas de web, como:

Podem ser usados independente do navegador ou dispositivo;

Funcionam offline graças ao service worker;

Permitem o envio de push notifications;

Permite adicionar um ícone na tela inicial do dispositivo;

Atualiza automaticamente;

Experiência similar a um aplicativo nativo.

Existe alguma desvantagem ao usar PWA?

Tudo depende da utilização, pode não ser o melhor uso quando você necessitar de algum requisito, como:

NFC

Bluetooth

Suporte entre navegadores (cada navegador é um universo diferente);

Não aparece na loja de aplicativos do SO

Como mencionado anteriormente, tudo depende de como o PWA é aplicado. E se você estiver trabalhando em um projeto grande, não precisará escolher entre um e outro.

Você pode usar aplicativos nativos e PWAs como Microsoft e Facebook. São experiências semelhantes, mas diferentes, dependendo das necessidades de diferentes públicos.