Publicar um PWA na Microsoft Store

Publicar seu PWA (Aplicativo Web Progressivo) na Microsoft Store traz as seguintes vantagens:

Para publicar seu PWA na Microsoft Store, nenhuma alteração de código é necessária. Em vez disso, você cria uma reserva de aplicativo no Microsoft Partner Center, empacota seu PWA usando o PWA Builder e envia seu pacote para a Microsoft Store. As seções a seguir explicam essas etapas.

Veja também:

• Introdução: publicar seu primeiro aplicativo na Microsoft Store

Criar uma reserva de aplicativo

Para enviar seu aplicativo para a Microsoft Store, use o Microsoft Partner Center.

Para criar uma reserva de aplicativo:

1. Antes de criar uma reserva de aplicativo, você deve ter uma conta Microsoft pessoal (não uma conta Microsoft corporativa ou escolar) que esteja inscrita no Programa de Desenvolvedores do Windows.

   1. Se você ainda não tiver uma, crie uma conta pessoal da Microsoft em account.microsoft.com.
   2. Inscreva-se no programa de Desenvolvedores do Windows, seguindo as etapas em Abrir uma conta de desenvolvedor no Partner Center.

2. Depois que sua conta estiver inscrita no programa de desenvolvedor de aplicativos, siga estas etapas para criar uma reserva de aplicativo:

   1. Vá para o painel do Partner Center. Entre com a conta que você inscreveu.
   2. Em Workspaces, selecione Aplicativos e jogos. Os aplicativos e jogos | A página Visão geral é exibida.
   3. Selecione Novo produto>Aplicativo MSIX ou PWA.
   4. Quando solicitado, insira um nome para sua reserva e selecione Reservar nome do produto.

   

3. Para exibir os detalhes do editor para uso na seção Empacotar seu PWA, selecione Gerenciamento de> produtos,Identidade do produto.

   

4. Copie e salve os seguintes valores.

   • ID do Pacote
   • ID do editor
   • Nome de exibição do editor

Empacotar seu PWA para a Store

Agora que você coletou as informações de publicação sobre seu aplicativo, gere um pacote do aplicativo Windows para seu PWA usando o PWA Builder.

Para gerar um pacote do aplicativo:

1. Vá para o PWA Builder.

2. Em Enviar seu PWA para lojas de aplicativos, insira a URL do seu PWA na caixa de texto e clique no botão Iniciar .

   Seu PWA é avaliado para garantir que esteja pronto para armazenamento.

3. Se a avaliação na página do card de relatório do PWABuilder indicar que seu PWA está pronto para ser empacotado, vá para a próxima etapa. Se a avaliação indicar que seu PWA não está pronto para ser empacotado, examine a seção Itens de Ação para ver como melhorar seu PWA:

   

4. Quando seu PWA estiver pronto para ser empacotado, no canto superior direito da página do card de relatório do PWABuilder, clique no botão Package For Stores. Uma caixa de diálogo é aberta, mostrando a mensagem Incrível! Seu PWA está pronto para a loja!.

5. No Windows, clique no botão Gerar Pacote . A caixa de diálogo Opções de Pacote do Windows é aberta.

6. Cole os seguintes valores, que você salvou na seção Criar uma reserva de aplicativo acima:

   • ID do Pacote
   • Nome de exibição do editor
   • ID do editor

   

7. Clique no botão Baixar Pacote para baixar o pacote do Windows.

O download é um .zip arquivo morto que contém um .msixbundle arquivo e um .classic.appxbundle arquivo. Os dois pacotes de aplicativo permitem que seu PWA seja executado em uma ampla variedade de versões do Windows.

Veja também:

• O que é um pacote clássico?
• Empacotamento de pacotes MSIX.

Enviar o pacote do aplicativo para a Microsoft Store

Para enviar seu aplicativo para a Microsoft Store:

1. Vá para o Microsoft Partner Center.

2. Selecione seu aplicativo.

3. Clique no botão Iniciar seu envio .

   

4. Quando for solicitado, forneça informações sobre seu aplicativo, como preços e classificação etária.

5. No prompt Pacotes , selecione e .msixbundle os .classic.appxbundle arquivos gerados na seção Empacotar seu PWA .

Depois de enviar o aplicativo, ele é examinado, normalmente dentro de 24 a 48 horas. Depois que o aplicativo for aprovado, seu PWA estará disponível na Microsoft Store.

Medir o uso do PWA instalado a partir do Microsoft Store

Quando seu PWA é iniciado inicialmente, se o PWA foi instalado da Microsoft Store, o Microsoft Edge inclui o seguinte Referer cabeçalho com a solicitação da primeira navegação do seu aplicativo Web.

Referer: app-info://platform/microsoft-store

