Quais são as características de um bom Progressive Web App?

A performance desempenha um papel significativo no sucesso de qualquer experiência on-line, porque os sites com alto desempenho engajam e retêm melhor os usuários do que os de baixo desempenho. Os sites devem focar a otimização de métricas de desempenho centradas no usuário.

Por que

A velocidade é fundamental para que os usuários usem seu app. Na verdade, como os tempos de carregamento da página vão de um a 10 segundos, a probabilidade de um usuário pular aumenta em 123%. O desempenho não para com o evento load. Os usuários nunca devem se perguntar se a interação, por exemplo, clicar em um botão, foi registrada ou não. A rolagem e a animação devem ser suaves. O desempenho afeta toda a experiência, desde a forma como os usuários percebem o aplicativo até o desempenho real.

Embora todos os aplicativos tenham necessidades diferentes, as auditorias de desempenho no Lighthouse são baseadas nas Core Web Vitals, e uma pontuação alta nessas auditorias aumenta a probabilidade de os usuários terem uma experiência agradável. Também é possível usar o PageSpeed Insights ou o Chrome User Experience Report para ver dados reais do desempenho do seu app da Web.

Como

Siga nosso guia sobre tempos de carregamento rápidos para saber como fazer com que o PWA inicie e permaneça rápido.

Os usuários podem usar qualquer navegador para acessar seu app da Web antes que ele seja instalado.

Por que

Os Progressive Web Apps são apps da Web primeiro, o que significa que eles precisam funcionar em vários navegadores, não apenas em um deles.

Uma maneira eficaz de fazer isso é, nas palavras de Jeremy Keith no Resilient Web Design, identificando a funcionalidade principal, disponibilizando essa funcionalidade usando a tecnologia mais simples possível e, em seguida, melhorando a experiência sempre que possível. Em muitos casos, isso significa começar apenas com HTML para criar a funcionalidade principal e aprimorar a experiência do usuário com CSS e JavaScript para criar uma experiência mais envolvente.

Por exemplo, considere o envio de formulários. A maneira mais simples de implementar isso é um formulário HTML que envia uma solicitação POST. Depois disso, é possível aprimorar a experiência com JavaScript para validar o formulário e enviar o formulário via AJAX, melhorando a experiência dos usuários compatíveis.

Considere que os usuários vão interagir com seu site em diversos dispositivos e navegadores. Você não pode simplesmente segmentar o extremo superior do espectro. Ao usar a detecção de recursos, você proporcionará uma experiência utilizável para a maior gama de usuários em potencial, incluindo aqueles que usam navegadores e dispositivos que podem não existir hoje.

Como

O Resilient Web Design (link em inglês) de Jeremy Keith é um excelente recurso que descreve como pensar sobre o Web design nessa metodologia progressiva e para vários navegadores.

Leitura adicional

• O artigo Como entender o aprimoramento progressivo (em inglês) é uma boa introdução ao tópico.
• Progressive Enhancement: o que é e como usar (em inglês) da Smashing Magazine apresenta uma introdução prática e fornece links para tópicos mais avançados.
• A MDN tem um artigo intitulado Como implementar a detecção de recursos (em inglês) que fala sobre como detectar um recurso consultando-o diretamente.

Os usuários podem usar o PWA em qualquer tamanho de tela, e todo o conteúdo está disponível em qualquer tamanho de janela de visualização.

Por que

Existem dispositivos de vários tamanhos, e os usuários podem usar seu app em vários tamanhos, até mesmo no mesmo dispositivo. Portanto, é fundamental garantir que o conteúdo não se encaixe apenas na janela de visualização, mas que todos os recursos e conteúdo do seu site sejam utilizáveis em todos os tamanhos de janela de visualização.

As tarefas que os usuários querem concluir e o conteúdo que eles querem acessar não mudam com o tamanho da janela de visualização. O conteúdo pode ser reorganizado em diferentes tamanhos de janela de visualização, e todo o conteúdo precisa estar lá, de um jeito ou de outro. Na verdade, como Luke Wroblewski afirma no livro Mobile First, começar pequeno e grande em vez de o contrário pode realmente melhorar o design de um site:

> Os dispositivos móveis exigem que as equipes de desenvolvimento de software se concentrem apenas nos > dados e ações mais importantes de um aplicativo. Simplesmente não há espaço > em uma tela de 320 x 480 pixels para elementos irrelevantes e desnecessários. > Você precisa priorizar.

Como

