PWAs - Fundamentos da tecnologia e estudos de casos poderosos

Uma das principais características de um Progressive Web App é a sua capacidade de funcionar quando a conexão com a Internet não está estável. O PWA executa um script em segundo plano chamado Service Worker, o propósito deste script inclui o cache local de conteúdo, permitindo que os aplicativos sejam carregados quase que instantaneamente. Além disso, caso o usuário fique off-line, o aplicativo pode exibir uma tela personalizada para notificar sobre a falta de conectividade ou, em alguns casos, até mesmo entregar conteúdo previamente armazenado em cache.

A Smashing Magazine é um dos grandes nomes na indústria web, publicando conteúdo editorial e sempre de olho nas tendências digitais. Eles também estão promovendo os desenvolvimentos feitos no campo dos Progressive Web Apps, inclusive investindo nesta tecnologia.

Para proporcionar uma experiência agradável para os usuários, mesmo quando eles não têm conexão à Internet, a Smashing Magazine permite que o aplicativo recupere e armazene dados em cache para que eles possam continuar navegando no aplicativo nesta situação. No exemplo acima, carregamos um artigo e logo depois ficamos offline (modo avião para ter certeza), e mesmo depois de atualizar a página o artigo ainda estava disponível para leitura.

A equipe de desenvolvimento também pensou sobre a situação em que o usuário não houvesse armazenado uma página previamente no cache, mas clicou em um link e abriu esta página. Buscando entregar a experiência perfeita em apps, eles criaram uma página para dizer ao usuário o que está acontecendo e como o aplicativo está operando em circunstâncias offline.

Mais uma vez, a idéia é colocar o usuário em primeiro lugar e oferecer uma ótima experiência, assim como em aplicativos nativos. Oferecer conteúdo atualizado é uma característica rudimentar dos PWAs, que é facilitada, novamente, pelo Service Worker.

Depois que o script do Service Worker tenha sido armazenado em cache, ele não só tem a capacidade de armazenar conteúdo para uso offline, mas também de acionar sincronizações em segundo plano para fazer o download de novos dados. Em seguida, quando o usuário tiver uma conexão estável à Internet, o navegador pode ser utilizado para coletar e armazenar mais informações.

A Filpkart é uma empresa de comércio eletrônico com sede em Bangalore, na Índia. Eles estão na vanguarda do desenvolvimento em PWAs, utilizando esta tecnologia para melhorar seus KPIs de negócio, como conversão, tempo gasto em página e lealdade do usuário.

Como um princípio, os Progressive Web Apps evoluem de acordo como o usuário se envolve com eles. Assim, isso significa que se um usuário navega pelo aplicativo com o Chrome, Safari ou qualquer outro navegador, o PWA melhorará continuamente e, além disso, também poderá aproveitar os recursos disponíveis no dispositivo e no navegador do usuário.

Para desafiar o design perfeito dos aplicativos nativos, os Progressive Web Apps também são extremamente responsivos, o que significa que o layout do aplicativo se adaptará dependendo do formato (celular, tablet ou desktop) e o tamanho da tela, que pode variar muito, até mesmo se considerarmos apenas os smartphones.

O comportamento da responsividade pode variar com base no modo como o aplicativo é criado. Pode ser a arquitetura de blocos, a que nos referimos em um dos posts desta série, onde blocos são organizados e multiplicados de acordo com a tela, ou blocos individuais que mudam internamente ao responder às mudanças de tamanho.

O Walmart é um varejista multinacional, cujo principal objetivo é ajudar as pessoas a economizar quando fazem compras. Agora, em seu Progressive Web App, eles estão oferecendo aos clientes a experiência de compras on-line perfeita, independentemente de onde eles estão e qual dispositivo eles estão utilizando.

A arquitetura de um PWA é outro fator crucial para seu funcionamento aprimorado, tudo isso seguindo o modelo de App Shell (Casca de Aplicativo). Esta estrutura minimiza as solicitações de atualização de página, uma vez que separa as partes do aplicativo que são frequentemente constantes, como o menu, cabeçalho e layout das páginas (que em conjunto são chamadas de App Shell), das partes que estão sendo regularmente atualizadas, geralmente o conteúdo.

Em termos práticos, os Progressive Web Apps imitam a navegação de aplicativos nativos para oferecer interações contínuas e suaves, como acontece em apps nativos. Para usuários recorrentes, isso significa que os elementos-chave do aplicativo serão exibidos imediatamente, pois já estão em cache, refinando o desempenho e, em seguida, o restante do conteúdo será recuperado durante o uso.

