Primeiras etapas
Os Progressive Web Apps ainda são sites, com recursos e funções aprimorados. Elas não são vinculadas a uma pilha de tecnologia específica, e você pode começar do zero com um novo site ou atualizar o existente sem uma revisão completa. Neste guia, você aprenderá a criar uma boa implementação do padrão PWA. Aqui estão algumas estratégias para você começar:
Torne-o instalável
Comece aos poucos! Essa abordagem inclui começar com um arquivo de manifesto básico, uma página off-line simples e um service worker para exibir a página off-line e armazenar em cache alguns CSS e JavaScript essenciais. Graças ao armazenamento em cache essencial de CSS e JavaScript, você prepara seu app da Web existente para funcionar off-line e, ao mesmo tempo, melhora o desempenho.
Focar em um recurso
Escolha um novo recurso, como notificações push ou gerenciamento de arquivos, que terá um impacto significativo nos seus usuários ou na sua empresa. Isso vai permitir que você acesse o pool de PWA sem fazer muitas alterações de uma só vez.
Criar uma versão simples
Use uma seção existente do seu aplicativo ou a jornada de um usuário específica, como a reprodução de vídeo ou o acesso a um cartão de embarque, e faça com que ela funcione como um PWA que prioriza o modo off-line, independente ou no contexto. Isso possibilita um experimento de baixo risco que permite repensar a experiência dos usuários com PWAs.
Começar do zero
Se você está passando por uma reformulação do seu site ou pode começar do zero, essa estratégia faz muito sentido. Ele permite criar padrões de design de PWA mais facilmente do que outras estratégias e, principalmente, permitir que você aproveite todo o poder dos service workers desde o início.
Fazer upgrade de um app da loja
Com a capacidade de publicar um PWA em app stores, é possível uni-lo em um inicializador de PWA e fazer upload dele para lojas, como a Play Store do Google ou a Windows Store. Se você já tiver um app específico da plataforma, poderá substituí-lo pelo PWA publicado na loja.
Com essa abordagem, os usuários atuais recebem um upgrade das experiências para o PWA, e os novos usuários ainda podem usar ou instalar o PWA no navegador ou nas app stores. E você terá um app para todos, economizando custos e tempo e melhorando a experiência do usuário.
Lista de verificação do PWA
Um Progressive Web App é um site, o que leva à pergunta: quando ele se torna um App Web Progressivo? A resposta não é tão simples, já que o conceito de PWA não se refere a uma tecnologia ou pilha específica. Em vez disso, o PWA é um padrão que inclui vários componentes técnicos.
Embora não haja regras exclusivas entre todos os navegadores, há um conjunto de recomendações, chamado de Lista de verificação para Progressive Web App, para ajudar você a criar um PWA que os usuários vão adorar.
Principais requisitos
Como os PWAs abrangem todos os dispositivos, desde dispositivos móveis até computadores, a lista de verificação principal dos Progressive Web App Checklist aborda o que você precisa fazer para tornar seu app instalável e confiável para todos os usuários, independentemente do tamanho da tela ou do tipo de entrada.
Os requisitos principais são:
Começa rápido, continua rápido
O desempenho desempenha um papel significativo no sucesso de qualquer experiência on-line, pois 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.
Funciona em qualquer navegador
Progressive Web Apps são apps da Web primeiro, o que significa que eles precisam funcionar em todos os navegadores, não apenas em um deles. No entanto, a experiência não precisa ser idêntica em todos os navegadores. Pode haver recursos que não são compatíveis com um navegador, com um substituto para garantir uma boa experiência.
Responsivo para qualquer tamanho de tela
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.
Fornece uma página off-line personalizada
Quando os usuários estão off-line, mantê-los no PWA proporciona uma experiência mais integrada e semelhante à do navegador do que voltar para a página off-line padrão do navegador.
Pode ser instalado
Os usuários que instalam ou adicionam apps à tela inicial tendem a interagir mais com esses apps. Quando o PWA é instalado, ele aproveita mais recursos para melhorar a experiência do usuário.
Características ideais do PWA
Para criar um Progressive Web App realmente ótimo, um que tenha a aparência de um app de ponta, você precisa de mais do que apenas a lista de verificação principal. A lista de verificação ideal de Progressive Web App consiste em tornar seu PWA mais eficiente e confiável, aproveitando ao mesmo tempo os recursos que tornam a Web eficiente.
Proporciona uma experiência off-line
Ao permitir que os usuários usem o PWA off-line, você cria uma experiência autêntica semelhante a um app para eles. Para isso, identifique os recursos que não exigem conectividade, para que os usuários possam acessar pelo menos algumas funcionalidades.
É totalmente acessível.
Verifique se todo o conteúdo e as interações do aplicativo são entendidos por leitores de tela, utilizáveis com apenas um teclado, que o foco está indicado e o contraste de cores é forte. Ao tornar seu PWA acessível, você garante que ele possa ser usado por todos.
Usa recursos avançados quando disponíveis
Desde mensagens push, WASM e WebGL, acesso a sistemas de arquivos, seletores de contatos e integração com app stores. As ferramentas para criar PWAs altamente capazes e totalmente integrados estão aqui, permitindo que você crie uma experiência do usuário completa, antes reservada para apps de plataforma, que seus usuários podem levar com eles aonde quer que vá.
Pode ser descoberto por meio de pesquisa
Mais da metade de todo o tráfego do site vem da pesquisa orgânica. É fundamental que os usuários encontrem seu PWA e garanta que os URLs canônicos existam para o conteúdo e que os mecanismos de pesquisa possam indexar seu site.
Funciona com qualquer tipo de entrada
Os usuários devem ser capazes de alternar entre os tipos de entrada durante o uso do aplicativo sem problemas, e os métodos de entrada não devem depender do tamanho da tela.
Fornece contexto para solicitações de permissão
Acione apenas solicitações de permissões, como notificações, geolocalização e credenciais, depois de fornecer uma justificativa no contexto para melhorar as chances de o usuário aceitar as solicitações.
Segue as práticas recomendadas para um código íntegro
Manter seu aplicativo atualizado e a base de código íntegra facilita o envio de novos recursos que atendem às outras metas estabelecidas nesta lista de verificação.