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, novos recursos para proporcionar uma experiência mais integrada e pode ser instalado. E, por ser um app da Web, ele pode alcançar qualquer pessoa, em qualquer lugar e em qualquer dispositivo, com uma única base de código. Depois de instalado, um PWA é parecido com qualquer outro app, mais especificamente:

  • Ele tem um ícone na tela inicial, no Acesso rápido aos apps, na barra de inicialização ou no menu "Iniciar".
  • Ele aparece quando você pesquisa apps no dispositivo.
  • Ela é aberta em uma janela autônoma, totalmente separada da interface de usuário de um navegador.
  • Ele tem acesso a níveis mais altos de integração com o SO, como gerenciamento de URLs ou personalização da barra de título.
  • Funciona off-line.

A plataforma da Web

A web é uma plataforma incrível. Sua 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 a implementação faz dela uma plataforma poderosa para fornecer software.

Combinado com a capacidade de links inerentes da Web, é possível pesquisar nela e compartilhar o que você encontrou com qualquer pessoa, em qualquer lugar. Sempre que você acessa um site, é a versão mais recente implantada pelo editor. Sua experiência com esse site pode ser temporária ou permanente, como você quiser.

Os aplicativos da Web podem alcançar qualquer pessoa, em qualquer lugar e em qualquer dispositivo com uma única base de código. Para desenvolvedores, a web também oferece um mecanismo de implantação transparente e direto. Eles não precisam de empacotamento, revisão do conteúdo 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 veja conteúdo mesmo off-line, um obstáculo impossível de superar há alguns anos.

Apps específicos da plataforma

Apps específicos da plataforma, tanto para computadores quanto para dispositivos móveis, são conhecidos por serem avançados e confiáveis. Eles estão sempre presentes nas telas iniciais, nas docks e nas 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 no sistema de arquivos local, acessar hardwares conectados via 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 estiver em outro app. Esses apps parecem fazer parte do dispositivo em que são executados.

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

O melhor dos dois mundos

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

Web

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

Apps de plataforma

  • Recurso off-line
  • Alto desempenho
  • Integração de dispositivos
  • Experiência independente
  • Ícone de instalação
  • Rich e confiável

A adoção tem vantagens

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 pouco uso. Conforme compartilhado no Google I/O 2019, um desenvolvedor pode pesquisar e implementar essa experiência do aplicativo da Web existente em duas semanas.

Em cinco meses, 96% dos usuários de apps legados adotaram o PWA, com um aumento de 27% nas visitas de retorno e de 5,5% no engajamento. Por estarem no acesso rápido e nas barras de tarefas, é mais fácil retornar aos PWAs do que se estivessem apenas em uma guia.

A JD.ID, uma plataforma de e-commerce da Indonésia que presta serviços de entrega para muitos produtos, queria expandir a presença on-line da empresa se concentrando no desempenho e em uma experiência sólida e independente da rede para o PWA. Com essa experiência aprimorada, a taxa geral de conversão em dispositivos móveis aumentou em 53% e 200% para os usuários com instalação, e o número de usuários ativos por dia em 26%.

O Clipchamp é um editor de vídeos on-line no navegador e para computadores que permite a qualquer pessoa contar histórias que valem a pena compartilhar por vídeo. A empresa teve um aumento de 9% na retenção de usuários com o PWA em comparação com os usuários do app padrão para computador. Além disso, as instalações do PWA aumentaram a uma taxa de 97% a cada mês nos primeiros cinco meses.

O Gravit Designer da Corel Corporation é uma ferramenta de design vetorial poderosa, para computadores e que atende dezenas de milhares de usuários ativos diariamente que exigem um software de ilustração vetorial avançado, acessível e acessível. Desde que o PWA foi adicionado como opção de instalação para os usuários, eles notaram que os usuários do PWA eram 24% mais ativos, os PWA eram 31% mais recorrentes, e os usuários do PWA eram 2,5 vezes mais propensos a comprar o Gravit Designer PRO, em comparação com outras plataformas e opções de instalação.

O divisor de águas do streaming

Um grande 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 Progressive Web Apps, permitindo que você jogue jogos de console em qualquer dispositivo e apenas em um navegador ou com um 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 no navegador como PWAs. Todos eles oferecem uma ótima experiência, com desempenho próximo ao nativo em todas as plataformas, graças a tecnologias da Web, como as APIs WebRTC, WebAssembly e GamePad.

Desafios

Tendo abordado as vantagens de usar a plataforma da Web para publicar PWAs, também é importante estar ciente dos desafios que você pode enfrentar.

Compatibilidade entre navegadores

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

No entanto, a implementação da Apple das especificações de PWA perde muitos recursos de outros navegadores, em especial navegadores com tecnologia do 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 com o app. Além disso, existem vários bugs com recursos implementados.

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

Reconhecimento dos PWAs

Como desenvolvedor de PWA, você provavelmente terá um problema de reconhecimento, tanto do lado da empresa quanto do usuário. Alguns proprietários de empresas não sabem o que são PWAs ou têm dúvidas 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, gerando uma experiência de app instalado.

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

Compatibilidade

É importante lembrar que um App Web Progressivo é apenas um app da Web, portanto, o conteúdo e os serviços são executados com base em especificações e protocolos padrão. Portanto, tecnicamente, um PWA é executado em todos os lugares em que a Web é executada. A plataforma não precisa ser compatível com nenhuma "especificação de PWA".

No entanto, quando se trata de PWA e compatibilidade, normalmente, pensamos sobre os recursos para ultrapassar os limites do navegador e de contextos apenas on-line: instalação de ícones e suporte off-line.

Além do suporte clássico à plataforma da Web, vamos verificar o suporte para funcionalidades básicas do app, como instalação de ícones e 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 posso usar.

Computadores e laptops

Em um mundo de dispositivos multifator, é desafiador saber o que é mais um dispositivo desktop. Ainda assim, pelo menos do ponto de vista do sistema operacional, esses navegadores e repositórios 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 (da versão 79), Microsoft Store
ChromeOS
Navegador Chrome integrado (da versão 72), Play Store (da 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 desktop e o acessa como qualquer outro app com janela independente.

Dispositivos móveis

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

iOS e iPadOS
Safari (desde o iOS 11.3), App Store (desde o iOS/iPadOS 14, com algumas limitações), configuração de dispositivos móveis para distribuição empresarial.
Android
Firefox, Google Chrome, Samsung Internet, Microsoft Edge, Opera, Brave, Huawei Browser, Baidu, UCWeb, Play Store (a partir da versão 72 com o Google Chrome instalado ou navegadores compatíveis com 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 Adicionar à tela inicial.

Outros dispositivos

Outros dispositivos pequenos são compatíveis com PWAs, como consoles de jogos (Xbox com Microsoft Store) ou dispositivos XR (Microsoft Hololens, planos para o Oculus do Facebook). No entanto, o restante dos dispositivos com um navegador normalmente não aceita PWAs, incluindo:

  • Consoles de jogos
  • Smart TVs
  • Smartwatches
  • Carros

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

Recursos