Web Design Responsivo e Progressive Web App (PWA): As Diferenças

Com esses dois sendo tão semelhantes na aparência e no desempenho, você deve se perguntar por que não há uma comparação mais detalhada entre as duas abordagens populares para o desenvolvimento da Web: design responsivo da Web e Progressive Web App. Bem, é isso . Neste artigo, vamos comparar o design responsivo com o Progressive Web App e descobrir exatamente onde eles realmente diferem um do outro.

Web design responsivo

O que é isso

Responsive web design (RWD) é uma abordagem para desenvolvimento web descrita pela primeira vez por Ethan Marcotte em 2010 – cinco anos antes da concepção do Progressive Web App.

Como funciona

Basicamente, a filosofia do web design responsivo é que o design e o desenvolvimento devem ser feitos com o objetivo de responder ao dispositivo do usuário – o que significa responder ao comportamento, tamanho, plataforma e orientação do dispositivo em uso. Isso é alcançado com o uso de grades fluidas, imagens flexíveis e consultas de mídia CSS:

Grades fluidas, imagens flexíveis e consultas de mídia são os três ingredientes técnicos para um web design responsivo…

Ethan Marcotte, Web Design Responsivo

Redes Fluidas

Sites responsivos projetados com grades fluidas podem lidar melhor com os diferentes tamanhos de tela no mercado, pois, em vez de definir dimensões baseadas em pixels, a grade fluida adota um novo cálculo baseado em porcentagem.

Imagens flexíveis

Imagens na Web não são naturalmente fluidas, mas com algumas configurações (propriedade de width definida como 100% e a propriedade de height definida como auto ), qualquer imagem pode ser responsiva em todos os dispositivos.

Consultas de mídia CSS

Embora uma página da Web responsiva com imagens flexíveis e grades fluidas seja tecnicamente responsiva, ela não parece tão boa quanto poderia ser. É aqui que as consultas de mídia CSS entram em ação, pois são usadas para criar uma experiência ainda melhor, adaptada para diferentes dispositivos. Essas experiências personalizadas geralmente são introduzidas pelo uso de pontos de interrupção adicionados que entram em vigor em tamanhos de tela específicos.

No geral, o design responsivo da Web tornou a Web de hoje muito mais acessível, uma vez que a abordagem elimina a necessidade de mais fases de desenvolvimento que antes eram necessárias para acomodar os diversos tamanhos de tela no mercado. Ou, nas palavras de seu criador, essa abordagem ao desenvolvimento web finalmente nos permite “ desenhar para o fluxo e refluxo das coisas ”.

Exemplos

Sites responsivos são um lugar comum hoje em dia, e quase todos os sites que você encontra são um pouco responsivos em sua natureza.

Aplicativos da Web progressivos

O que é isso

Criado por Alex Russel em 2015, o P rogressive W eb A pp é a próxima evolução natural da Web devido aos seus muitos benefícios em relação ao site responsivo típico. A parte “ progressiva ”, segundo Pete LePage – Google Developer Advocate, pode ser explicada como “ à medida que o utilizador vai construindo uma relação com a app ao longo do tempo, esta torna-se cada vez mais poderosa ”.

Para colocar em termos leigos, um PWA é seu site semelhante a um aplicativo com (quase) todos os recursos que você pode esperar de um aplicativo móvel nativo , incluindo notificações push, recursos offline e assim por diante. E por causa disso, toda a experiência é um avanço em relação ao site responsivo, já que o PWA pode reter todos os supostos benefícios que vêm com uma plataforma baseada na web.

 Artigo relacionado: O que é um aplicativo da Web progressivo?

Como funciona

Na verdade, é muito fácil resumir os principais componentes de um PWA. Basicamente, para viabilizar todos os recursos progressivos mencionados acima, estes são os requisitos:

Manifesto do aplicativo da Web

O manifesto do aplicativo web é um arquivo JSON que fornece os metadados necessários para o processo de instalação do seu PWA e determina como o seu PWA se apresenta na tela inicial do usuário.

Trabalhadores de serviço

Considerado universalmente como o componente fundamental que possibilita todos os recursos progressivos do PWA, os service workers são executados independentemente do navegador e em um thread diferente do JavaScript principal.

Contextos seguros

Como um novo padrão da Web, é necessário que um PWA seja separado por meio de um protocolo seguro — HTTPS. Isso garante uma comunicação segura entre o usuário e o servidor e, em troca, garantindo uma experiência sem riscos.

Exemplos

Como os PWAs não se comportam de maneira diferente dos aplicativos móveis nativos, você pode ter visitado um site PWA antes sem saber. Pense em grandes sites semelhantes a aplicativos, como Instagram e Pinterest - todos eles são alimentados por PWA.

 Leitura recomendada: 12 melhores exemplos de aplicativos da Web progressivos em 2020

Onde eles se sobrepõem

Uma experiência semelhante com recursos modernos

Se tudo está fazendo sentido para você até agora, você deve ver que o web design responsivo (RWD) e o PWA se sobrepõem muito quando se trata de experiência do usuário. Tecnicamente, o PWA é responsivo, pois a abordagem é adequada para visualização em todos os dispositivos, com um toque moderno para permitir mais recursos semelhantes a aplicativos.

E como ambas são abordagens para o desenvolvimento da Web, elas compartilham quase todos os mesmos benefícios da Web, que incluem:

• Um URL, uma base de código para todas as plataformas
• Segurança aprimorada com HTTPS
• Melhor descoberta e sempre atualizado

Onde eles diferem

É aqui que as coisas ficam interessantes, pois essas duas abordagens para o desenvolvimento da Web - embora sejam semelhantes na aparência - diferem muito em seus impactos no mundo real.

Em termos de funcionalidades

Um PWA, por definição, vem com mais recursos do que um site responsivo típico. Aproveitando os avanços recentes em tecnologias da web, ou seja, trabalhadores de serviços e manifesto de aplicativos da web, o PWA pode fornecer recursos que antes eram exclusivos de aplicativos móveis nativos, como:

Adicionar à tela inicial

Com service workers registrados e um manifesto de aplicativo da Web, o PWA pode ser instalado em todos os dispositivos que tenham um navegador compatível.

>> Saiba mais: Crie seu primeiro PWA

Notificações via push

Por meio de service workers, você pode enviar notificações e exibi-las nos dispositivos do usuário da mesma forma que um aplicativo nativo faria. Este é um recurso relativamente recente da Web que aproveita a API Push, a API de Notificações e o Protocolo Web Push; e em um futuro próximo, esse recurso só está melhorando graças ao advento dos Acionadores de Notificações e da API Badging.

Recursos off-line

Graças à ajuda do proxy de rede programável no navegador, ou seja, service workers , o PWA pode armazenar em cache e fornecer conteúdo offline de forma proativa sem ter que depender de mecanismos de cache desatualizados, como o cache HTTP.

Observações : Sites responsivos ainda podem se beneficiar de todas as APIs existentes da Web para oferecer uma experiência de usuário ideal, mas você não terá todos os recursos que dependem de service workers.

 Leitura recomendada: Progressive Web App (PWA) e acesso a hardware

Em termos de desempenho

Como os sites responsivos ainda são o seu site típico retido por todas as desvantagens associadas ao mecanismo de cache HTTP atual, é razoável esperar um melhor desempenho do PWA, pois ele usa um mecanismo de cache mais novo e mais orientado ao desempenho chamado service workers.

Mecanismo de cache mais rápido

Com os service workers registrados, você pode controlar exatamente o que está sendo armazenado em cache e, como resultado, gerar melhores experiências para os visitantes que retornam.

O impacto no desempenho dos service workers no mundo real também não é algo que não tenha sido cuidadosamente observado. Ao usar o tempo para pintar pela primeira vez como uma métrica para medir a primeira experiência do usuário com um site, o próprio Google realizou um estudo observando o desempenho do aplicativo da web Google I/O com um grupo controlado (onde um service worker controla o aplicativo da web) e um grupo com suporte (onde o serviço funciona é suportado pelo navegador em uso, mas ainda não está controlando o aplicativo Web).

Os resultados foram particularmente impressionantes no desktop, pois aqui podemos ver que os service workers fizeram sua parte para reduzir o tempo original da primeira pintura ( firstpaint ) para meros 583ms . Isso é o mais próximo possível de uma experiência instantânea.

As coisas são, no entanto, um pouco menos impressionantes em dispositivos móveis:

Aqui podemos ver que o final do grupo controlado ainda se parece um pouco com o grupo suportado. Isso se deve em grande parte ao fato de que, em dispositivos móveis, os threads do service worker não são tão otimizados e precisam de mais tempo para iniciar em comparação com o desktop.

No geral, o aumento de desempenho obtido com os service workers – ou em outras palavras, com o PWA – é nada menos que fenomenal. É claro que ainda há trabalho a ser feito por parte dos trabalhadores de serviços móveis; mas sentimos que, no geral, ainda é um passo marginal em relação ao que a Web já foi, e um passo na direção certa para isso.

Em termos de segurança

HTTPS—A linha divisória

Embora um site responsivo típico possa ser tão seguro quanto um PWA, não é necessário que sites responsivos usem protocolos de comunicação seguros. Este é o caso oposto com sites com PWA, pois o Google, fundador do PWA, exige que todas as comunicações entre o servidor e o cliente em um PWA sejam criptografadas por meio do uso de HTTPS.

A maioria dos recursos relacionados a um PWA, como geolocalização e até mesmo service workers, estão disponíveis apenas quando o aplicativo é carregado usando HTTPS.

Documentos da web MDN, aplicativos da web progressivos (PWAs)

 Artigo relacionado: Você precisa de HTTPS?

Conclusão

O aumento de desempenho acima mencionado alcançado com os trabalhadores de serviço, combinado com recursos adicionais semelhantes a aplicativos, como notificações push, adição à tela inicial (e em um futuro próximo, geofencing e sincronização periódica), todos provam que o PWA é o candidato adequado para ser o próximo evolução da Web. A partir de agora, o movimento PWA já é amplamente incentivado por quase todos os grandes, incluindo a Microsoft com seu impulso de adoções de PWA no Windows 10. Não demorará muito para vermos um futuro cheio de Progressive Web Apps - como o que Steve Jobs imaginou:

O mecanismo completo do Safari está dentro do iPhone. E assim, você pode escrever incríveis aplicativos Web 2.0 e Ajax que se parecem e se comportam exatamente como aplicativos no iPhone. E esses aplicativos podem se integrar perfeitamente aos serviços do iPhone. Eles podem fazer uma ligação, enviar um e-mail, procurar um local no Google Maps.

Steve Jobs, 2007