Use esse recurso para medir o tráfego distinto do PWA que foi instalado do Microsoft Store. Com base no tráfego, você pode ajustar o conteúdo do seu aplicativo para melhorar a experiência do usuário. Esse recurso está acessível ao código do cliente e do servidor. Para acessar essas informações no lado do cliente, você pode consultar document.referrer em seu JavaScript.

Redirecionamento para domínios específicos da localidade sem exibir IU adicional

Por padrão, um PWA instalado da Microsoft Store exibe uma interface do usuário adicional quando o aplicativo é redirecionado para um domínio específico da localidade. A interface do usuário adicionada mostra a URL e o título da página. Essa interface do usuário é adicionada porque a navegação para o domínio específico da localidade é considerada fora do escopo.

A figura a seguir mostra a interface do usuário que é introduzida quando um usuário sai do escopo de um PWA.

Redirecionamento de domínio com PWAs instalados do navegador

Um manifesto de aplicativo Web está vinculado a um único domínio. No entanto, alguns PWAs usam domínios específicos da localidade para seus clientes em regiões específicas do globo. Ao visitar o PWA em um navegador da Web, os clientes fazem a transição perfeita do domínio principal (por exemplo, contoso.com) para um domínio específico da localidade (por exemplo, contoso.co.ke), porque o redirecionamento ocorre durante o carregamento inicial desse site.

Os clientes que instalam o PWA do Microsoft Edge instalariam, portanto, o PWA do domínio específico da localidade. As inicializações subsequentes do PWA vão diretamente para esse domínio específico da localidade, em vez de primeiro ir para o domínio principal.

Redirecionamento de domínio com PWAs instalados da Microsoft Store

Os PWAs instalados da Microsoft Store têm uma URL inicial codificada que aponta para o domínio principal. Quando o PWA é iniciado, o PWA navega inicialmente para o domínio principal e, em seguida, um cliente pode (conforme necessário) ser redirecionado para seu domínio específico da localidade. Se esse redirecionamento ocorrer, a navegação será considerada "fora do escopo". Como resultado, o aplicativo exibe a URL e o título da página na parte superior da página.

Exibir a URL e o título da página é um recurso de segurança para garantir que os usuários saibam que deixaram o contexto do PWA. Essa interface do usuário adicionada faz sentido quando um usuário carrega uma página de outro site no contexto do PWA. No entanto, essa interface do usuário adicionada pode ser inadequada quando um usuário se move entre domínios que fazem parte do mesmo site.

Impedir que a URL e o título específicos da localidade sejam exibidos

No momento, é impossível, para aplicativos instalados da Microsoft Store, impedir a exibição da URL adicional e da interface do usuário do título ao redirecionar para um domínio específico da localidade.

No futuro, as extensões de escopo possibilitarão que um PWA capture a navegação para caminhos, subdomínios ou até mesmo sites diferentes de seu próprio escopo. O recurso de extensões de escopo está em desenvolvimento ativo e ainda não está pronto para ser usado. Para saber mais sobre o estado de desenvolvimento desse recurso no Chromium, marcar o recurso de extensões de escopo do aplicativo Web no Status da plataforma Chrome.

Assim que o recurso puder ser usado no Microsoft Edge, iremos documentá-lo aqui. Enquanto isso, para saber mais sobre como as extensões de escopo funcionarão, consulte o documento explicativo no repositório WICG.

Fazer atualizações no seu aplicativo

Geralmente, quando você atualiza seu código PWA, não precisa criar um novo pacote de aplicativo e enviá-lo para a Microsoft Store novamente. Por exemplo, suponha que você faça alterações no código HTML, CSS ou JavaScript de front-end do seu aplicativo ou no seu trabalho de serviço. Na próxima vez que o usuário iniciar o aplicativo, as alterações serão baixadas pelo navegador que está executando o aplicativo do servidor Web.

No entanto, se você fizer alterações no arquivo de manifesto do aplicativo Web, deverá criar um novo pacote do aplicativo e enviá-lo para a Microsoft Store novamente. Por exemplo, no manifesto, você pode alterar o ícone do aplicativo ou o nome do aplicativo ou adicionar membros do manifesto como file_handlers, protocol_handlers, ou share_target. Criar e enviar um novo pacote do aplicativo é necessário quando o manifesto é alterado, pois as informações no arquivo de manifesto do aplicativo Web são copiadas para o pacote do aplicativo Windows, para melhor integração com o Windows.

Confira também

• Microsoft Store
• Construtor de PWA

Documentos no repositório do PWA Builder:

• Próximas etapas para inserir seu PWA na Microsoft Store – Teste e envie seu pacote do aplicativo PWA.
• Publicar um novo aplicativo na Store
• Atualizar um aplicativo existente na Store – atualize um aplicativo existente da Store para um PWA.
• Recomendações de imagem para pacotes PWA do Windows – Recomendações de imagem para PWAs na Loja.
• O que é um pacote clássico? - Explicação de empacotamento de aplicativos.