Publicando PWAs nas principais lojas de aplicativos: os porquês e comos

Começando com a Google Play Store, um após o outro, o mercado de aplicativos entrou no movimento de receber os Progressive Web Apps (O que é o Progressive Web App?) em sua loja, tornando-se a nova abordagem para entrega de software. Com tudo isso em jogo, seria um desperdício não aproveitar essa tecnologia recém-descoberta para expandir melhor o alcance do seu aplicativo.

Para dar a você uma perspectiva mais clara de todo o movimento Progressive Web App, especificamente o processo de publicação, hoje revisaremos o estado atual dos PWAs nos principais mercados de aplicativos, bem como como publicar um PWA nessas lojas.

Por que você deve publicar seu Progressive Web App nas principais lojas de aplicativos?

Antigamente, os Progressive Web Apps eram limitados apenas a instalações na web (Adicionar à tela inicial). No entanto, com o tempo, mercados de aplicativos como Google e Microsoft começaram a reconhecer o potencial dos PWAs e tomaram iniciativas para avançar na adoção dessa tecnologia no futuro.

Se você tem recursos e fundos, nossa opinião profissional é que você deve ir em frente - torne seu PWA omni-plataforma. Afinal, grandes marcas como Twitter, Uber e Spotify entraram na onda e foram recebidas com resultados estelares, provando que essa tecnologia de fato não é tudo marketing e vale a pena considerar. A própria Microsoft deu um passo adiante ao planejar fazer dos Progressive Web Apps a principal experiência no Windows.

 Leitura recomendada : 12 melhores exemplos de aplicativos da Web progressivos.

Como publicar seu PWA nas principais lojas de aplicativos

Loja de aplicativos do Google

Sendo o precursor do movimento PWA, não seria surpreendente ver a Google Play Store de braços abertos para Progressive Web Apps. Com o TWA (Trusted Web Activities) instalado, todas as sequências de publicação ficaram muito mais fáceis e devem terminar em pouco tempo.

Requisitos

• Android Studio instalado
• Uma conta de desenvolvedor do Google
• Um Progressive Web Apps funcionando e com qualidade verificada.

Etapa 1 : Faça um clone do aplicativo Android TWA Starter e modifique

• Clone o projeto svgomg-twa com o seguinte comando:

 git clone https://github.com/GoogleChromeLabs/svgomg-twa.git

• Importe o projeto para o Android Studio usando File > New > Import Project .

Em /app/build.gradle , modifique twaManifest para sua finalidade. Os detalhes sobre o que e como alterar podem ser encontrados no arquivo build.gradle.

Observação: o applicationId deve seguir o formato <com>.<your-brand>.<your-app>

Após as modificações, seu /app/build.gradle deve ficar assim:

 def twaManifesto = [
    applicationId: 'com.simicart.app',
    hostName: 'simicart.com', // O domínio que está sendo aberto no TWA.
    launchUrl: '/', // O caminho inicial para o TWA. Deve ser relativo ao domínio.
    name: 'SimiCart PWA', // O nome mostrado no Android Launcher.
    themeColor: '#ED8A19', // A cor usada para a barra de status.
    navigationColor: '#303F9F', // A cor usada para a barra de navegação.
    backgroundColor: '#bababa', // A cor usada para o fundo da tela inicial.
    enableNotifications: false, // Defina como true para habilitar a delegação de notificação.
    // Adicione atalhos para seu aplicativo aqui. Cada atalho deve incluir os seguintes campos:
    // - name: String que aparecerá no atalho.
    // - short_name: string mais curta usada if |name| é muito longo.
    // - url: Caminho absoluto da URL para iniciar o aplicativo (por exemplo, '/create').
    // - icon: Nome do recurso na pasta drawable para usar como ícone.
    atalhos: [
        nome: 'Abrir SimiCart', 
        short_name: 'Abrir', 
        URL: '/abrir', 
        ícone: 'splash'
    ]
,
    // A duração da animação de fade out em milissegundos a ser reproduzida ao remover a tela inicial.
    splashScreenFadeOutDuração: 300
]

Etapa 2 : criar um armazenamento de chaves e verificar o APK

Os armazenamentos de chaves ou chaves de upload são necessários para a verificação do seu APK. Para criar um armazenamento de chaves, inicie o Android Studio e navegue até Build → Generate Signed Bundle/APK e preencha os campos obrigatórios.

Depois de criar um Key Store, você precisará extrair a impressão digital SHA256 dele usando os seguintes comandos:

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 Tipo de entrada: PrivateKeyEntry
...
Impressões digitais do certificado:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: ? copie esta linha

Etapa 3 : configurar o link de ativos digitais

