Como publicar um PWA na App Store e no Google Play

Um aplicativo da web progressivo (PWA) é um site que pode ser instalado a partir do navegador. Isso é útil, mas a maioria dos clientes ainda procura aplicativos na App Store e no Google Play. Se o seu PWA já funciona bem em um telefone, você pode empacotá-lo para ambas as lojas sem reescrevê-lo.

O problema é que as duas lojas tratam os aplicativos baseados na web de maneira muito diferente. O Google tem uma rota oficial para PWAs. A Apple não, e sua equipe de análise espera mais do que um site reformulado. Este guia cobre as opções realistas, as regras importantes e uma lista de verificação para obter um PWA por meio de revisão.

Por que publicar um PWA nas lojas de aplicativos?

Um PWA já oferece aos usuários um prompt de instalação, um ícone na tela inicial e uma experiência em tela cheia. As listagens da loja adicionam coisas que uma instalação do navegador não pode:

• Discovery. As pessoas pesquisam nas lojas produtos como o seu, e uma listagem fornece uma página classificada lá.
• Trust. Uma página "Detalhes do app" com avaliações e um editor verificado é um sinal mais forte do que "Adicionar à tela inicial" em um site.
• Instalação confiável. No iPhone, a instalação de um PWA a partir do navegador fica oculta no menu de compartilhamento. A instalação da loja leva um toque.
• Canais nativos. Um aplicativo empacotado pode usar notificações push e links diretos por meio da plataforma, em vez de depender do que o navegador expõe.

Nada disso significa que você deva abandonar o PWA. O site continua sendo o produto; os aplicativos da loja são outra forma de alcançá-lo. Para conhecer as vantagens e desvantagens entre um PWA, um aplicativo WebView e uma versão totalmente nativa, leia PWA vs nativo vs WebView.

Opção 1: atividade confiável na Web para Google Play

O Google Play oferece suporte a PWAs por meio de um Atividade confiável na Web (TWA). Um TWA é um aplicativo Android que abre seu PWA em tela inteira usando o navegador Chrome instalado pelo usuário, em vez de um WebView incorporado. De acordo com a documentação do Chrome, o aplicativo e o site se verificam com Digital Asset Links, o que comprova que ambos vêm do mesmo desenvolvedor.

Ferramentas como Plástico bolha (uma ferramenta de linha de comando) e Construtor PWA gerar e construir o projeto Android para você. As etapas usuais são:

1. Certifique-se de que seu PWA tenha um manifesto de aplicativo da web válido, um URL inicial acessível por HTTPS e ícones.
2. Gere o projeto Android com Bubblewrap ou PWABuilder.
3. Publique um arquivo Digital Asset Links em seu domínio para que o aplicativo possa ser verificado.
4. Crie um Android App Bundle assinado e faça upload dele para o Google Play Console.

Coisas que você deve saber antes de escolher esta rota:

• A experiência depende do Chrome estar instalado e atualizado no dispositivo. Se a verificação falhar ou o Chrome não estiver disponível, os usuários poderão ver uma barra de ferramentas do navegador.
• O aplicativo host não pode ler diretamente o conteúdo da web, os cookies ou o armazenamento local. A comunicação com código nativo é limitada.
• Você ainda precisa de uma conta do Play Console, de uma listagem da loja, de uma política de privacidade e dos requisitos de teste que o Google aplica a novas contas pessoais. Nosso guia de publicação percorre-os, incluindo a regra do teste fechado.

Um TWA é uma boa opção se você se sente confortável com ferramentas de linha de comando e só precisa do Android.

Opção 2: wrapper DIY para iOS

A Apple não tem equivalente TWA. Para colocar um PWA na App Store, você precisa de um aplicativo iOS nativo que o carregue, normalmente por meio do WKWebView. A versão DIY fica assim:

1. Crie um projeto Xcode em um Mac.
2. Carregue seu PWA em uma visualização da web e adicione ícones, uma tela inicial e navegação.
3. Inscreva-se no Apple Developer Program e registre um ID de pacote.
4. Assine, arquive e carregue a compilação no App Store Connect por meio do conjunto de ferramentas da Apple.
5. Teste com TestFlight, preencha a listagem e as respostas de privacidade e envie para revisão.

O PWABuilder pode gerar um projeto iOS como ponto de partida, mas você ainda o abre e assina, o que requer um Mac e Xcode. Cobrimos esse processo com mais profundidade em como converter um site em um aplicativo iOS sem Xcode ou Mac.

A questão maior não é técnica. É se o aplicativo será aceito, que abordaremos a seguir.

O que a Apple espera de um wrapper PWA

As Diretrizes de Revisão de Aplicativos da Apple dizem que um aplicativo “deve incluir recursos, conteúdo e UI que o elevem além de um site reembalado” (diretriz 4.2). Um PWA carregado em uma visualização simples da web é exatamente o tipo de envio que a diretriz visa.

Outros pontos que vale a pena conhecer:

• Diretriz 4.2.2 diz que, além dos catálogos, os aplicativos não devem ser principalmente materiais de marketing, recortes da web, agregadores de conteúdo ou uma coleção de links.
• Diretriz 2.1 espera uma versão final funcional e credenciais de demonstração se seu aplicativo tiver um login.
• Diretriz 4.2.6 diz que os aplicativos criados a partir de um modelo comercializado ou serviço de geração de aplicativos são rejeitados, a menos que sejam enviados diretamente pelo fornecedor do conteúdo do aplicativo. Publique com sua própria conta de desenvolvedor, não com a de um fornecedor.

