Progressive Web Apps

Um Progressive Web App (PWA) é um app da Web que usa aprimoramento progressivo para oferecer aos usuários uma experiência mais confiável, usa novos recursos para proporcionar uma experiência mais integrada e pode ser instalado. E, por se tratar de um app da Web, ele pode alcançar qualquer pessoa, em qualquer lugar, em qualquer dispositivo e com uma única base de código. Depois de instalado, um PWA se parece com qualquer outro app, especificamente:

  • Ele tem um ícone na tela inicial, na tela de início, no Acesso rápido aos apps ou no menu de início.
  • Ele aparece quando você pesquisa apps no dispositivo.
  • Ele é aberto em uma janela independente, totalmente separada da interface de usuário do navegador.
  • Ele tem acesso a níveis mais altos de integração com o SO, por exemplo, processamento de URL ou personalização da barra de título.
  • Funciona off-line.

A plataforma da Web

A Web é uma plataforma incrível. A combinação de universalidade entre dispositivos e sistemas operacionais, o modelo de segurança centrado no usuário e o fato de que nenhuma empresa controla a especificação ou implementação fazem dela uma plataforma poderosa para fornecimento de software.

Combinada com a capacidade de criar links inerentes à Web, é possível pesquisar nela e compartilhar o que você encontrou com qualquer pessoa, em qualquer lugar. Sempre que você acessa um site, ele mostra a versão mais recente que o editor implantou, e sua experiência com esse site pode ser temporária ou permanente, como preferir.

Os aplicativos da Web podem alcançar qualquer pessoa, em qualquer lugar, em qualquer dispositivo com uma única base de código. Para os desenvolvedores, a Web também oferece um mecanismo de implantação transparente e simples. Não é necessário apresentar os materiais em pacotes, revisar conteúdos extras nem atrasos nas atualizações. Os usuários sempre recebem a versão mais recente quando acessam seu app. Com novos recursos e técnicas, um app da Web agora pode permitir que você interaja ou acesse conteúdo mesmo quando estiver off-line, um obstáculo que era impossível de superar há alguns anos.

Apps específicos da plataforma

Os apps específicos da plataforma, em dispositivos móveis e computadores, são conhecidos por serem ricos e confiáveis. Eles estão sempre presentes nas telas iniciais, bases e barras de tarefas. Eles funcionam independentemente da conexão de rede e são iniciados na própria experiência independente. Eles podem ler e gravar arquivos do sistema de arquivos local, acessar hardware conectado por USB, serial ou Bluetooth e interagir com dados armazenados nos dispositivos, como contatos e eventos da agenda. Em apps específicos da plataforma, é possível tirar fotos, tocar músicas listadas na tela inicial ou controlar a reprodução de mídia enquanto estão em outro app. Esses aplicativos parecem fazer parte do dispositivo em que são executados.

Um desafio para apps específicos da plataforma é que eles não são compatíveis com várias plataformas e dispositivos, então não é fácil, se mesmo possível, mover um app Android para iOS ou iOS para Windows ou ChromeOS sem criar um novo app do zero.

Combinando o melhor dos dois mundos

Se você pensar em apps de plataforma e apps da Web em termos de recursos e alcance, os apps de plataforma representam o melhor dos recursos, enquanto os apps da Web representam o melhor do alcance. Os Progressive Web Apps estão na interseção dos recursos dos aplicativos de plataforma com o alcance dos aplicativos da Web. Um Progressive Web App inclui recursos dos dois mundos.

Web

  • Vinculabilidade
  • Acessível por padrão
  • Onipresente
  • Fácil de implantar
  • Fácil de atualizar
  • Todos podem publicar

Apps de plataforma

  • Compatível com off-line
  • Alto desempenho
  • Integração de dispositivos
  • Experiência independente
  • Ícone de instalação
  • Recursos avançados e confiáveis

A adoção tem benefícios

