Introdução a aplicações web progressivas

Aplicações web progressivas ou PWA do inglês Progressive web apps, são nada mais aplicações web que se comportam como aplicativos nativos. Eles são rápidos, responsivos e confiáveis. Eles trabalham offline ou em redes de baixa qualidade. Eles podem ser instalados na tela inicial do dispositivo de um usuário como uma aplicação tradicional como Facebook ou Instagram e por conta de serem aplicações web normais podem ser encontrada por motores de busca.

Além disso, as aplicações web progressivas são seguros, pois, foram construídos usando a tecnologia padrão HTML/CSS/JavaScript; vinculável da mesma forma que qualquer outro site; e último ponto é sobre a palavra “progressiva”, pois elas podem evoluir progressivamente de sites simples para experiências de aplicativos ricas ao longo do tempo, ou de acordo com os limites do browser do usuário.

Por que usar aplicações web progressivas?

O termo PWA surgiu por volta de 2016 e provavelmente você já ouviu muitos rumores sobre PWAs, mas o que exatamente são eles? E por que você deveria investir tempo em aprender como deixar os seus sites prontos para PWA?

Os PWAs são o melhor dos dois mundos: são sites que, quando acessados num dispositivo móvel, se comportam como aplicativos nativos. Isso significa que eles carregam instantaneamente, podem adicionar funcionalidades com base em onde você está e o que está fazendo (como push notification), ter um ícone na tela inicial (como um aplicativo nativo) e trabalhar offline. Em outras palavras, os PWAs combinam todas as vantagens dos aplicativos da Web com muitas das vantagens dos aplicativos nativos sem exigir nenhum download ou instalação.

Vantagens de utilizar aplicações web progressivas

Aplicações web progressivas, ou PWAs, são um novo tipo de aplicativo da web que melhora a experiência dos usuários, fornecendo a eles mais do que apenas o que eles obtêm com um site. Eles estão:

• Útil: Eles fornecem utilidade adicional para a vida das pessoas
• Confiável: Eles funcionam em todos os dispositivos, independentemente da força da conexão de rede ou dos recursos de hardware
• Envolvente: eles envolvem os usuários numa experiência que torna as suas vidas melhores

Recursos em um PWA

• Offline: PWA é capaz de garantir que os seus usuários acessam a sua aplicação mesmo quando não estiver conectado a internet.
• Push Notifications: Os usuários podem esperar receber notificações sempre que ocorre um evento importante na sua aplicação, inclusive quando a sua aplicação não está aberta.
• Service Workers: Um Service Worker é uma abstração de um recurso da web, que pode ser muito útil para criar e manter uma experiência consistente na web app entre várias pessoas e equipamentos diferentes.
• Manifest.json: arquivo que fornece informações sobre uma aplicação (como nome, autor, ícone, e descrição) num arquivo JSON.

O que é web app manifest

Também é conhecido pelo nome do arquivo manifest.json, tem como propósito prover informações sobre com instalar aplicações web na tela inicial de um aparelho, propiciando aos usuários, acesso rápido a sua aplicação.

Atualmente web app manifest permite definir informações de atalhos dentro da nossa aplicação, diferentes tipos de ícones para diferentes tipos de sistemas operacionais e recentemente a inclusão de opções de configurações para dark mode.

Web Push Notifications

Disparado um dos recursos mais populares em aplicações web progressivas, as notificações Web push notificaton tornam possível que aplicações web recebam mensagens enviadas de um servidor, independentemente de a aplicação estar ou não em primeiro plano, ou mesmo carregada, num agente do usuário. Isto permite aos desenvolvedores entregar notificações assíncronas e atualizações aos usuários que optarem por participar, resultando num melhor envolvimento com novos conteúdos em tempo hábil.

Web push notifications podem aumentar o engajamento da sua aplicação quando utilizada da forma correta, mas um mal uso pode aumentar a rejeição do seu app por usuários, então fique atento as boas práticas.

Service Worker

Service workers são essenciais para aprimorar a experiência do usuário quando ele navega na internet. Com eles, é possível interceptar requisições e modificar o conteúdo das páginas conforme as necessidades do usuário.

Além disso, service workers podem ser usados para cachear conteúdos, o que torna a navegação muito mais rápida. Service workers são extremamente úteis para melhorar a velocidade de carregamento das páginas da web eles funcionam como o cerebro das aplicações web progressivas.

Com eles, é possível armazenar em cache os recursos necessários para exibir uma determinada página, com ele podemos criar diferentes estratégias de cache nas nossas aplicações. Service workers são um recurso incrível para melhorar a experiência do usuário na web. Com eles, é possível fornecer conteúdos personalizados de acordo com as necessidades dos usuários, além de tornar a navegação muito mais rápida e eficiente.

Como instalar uma aplicação web progressiva?

Instalar um PWA é fácil — mas essa etapa irá depender de alguns itens:

• Tipo de dispositivo
• Navegador
• Sistema operacional

Por exemplo, no Chrome desktop um pequeno ícone irá aparecer na barra de navegação do browser:

Para mobile iOS, basta clicar no ícone no centro da barra de navegação do safari e selecionar a opção: adicionar a tela principal.

Para aplicações no iOS precisa de configurações extras para definir os ícones, para isso confira o post que eu fiz sobre os ícones para aplicações web progressivas no iOS.

Conclusão

Em 2016 quando o conceito surgiu, as aplicações web progressivas incentivadas pelo Google, na sequência o Firefox passou a dar mais relevância ao assunto, e em 2020 a Microsoft entrou de vez nas PWA fornecendo recursos de integração com o sistema operacional Windows. Em 2021 Apple cedeu a pressão da comunidade e começou a falar publicamente sobre o conceito de aplicações web progressivas, isso também se deu por mudanças internas no time do Webkit.

Agora em 2022 PWA passam a deixar um pouco os holofotes porque muitos dos seus conceitos são apenas um caminho natural da evolução das tecnologias web. Mas ainda assim, é um conceito que confundem muitos usuários.

Perguntas frequentes