Um link de ativo digital é necessário para a verificação de propriedade do seu conteúdo da web, que pode ser usado posteriormente para vincular ao seu APK.

Gerar um arquivo de declaração

Use a impressão digital SHA256 que você extraiu anteriormente e gere um arquivo de instrução com o Gerador de lista de instruções e o testador.

Depois de gerar um arquivo de extrato, a próxima etapa é criar um arquivo de acesso público que contenha informações da Ferramenta de Ativo Digital. O arquivo deve ser colocado em seu host e neste local:

 .well-known/assetlinks.json

A localização desse arquivo depende do processo de compilação do seu aplicativo Web, mas normalmente deve estar nos diretórios implantados, ou seja, os diretórios 'public' ou 'dist'.

Quando tudo estiver pronto, a próxima e última etapa a ser executada é implantar seu aplicativo.

Etapa 4 : criar e lançar seu aplicativo no Google Play

Com o Google Play Console nas configurações padrão, vá para Todos os aplicativos → Criar aplicativo .

Criar um teste interno

Navegue até Versões do aplicativo → Faixa de teste interna → Criar versão para criar uma Faixa de teste interna do seu aplicativo.

Crie um APK assinado

No Android Studio, navegue até Build → Generate Signed Bundle/APK e use o armazenamento de chaves SHA256 que extraímos anteriormente. Certifique-se de marcar ambas as caixas de versão de assinatura.

Carregar o APK

Você está agora no final deste processo. Para fazer o upload do seu apk, basta acessar a Google Play Store, App Releases → Internal Test Track → Edit Release .

Não se esqueça de preencher a listagem da loja

Todos os campos obrigatórios devem ser preenchidos antes que seu aplicativo possa ser listado para o processo de revisão. Esses campos são necessários para informações cruciais, como detalhes de preços, listagem de lojas, classificação de conteúdo etc. Quando esse processo for concluído, você verá quatro marcas de seleção verdes ️ indicando que todos os campos obrigatórios foram preenchidos.

E é isso. Seu PWA agora está pronto para revisão e estará pronto para download público em algumas horas.

Loja de aplicativos da Apple

De todos os principais mercados de aplicativos, a Apple App Store pode ser o menos acolhedora ou até mesmo hostil aos PWAs, o que é meio irônico, considerando que Steve Jobs foi o primeiro a imaginar um futuro cheio de Progressive Web Apps.

O mecanismo completo do Safari está dentro do iPhone. E assim, você pode escrever incríveis aplicativos Web 2.0 e Ajax que se parecem e se comportam exatamente como aplicativos no iPhone. E esses aplicativos podem se integrar perfeitamente aos serviços do iPhone. Eles podem fazer uma ligação, enviar um e-mail, procurar um local no Google Maps.

Steve Jobs, 2007

No iOS, os PWAs são severamente limitados em termos de recursos. Não há suporte para notificações por push, o manifesto do aplicativo da Web é suportado apenas parcialmente e novos recursos, como a Nova Galeria de Aplicativos, geralmente ignoram os PWAs por completo. E por causa disso, faz sentido que o PWA não seja bem-vindo na Apple App Store, conforme as Diretrizes de revisão da App Store da Apple:

Seu aplicativo deve incluir recursos, conteúdo e interface do usuário que o elevem além de um site reempacotado . Se seu aplicativo não for particularmente útil, exclusivo ou “semelhante a um aplicativo”, ele não pertence à App Store.

Funcionalidade mínima, diretrizes de revisão da App Store

Como a Apple se esforça ao máximo para prejudicar todos os recursos do PWA, qualquer esforço para publicar um PWA - mesmo quando com um wrapper de aplicativo nativo como o Cordova - é inútil. Por enquanto, só podemos esperar que as futuras versões do iOS tragam melhor suporte ao PWA, mas, a partir de agora, a publicação do PWA na Apple App Store não é possível , e é por isso que você deve considerar uma abordagem de aplicativo nativo se a maioria do seu público-alvo usa dispositivos baseados em iOS.

 Leia mais: PWAs no iOS 14 Beta: mudanças sutis

Microsoft Store

Conforme declarado em nosso artigo sobre Windows 10 e PWA: O futuro da entrega de software, a Microsoft vem estabelecendo as bases para uma loja Progressive Web App há algum tempo e está se tornando uma realidade passo a passo. Os PWAs de marcas mais populares já estão se espalhando por todos os mercados de aplicativos e com resultados exemplares para outros seguirem.

Como o Google, a Microsoft dá as boas- vindas aos PWAs e, além disso, planeja popularizar e substituir aplicativos UWP nativos por aplicativos híbridos - um tipo de Progressive Web Apps envolto em shells nativos.