O Hulu, um serviço de streaming de vídeo nos EUA, criou uma versão do App Web Progressivo da experiência para substituir os apps para computador, que tinham avaliações ruins de usuários e uso inadequado. Como compartilhado no Google I/O 2019, um desenvolvedor conseguiu pesquisar e implementar essa experiência no aplicativo da Web em duas semanas.

Em cinco meses, 96% dos usuários legados do app adotaram a PWA, com um aumento de 27% nas visitas recorrentes e 5,5% no engajamento. Como estão no acesso rápido e nas barras de tarefas, é mais fácil retornar aos PWA do que se eles estivessem em uma guia.

A JD.ID, uma plataforma de e-commerce na Indonésia que oferece serviços de entrega de muitos produtos, queria expandir sua presença on-line se concentrando na performance e em uma experiência sólida independente da rede para o PWA. Com essa experiência aprimorada, a taxa de conversão geral para dispositivos móveis aumentou 53%, 200% para usuários instalados e 26% para usuários ativos diários.

O Clipchamp é um editor de vídeo on-line para computadores e navegadores que permite que qualquer pessoa conte histórias que valem a pena compartilhar. Eles tiveram uma retenção de usuários 9% maior com o PWA em comparação com os usuários padrão de apps para computador e notaram um aumento de 97% nas instalações de PWA a uma taxa de 97% a cada mês nos primeiros cinco meses de lançamento.

O Gravit Designer da Corel Corporation é uma ferramenta de design vetorial poderosa para computadores que atende dezenas de milhares de usuários ativos por dia que exigem um software de ilustração vetorial acessível, acessível e acessível. Desde que a opção de instalação foi adicionada, os usuários do PWA são 24% mais ativos, o PWA é responsável por 31% mais usuários recorrentes e os usuários do PWA têm 2,5 vezes mais chances de comprar o Gravit Designer PRO em comparação com outras plataformas e opções de instalação.

A mudança no streaming

Um ótimo exemplo do poder dos Progressive Web Apps é o setor de plataformas de streaming, incluindo jogos em nuvem e computação remota. Desde 2021, a maioria dos provedores de jogos em nuvem lançou apps da Web progressivo, permitindo que você jogue jogos de console em qualquer dispositivo e apenas com um navegador ou uma instalação de PWA: iPhone, Android, iPad, laptops, Macs ou PCs. Amazon Luna, Microsoft Xbox Cloud Gaming, Facebook Gaming, Google Stadia, Nvidia GeForce Now e BlueStacks X oferecem soluções de jogos em nuvem pelo navegador como PWA. Todos eles oferecem uma ótima experiência com desempenho próximo ao nativo em todas as plataformas, graças a tecnologias da Web, como WebRTC, WebAssembly e APIs GamePad.

Desafios

Depois de abordar as vantagens de usar a plataforma da Web para publicar PWAs, é importante conhecer os desafios que você pode enfrentar.

Compatibilidade com vários navegadores

A Apple é uma empresa crucial para o mundo de vários dispositivos, possuindo iOS, iPadOS, macOS e Safari. Embora a Apple nunca tenha usado o termo PWA em público, ela oferece suporte às tecnologias para tornar um PWA instalável e capaz de funcionar off-line desde 2018 no Safari para iPhones e iPads.

No entanto, a implementação das especificações de PWA da Apple não tem muitos recursos de outros navegadores, em particular os que usam o mecanismo Chromium.

No meio, também temos o Firefox e o mecanismo Gecko com implementações que incluem mais especificações de PWA no Android e menos recursos de instalação em computadores.

As limitações incluem a falta de notificações push, APIs de integração (como Web Bluetooth ou WebNFC) e técnicas de promoção de instalação que ajudam os usuários a saber que podem instalar o site atual para ter uma experiência de app. Além disso, há vários bugs com os recursos implementados.

Como em todo desenvolvimento da Web, testar sua experiência em todas as plataformas é obrigatório ao lançar seu PWA e quando uma nova versão importante do navegador ou do SO é lançada. Sempre forneça soluções substitutas ou experiências alternativas quando um recurso não estiver disponível.