Seguindo o caso do Walmart, a equipe de design e desenvolvimento que criou o aplicativo realmente conseguiu fazer o site oferecer uma experiência fluída como em um aplicativo. Olhando especificamente para os elementos da App Shell, o cabeçalho está sendo utilizado não apenas como um recurso gráfico, mas também incluindo a barra de pesquisa e outros botões relevantes para os usuários. Como mencionado anteriormente, agora o menu detém a maioria dos botões de navegação do site, e foi dividido em seções, tornando o uso ainda mais simples. As páginas também seguem layouts de blocos simples, exibindo o conteúdo claramente e permitindo que o aplicativo seja carregado muito rápido.

Talvez uma das maiores vantagens sobre os apps nativos é a característica fundamental de descoberta dos Progressive Web Apps. Naturalmente, como eles são construídos em páginas web, é possível aproveitar o poder dos motores de busca para indexar e distribuir o aplicativo através dos resultados de pesquisas.

Do ponto de vista de marketing, isso também significa que algumas técnicas de otimização de mecanismo de pesquisa (SEO) agora podem ser aplicadas aos aplicativos. Isto traz uma luz inteiramente nova à aquisição de usuários para os apps, além da possibilidade de combinar novas campanhas com estratégias de ASO.

O The Washington Post, fundado em 1877, é uma das redes de mídia mais tradicionais dos Estados Unidos. Hoje, a empresa está desbravando o campo dos Progressive Web App para aumentar seu alcance e engajamento digital.

Uma coisa que podemos dizer com certeza sobre os Progressive Web Apps é que eles trazem muitas ferramentas para alcançar novos usuários potenciais. Agora, quando alguém quer compartilhar o aplicativo, ou mesmo uma página específica dentro do app, é possível simplesmente enviar a URL e a outra pessoa poderá facilmente abrir o PWA sem a necessidade de instalar ou ser enviado para uma landing page genérica.

A segurança da Web é um dos grande temas da vida moderna, e, uma vez que os Progressive Web Apps estejam baseados em páginas da web, existem alguns requisitos que eles devem atender. Para atender as demandas de segurança necessárias para os aplicativos, os desenvolvedores devem exibir os PWAs em um HTTP seguro ou HTTPS, permitindo a criptografia do trânsito de dados.

Mesmo que as informações no site não sejam sensíveis, a privacidade e a segurança do usuário são as principais preocupações quando se pensa sobre essa característica. Além do mais, com as novas especificações feitas pela Apple, para aplicativos iOS, e serviços como pagamentos on-line que já exigem conexões HTTPS, a implementação desse recurso está começando a se tornar um aspecto primário.

Alguns podem considerar o processo de instalação em aplicativos nativos um aspecto negativo, pois requer mais envolvimento do lado do usuário. Agora, os Progressive Web Apps estão dando a volta neste processo e tornando ele muito mais simples, com a possibilidade que os usuários adicionem o aplicativo à tela inicial do smartphone ou tablet, reduzindo o atrito original.

Com o aplicativo web, os desenvolvedores podem alimentar os navegadores com um "pacote de instalação", que inclui recursos gráficos, como ícone e tela de lançamento (splash screen), além de informações sobre como o aplicativo deve se comportar quando é lançado. Uma vez que o aplicativo tenha sido instalado, ele assume um estado de nível superior, melhorando a experiência de forma geral.

A missão da Product Hunt é permitir que os usuários compartilhem e descubram novos produtos. Agora, com um PWA, o site oferece uma experiência perfeita como no seu aplicativo, ajudando a comunidade a ser mais ativa e engajada.

Outra característica fundamental dos Progressive Web Apps são seus recursos de engajamento. Anteriormente apenas disponível para aplicativos nativos, os desenvolvedores agora podem ativar notificações push para os PWAs, funcionando como uma tarefa em segundo plano para o Service Worker. Atualmente, as notificações push dos PWAs são suportadas pelo Chrome, Firefox, Opera e Safari no desktop, mas não no celular. Os aplicativos que já implementaram esse recurso perceberam um aumento de 72% no tempo gasto no app e as visitas repetidas aumentaram em mais de 50%. (Fonte )

Além disso, algumas interações como a mudança de tarefas em nível superior e a capacidade de entrar no aplicativo com um único toque a partir de qualquer lugar da web tornam os usuários mais propensos a usar consistentemente o app. Esta é uma boa notícia para várias empresas, e entender como trabalhar com essas melhorias pode ser um divisor de águas.