Existem muitos recursos sobre design responsivo, incluindo o artigo original de Ethan Marcotte, uma coleção de conceitos importantes relacionados a ele, além de muitos livros e palestras. Para restringir a discussão aos aspectos de conteúdo do design responsivo, analise o design que prioriza o conteúdo e os layouts responsivos de saída de conteúdo. Por fim, embora se concentrem nos dispositivos móveis, as lições em Seven Deadly Mobile Myths, de Josh Clark, são tão relevantes para visualizações pequenas de sites responsivos quanto para dispositivos móveis.

Quando os usuários estão off-line, mantê-los no PWA oferece uma experiência mais integrada do que voltar à página off-line padrão do navegador.

Por que

Os usuários esperam que os apps instalados funcionem independentemente do status da conexão. Um app específico da plataforma nunca mostra uma página em branco quando está off-line. Além disso, um Progressive Web App nunca mostra a página off-line padrão do navegador. Oferecer uma experiência off-line personalizada, tanto quando um usuário navega para um URL que não foi armazenado em cache quanto quando um usuário tenta usar um recurso que requer uma conexão, ajuda sua experiência na Web a parecer parte do dispositivo em que está sendo executada.

Como

Durante o evento install de um service worker, é possível pré-armazenar em cache uma página off-line personalizada para uso posterior. Se um usuário ficar off-line, você poderá responder com a página off-line personalizada armazenada em cache. Você pode seguir nosso exemplo personalizado de página off-line para ver um exemplo disso em ação e aprender a implementá-lo por conta própria.

Os usuários que instalam ou adicionam apps ao dispositivo tendem a se envolver mais com eles.

Por que

A instalação de um Progressive Web App permite que ele tenha a aparência e o comportamento de todos os outros apps instalados. Ele é iniciado no mesmo lugar em que os usuários iniciam os outros apps. Ele é executado na própria janela do app, separada do navegador, e aparece na lista de tarefas, assim como outros apps.

Por que você gostaria que um usuário instalasse seu PWA? É o mesmo motivo pelo qual você gostaria que um usuário instalasse seu app de uma app store. Os usuários que instalam seus apps são seu público-alvo mais engajado e têm métricas de engajamento melhores do que os visitantes comuns, geralmente em paridade com os usuários de apps em dispositivos móveis. Essas métricas incluem mais visitas repetidas, tempos mais longos no seu site e taxas de conversão mais altas.

Como

Siga nosso guia de instalação para saber como tornar seu PWA instalável, como testar se ele pode ser instalado e tentar fazer isso por conta própria.

Quando a conectividade não é estritamente necessária, seu app funciona off-line da mesma forma que on-line.

Por que

Além de oferecer uma página off-line personalizada, os usuários esperam que os Progressive Web Apps possam ser usados off-line. Por exemplo, apps de viagens e companhias aéreas precisam ter detalhes da viagem e cartões de embarque facilmente disponíveis off-line. Apps de música, vídeo e podcast precisam permitir a reprodução off-line. Apps sociais e de notícias precisam armazenar em cache o conteúdo recente para que os usuários possam lê-lo off-line. Os usuários também esperam permanecer autenticados quando off-line, então, projete para autenticação off-line. Um PWA off-line oferece uma verdadeira experiência semelhante a um app para os usuários.

Como

Depois de determinar quais recursos os usuários esperam que funcionem off-line, será necessário disponibilizar seu conteúdo e adaptá-lo aos contextos off-line. Além disso, é possível usar o IndexedDB, um sistema de armazenamento NoSQL no navegador, para armazenar e recuperar dados, e a sincronização em segundo plano para permitir que os usuários realizem ações off-line e adiar as comunicações do servidor até que o usuário tenha uma conexão estável novamente. Também é possível usar service workers para armazenar outros tipos de conteúdo, como imagens, arquivos de vídeo e arquivos de áudio, para uso off-line, bem como usá-los para implementar sessões seguras e de longa duração para manter os usuários autenticados. Da perspectiva da experiência do usuário, você pode usar telas esqueleto que dão aos usuários uma percepção de velocidade e conteúdo durante o carregamento, que podem retornar ao conteúdo em cache ou a um indicador off-line, conforme necessário.

Todas as interações do usuário atendem aos requisitos de acessibilidade das WCAG 2.0.

Por que

A maioria das pessoas em algum momento da vida vai querer aproveitar o PWA de uma forma que seja coberta pelos requisitos de acessibilidade WCAG 2.0. A capacidade dos humanos de interagir e entender seu PWA existe em todo o espectro, e as necessidades podem ser temporárias ou permanentes. Ao tornar seu PWA acessível, você garante que ele possa ser usado para todos.

Como