Em teoria, publicar seu Progressive Web App na Microsoft Store não deve exigir nenhum esforço, pois foi originalmente planejado para ser um processo automático que usa o Bing como um mecanismo de rastreamento para PWAs de qualidade. No entanto, a coisa toda ainda está em um estágio experimental e não funciona tão efetivamente quanto o planejado, e é por isso que você precisa enviar manualmente seu PWA como um pacote de aplicativos do Windows (.appx). Mas não se preocupe, o processo não é tão estressante quanto uma certa loja de aplicativos.

Requisitos

• Uma conta do Windows Dev Center
• Construtor de PWA
• Um Progressive Web App funcional e com qualidade verificada que atende às políticas da loja

Etapa 1 : reserve um nome para seu aplicativo

A primeira etapa na publicação de um aplicativo na Microsoft Store é reservar um nome. Caso você esteja se perguntando o que aconteceria se um rapaz louco decidisse reservar todos os nomes existentes: não se preocupe, a reserva do nome expirará após 3 meses.

Preencha os campos obrigatórios e anote-os em algum lugar, pois essas informações serão solicitadas posteriormente.

Etapa 2: gerar um AppX usando o PWABuilder

Como mencionado acima, o PWABuilder é uma ótima maneira de gerar um pacote funcional publicável nos principais mercados de aplicativos. É uma das primeiras ferramentas no mercado que foi desenvolvida pela Microsoft exclusivamente com o propósito de levar adiante a adoção do PWA.

Gerar manifesto

No PWABuilder, insira a URL do seu PWA e clique em Começar . Observe que esta etapa é crucial, pois identifica e/ou preenche automaticamente as informações ausentes em seu manifest.json , o que geralmente é necessário para PWAs que não são criados especificamente para a Microsoft Store.

 Leitura recomendada: Manifesto PWA: Criando seu manifesto de aplicativo da Web da maneira mais fácil

A próxima etapa é criar service workers para o seu PWA, mas supondo que o seu seja um Progressive Web App típico no qual os service workers já estejam integrados, essa etapa será ignorada e passaremos para a etapa final — obter seu pacote .appx.

Gerar AppX

Ao clicar em gerar AppX, você deverá ver algo como este pop-up:

É aqui que as informações anteriores podem ser úteis. Preencha os campos e uma caixa de download contendo o pacote .appx será exibida. Baixe-o e agora você estará pronto para publicar seu PWA na Microsoft Store.

Caso você queira testar seu PWA antes de publicá-lo na loja, sempre há a opção de testá-lo no Windows ativando Modo de Desenvolvedor → Clique com o botão direito em test_install.ps1 → Executar com PowerShell . Fazer isso adicionará automaticamente seu PWA à área de trabalho e ao menu Iniciar, a partir do qual ele poderá ser iniciado e testado para ver se tudo está funcionando corretamente.

Etapa 3: enviar seu pacote de aplicativo para a Microsoft Store

Para publicar seu PWA na Microsoft Store, você precisará navegar até a pasta do pacote dentro do .zip que você baixou anteriormente. Nesta pasta está tudo o que você precisa para publicar na Microsoft Store. Para esclarecimentos, esta pasta não contém nenhum código seu, pois serve apenas como um mecanismo de direcionamento para seu PWA na Web e outros metadados de armazenamento não relacionados.

Depois de localizar o windows.appx, vá até a página de envio em seu Dev Center e preencha as informações necessárias:

Após concluir todas as etapas e preencher todos os campos obrigatórios, o botão “ Enviar para a Loja ” deve acender, indicando que seu PWA está pronto para o processo de revisão. Levará de uma hora a vários dias para que esse processo seja concluído; quando terminar, seu PWA será certificado e estará disponível para downloads públicos/privados (depende das suas configurações de disponibilidade no Dev Center).

Conclusão

Depois de tudo isso, talvez você ainda esteja se perguntando por que deveria construir um Progressive Web App – muito menos passar por todo esse trabalho para publicar um. E você está certo em fazer perguntas tão fundamentais.

O Progressive Web App está, passo a passo, provando ser o futuro da entrega de software e o próximo passo natural na evolução da tecnologia da Web. A partir de agora, já é amplamente utilizado em todo o mundo do comércio eletrônico, onde a experiência unificada e envolvente em todos os dispositivos é a chave para altas conversões.

Sendo uma nova tecnologia, já é difícil o suficiente construir um Progressive Web App como está. Com o SimiCart, você não precisa mais se preocupar com as fases de desenvolvimento do seu Magento PWA , pois fornecemos uma solução completa e com o melhor custo-benefício do mercado.