Não existe uma fórmula que garanta a aprovação e nenhuma ferramenta pode prometê-la. O que você pode fazer é dar aos revisores um motivo para ver um aplicativo real: navegação nativa, notificações push que os usuários aceitam, links diretos funcionais e um carregamento sofisticado e uma experiência off-line. Para um passo a passo completo das regras de revisão, consulte Diretriz 4.2 da Apple: a Apple rejeitará um aplicativo de site?.

Opção 3: Use um conversor para ambas as lojas

Um conversor como o SiteTo.App faz o empacotamento para ambas as plataformas a partir do seu URL. Você insere o endereço do seu site, define o nome do aplicativo, ícone, cores, tela inicial e navegação, visualiza-o em seu telefone e solicita uma construção.

Com base em como o produto funciona hoje:

• As compilações do Android podem ser produzidas como APK ou AAB.
• As compilações do iOS são assinadas com sua conta de desenvolvedor da Apple e entregues ao TestFlight em sua conta do App Store Connect, e você as retira de lá para enviá-las para revisão.
• As notificações push são configuradas através do Firebase.
• O site continua sendo a fonte da verdade, portanto, as alterações enviadas na web alcançam os usuários do aplicativo sem um novo lançamento na loja.
• O preço é único de US$ 29 para Android, US$ 79 para iOS ou US$ 99 para ambos. As taxas das contas de desenvolvedor da Apple e do Google são separadas.

SiteTo.App trata seu PWA como um site: ele carrega sua URL pública dentro do aplicativo. O comportamento dos recursos específicos do PWA, como cache do service-worker, páginas off-line ou prompt de instalação da Web dentro do shell do aplicativo, depende da visualização da Web que o aplicativo usa, portanto, teste-os na visualização em vez de presumir. As notificações push no aplicativo são configuradas por meio do Firebase, e não pelo web push do seu PWA.

Você pode comparar conversores em nosso melhor guia de conversores de site para aplicativoe veja o lado do custo em quanto custa transformar um site em um aplicativo. Se o seu site for executado em uma plataforma específica, o páginas da plataforma explique o que verificar para essa pilha.

Qual caminho você deve seguir?

• Apenas Android, confortável com a linha de comando: um TWA por meio de Bubblewrap ou PWABuilder é um bom caminho oficial.
• iOS e você tem um Mac e um desenvolvedor familiarizado com o Xcode: um wrapper DIY oferece controle total, mas você possui cada reconstrução e atualizações do SDK.
• Ambas as lojas, sem possuir projetos nativos: um conversor exige o menor esforço e você mantém o site como produto.
• Um PWA que depende muito do comportamento offline ou da sincronização em segundo plano: teste cuidadosamente antes de se comprometer, seja qual for a rota que você escolher.

Prepare seu PWA antes de empacotá-lo

Uma listagem de loja expõe pontos fracos que uma guia do navegador esconde. Antes de embalar:

• Verifique se cada tela responde e pode ser usada com toque e gesto de retorno do sistema.
• Certifique-se de que o login, o checkout e os uploads de arquivos funcionem em uma visualização incorporada, incluindo qualquer autenticação de terceiros que abra um pop-up ou redirecionamento.
• Adicione uma página de política de privacidade e uma página de suporte que podem ser acessadas sem login.
• Decida quais links externos abrem no aplicativo e quais abrem no navegador.
• Lide com estados off-line e de erro com uma mensagem clara em vez de uma tela em branco.
• Remova qualquer mensagem que solicite aos usuários que “instalem este aplicativo”, pois já o fizeram.

O lista de verificação de prontidão e planejador de custos pode ajudá-lo a identificar lacunas antes de construir.

Listagem da loja e lista de verificação de revisão

• As contas de desenvolvedor pertencem à sua empresa, não a um contratante.
• O nome, o ícone e as capturas de tela do aplicativo mostram o aplicativo real e correspondem à versão.
• A política de privacidade e as respostas de privacidade da loja cobrem o site, análises e ferramentas de pagamento carregadas no aplicativo.
• As credenciais do revisor funcionam e estão incluídas nas notas de revisão.
• O aplicativo agrega valor nativo além do site, como navegação, notificações ou links diretos.
• Ambas as compilações foram testadas em dispositivos reais em uma nova instalação.
• Alguém é designado para assistir às mensagens de revisão e responder com detalhes.

Perguntas frequentes

Posso publicar um PWA na App Store sem um wrapper nativo?

Não. A App Store distribui apenas binários de aplicativos nativos. Um PWA deve ser empacotado dentro de um, e o aplicativo empacotado deve atender às diretrizes da Apple.

Um PWA é permitido no Google Play?

Sim. O Google oferece suporte a PWAs por meio de atividades da Web confiáveis, e você também pode publicar um aplicativo wrapper.

Meu PWA continuará funcionando offline dentro do aplicativo?

Depende da rota e da visualização da web. Teste o comportamento off-line na visualização ou em uma compilação de teste, em vez de presumir que ele é transferido.

Eu preciso de um Mac?

Para uma construção DIY iOS, sim. Um conversor cria o aplicativo para você, embora você ainda precise de uma conta de desenvolvedor da Apple para o App Store Connect.

A publicação garante aprovação?

Não. A Apple e o Google decidem cada envio. Uma listagem melhor e uma experiência mais parecida com um aplicativo melhoram suas chances, mas não podem garantir o resultado.

Próximas etapas

Se o seu PWA estiver pronto, visualize-o como um aplicativo com SiteTo.App e teste-o em seu próprio telefone antes de decidir uma rota. Quando estiver satisfeito, revise preços e siga o criar e publicar guia.