A Introdução à acessibilidade na Web do W3C é um bom ponto de partida. A maioria dos testes de acessibilidade precisa ser feita manualmente. Ferramentas como as auditorias de acessibilidade no Lighthouse, no axe e nos insights de acessibilidade podem ajudar você a automatizar alguns testes de acessibilidade. Também é importante usar elementos semanticamente corretos em vez de recriá-los por conta própria, por exemplo, elementos a e button. Isso garante que, quando você precisar criar funcionalidades mais avançadas, as expectativas de acessibilidade sejam atendidas (como quando usar setas em vez de guias). Os cartões de nutrição A11Y têm ótimas orientações sobre isso para alguns componentes comuns.

Seu PWA pode ser facilmente encontrado na pesquisa.

Por que

Uma das maiores vantagens da Web é a capacidade de descobrir sites e apps pela pesquisa. Na verdade, mais da metade de todo o tráfego do site vem da pesquisa orgânica. É fundamental que os URLs canônicos existam para o conteúdo e que os mecanismos de pesquisa possam indexar seu site para que os usuários encontrem seu PWA. Isso é ainda mais relevante ao adotar a renderização do lado do cliente.

Como

Comece garantindo que cada URL tenha um título descritivo e exclusivo e uma meta descrição. Em seguida, será possível usar o Google Search Console e as auditorias de otimização de mecanismos de pesquisa no Lighthouse para ajudar a depurar e corrigir problemas de descoberta com seu PWA. Também é possível usar as ferramentas para webmasters do Bing ou do Yandex (links em inglês) e incluir dados estruturados usando esquemas do Schema.org no PWA.

O PWA também pode ser usado com mouse, teclado, stylus ou toque.

Por que

Os dispositivos oferecem uma variedade de métodos de entrada, e os usuários devem ser capazes de alternar facilmente entre eles ao usar seu aplicativo. Tão importante quanto isso, os métodos de entrada não precisam depender do tamanho da tela, o que significa que janelas de visualização grandes precisam oferecer suporte a toque e janelas pequenas precisam oferecer suporte a teclados e mouses. Verifique se o aplicativo e todos os recursos dele oferecem suporte ao uso de qualquer método de entrada que o usuário possa usar. Quando apropriado, aprimore as experiências para permitir também controles específicos de entrada (como deslizar para baixo para atualizar).

Como

A API Pointer Events fornece uma interface unificada para trabalhar com várias opções de entrada e é especialmente boa para adicionar suporte à stylus. Para oferecer suporte a toque e teclado, verifique se você está usando os elementos semânticos corretos (fixos, botões, controles de formulário etc.) e não os recrie com HTML não semântico (o que é bom para acessibilidade). Ao incluir interações que são ativadas ao passar o cursor, verifique se elas também podem ser ativadas com um clique ou um toque.

Ao pedir permissão para usar APIs avançadas, forneça contexto e pergunte apenas quando a API for necessária.

Por que

As APIs que acionam uma solicitação de permissão, como notificações, geolocalização e credenciais, são intencionalmente projetadas para serem prejudiciais ao usuário, porque tendem a estar relacionadas a funcionalidades poderosas que exigem ativação. Acionamento dessas solicitações sem mais contexto, como no carregamento de página, diminui a probabilidade de os usuários aceitarem essas permissões e aumenta a probabilidade de desconfiar que elas terão no futuro. Em vez disso, só acione essas solicitações depois de fornecer uma justificativa contextualizada para o usuário por que você precisa dessa permissão.

Como

O artigo Permissão UX e o artigo The Right Ways to Ask Users for Permissions (em inglês) do UX Planet são bons recursos para entender como criar solicitações de permissão que, embora focadas em dispositivos móveis, se apliquem a todos os PWAs.

Manter sua base de código íntegra facilita o cumprimento das suas metas e a entrega de novos recursos.

Por que

Criar um aplicativo da Web moderno envolve muitos fatores. Manter o aplicativo atualizado e a base de código íntegra facilita o fornecimento de novos recursos que atendem às outras metas estabelecidas nesta lista de verificação.

Como

Há uma série de verificações de alta prioridade para garantir uma base de código íntegra: evitar o uso de bibliotecas com vulnerabilidades conhecidas, garantir que você não esteja usando APIs descontinuadas, remover antipadrões da Web da base de código (como usar document.write() ou ter listeners de eventos de rolagem não passivos) e até mesmo programar defensivamente para garantir que o PWA não falhe se análises ou outras bibliotecas de terceiros falharem ao carregar. Considere exigir análise de código estático, como inspeção e testes automatizados, em vários navegadores e canais de lançamento. Essas técnicas podem ajudar a detectar erros antes que eles cheguem à produção.