Conhecimento sobre PWAs

Como desenvolvedor de PWA, você provavelmente vai encontrar um problema de conscientização, tanto do lado da empresa quanto do usuário. Alguns proprietários de empresas não sabem sobre os PWAs ou têm ideias equivocadas sobre o poder e os desafios dos Progressive Web Apps.

Ao publicar um PWA, seu próximo desafio é garantir que os usuários entendam que o site pode ser instalado, levando a uma experiência de app instalado.

O desafio da instalação é mais significativo em algumas plataformas, como iOS e iPadOS, e, às vezes, designers de UX incluem telas que explicam ao usuário como instalar o app.

Compatibilidade

Não se esqueça de que um app da Web progressivo é apenas um app da Web, portanto, o conteúdo e os serviços são executados em cima de especificações e protocolos padrão. Portanto, uma PWA tecnicamente é executada em todos os lugares em que a Web é executada. Não é necessário que a plataforma seja compatível com nenhuma "especificação de PWA".

No entanto, quando falamos sobre PWA e compatibilidade, normalmente pensamos nos recursos que ultrapassam os limites do navegador e dos contextos somente on-line: instalação de ícones e suporte off-line.

Além do suporte à plataforma Web clássica, vamos verificar o suporte à funcionalidade básica do app, como a instalação de ícones e os recursos off-line.

    97 %

    Navegadores prontos para uso off-line

    88 %

    Os usuários da Web podem instalar um PWA

Dados provenientes do StatCounter e do Can I Use.

Computadores e laptops

Em um mundo de dispositivos multifator, é difícil saber o que é um dispositivo de computador. Ainda assim, pelo menos do ponto de vista do sistema operacional, estes navegadores e lojas são compatíveis com a instalação de PWA e os recursos off-line:

Windows 10 e 11
Google Chrome (a partir da versão 73), Microsoft Edge (a partir da versão 79), Microsoft Store
ChromeOS
navegador Chrome integrado (a partir da versão 72), Play Store (desde a versão 85)
macOS, Linux, e Windows 7 e 8.x
Google Chrome (a partir da versão 73), Microsoft Edge

No vídeo a seguir, o usuário instala um PWA do navegador em um computador de mesa e o acessa como qualquer outro app com a janela independente.

Dispositivos móveis

Falando sobre smartphones e tablets, um Progressive Web App pode ser instalado com recursos off-line usando os seguintes navegadores e app stores:

iOS e iPadOS
Navegadores de terceiros (desde o iOS/iPadOS 16.4), Safari (desde o iOS 11.3), AppStore (desde o iOS/iPadOS 14, com algumas limitações), configuração para dispositivos móveis para distribuição empresarial.
Android
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, navegador Huawei, Baidu, UCWeb, Play Store (a partir da versão 72 com o Google Chrome instalado ou navegadores compatíveis com o TWA), Galaxy Store, iframe do Google Play gerenciado para distribuição empresarial.

No vídeo a seguir, o usuário instala um PWA do navegador em um dispositivo móvel usando a caixa de diálogo do navegador e também o menu Add to Home screen.

Outros dispositivos

Alguns outros dispositivos pequenos oferecem suporte a PWAs, como consoles de jogos (Xbox com a Microsoft Store) ou dispositivos XR (Microsoft Hololens, planos para o Oculus do Facebook). No entanto, o restante dos dispositivos com um navegador geralmente não aceita PWAs, incluindo:

  • Consoles de jogos
  • Smart TVs
  • Smartwatches
  • Carros

Seu PWA sempre vai funcionar no navegador de todos os dispositivos com as limitações específicas deles. Essa capacidade de funcionar em vários dispositivos permite criar jornadas em vários dispositivos, em que o usuário pode iniciar uma tarefa em um dispositivo e concluí-la em outro, com dados sincronizados entre eles, com o mesmo app implantado.

Recursos