Transformar um site em um PWA de alta qualidade

Transformar seu site em um PWA de alta qualidade totalmente funcional (Aplicativo Web Progressivo) pode ser feito em um intervalo de almoço! Neste artigo, leve você ao processo de ponta a ponta.

Etapa 1: Criar um relatório cartão no PWA Builder

Primeiro, você desejará marcar se seu site tiver os recursos e metadados de que grandes PWAs precisam.

1. Navegue até PWA Builder
2. Insira a URL do site que você deseja converter em um PWA e clique em Iniciar
3. O construtor PWA exibirá um Cartão de Relatório PWA que indica os recursos que seu site tem e não tem.

Etapa 2: Examinar seu cartão de relatório PWA

Seu Cartão de Relatório PWA contém a pontuação do seu site, de uma pontuação máxima de 100. As pontuações são baseadas em três categorias de recursos.

Manifesto

O PWA avaliará o Manifesto do Aplicativo Web do seu site se um estiver disponível e identificará que os campos ou valores tht são necessários, recomendados e opcionais. Você pode melhorar sua pontuação adicionando valores ausentes, editando e publicando novamente seu arquivo de manifesto ou usando o editor de manifesto online.

Aviso

As alterações feitas no editor de manifesto online não serão publicadas em seu site. As alterações feitas só serão usadas pelo PWA Builder ao criar seu PWA.

Os valores necessários devem estar presentes, caso contrário, o construtor PWA não poderá criar seu PWA. Os campos necessários incluem simplesmente ter um manifesto, ícones, nome, nome curto e um start_url.

Os campos recomendados não são necessários, mas são importantes para a experiência do usuário do PWA. É altamente recomendável que você forneça todos os valores recomendados, embora o PWA Builder possa criar um PWA sem eles. Os valores recomendados incluem modo de exibição, cor da tela inicial, descrição, orientação, capturas de tela, ícone de alta resolução, ícone mascarado, categorias e atalhos.

Campos opcionais não são necessários, mas podem ser especificados, se apropriado. Os campos opcionais incluem uma classificação etária e aplicativos relacionados.

Service Worker

Um trabalho de serviço é executado em segundo plano para habilitar recursos avançados de aplicativo Web em que, de outra forma, haveria 404 erros. O PWA Builder requer um trabalho de serviço para criar seu PWA, mas se você não tiver um, poderá usar um dos vários trabalhos de serviço predefinidos fornecidos pelo PWA Builder. Para usar um trabalho de serviço predefinido:

1. Escolha a guia Opções do Service Worker no menu.
2. Selecione o trabalho de serviço apropriado na lista coletada. Observe que há muitas opções predefinidas; escolha o trabalho de serviço mais apropriado para seu caso de uso específico.
3. Depois de selecionar o trabalho de serviço que deseja usar, você será retornado ao seu Cartão de Relatório PWA.

Segurança

Todas as PWAs criadas com o PWA Builder exigem três protocolos de segurança.

1. Seu site deve usar HTTPS.

2. Seu site deve ter um certificado HTTPS correspondente.

   Se o site não tiver um certificado HTTPS presente, você poderá publicar no Azure para obter suporte https interno. Como alternativa, há ferramentas gratuitas de terceiros, como Letsencrypt , que permitirão que você obtenha um certificado HTTPS gratuitamente.

3. Seu site não deve conter conteúdo misto. O conteúdo misto é quando uma página fornecida por HTTPS contém recursos carregados por HTTP. O conteúdo misto compromete a segurança do HTTPS e do PWA.

Etapa 3: Coletar informações importantes do Partner Center

Você precisará de várias informações de sua conta do Partner Center para criar seu PWA. Se você não tiver uma MSA, clique aqui para obter instruções sobre como começar. Você também precisará se inscrever no Programa de Desenvolvedores do Windows.

Se você ainda não fez isso, precisará criar seu aplicativo PWA reservando um novo nome. Depois de reservar seu nome, clique no botão Iniciar seu envio para criar um envio de aplicativo.

Em seguida, clique na guia Gerenciamento de Produtos e selecione Identidade do Produto. A página de identidade do produto listará a ID do pacote do produto, a ID do editor e o nome de exibição do editor. Salve esses valores e retorne ao PWA Builder.

Etapa 4: Gerar seu PWA no PWA Builder

Agora você tem tudo o que precisa para criar seu PWA no PWA Builder. Retorne ao site do PWA Builder e clique em Gerar.

O construtor de PWA solicitará as informações obtidas do Partner Center na etapa 3. Preencha os valores e clique em Gerar.

Depois que o PWA Builder tiver criado o PWA, o navegador o baixará automaticamente. O PWA é empacotado em um arquivo .zip que contém seis arquivos.

O arquivo msix é o pacote de aplicativo main do PWA. Esse arquivo instalará o PWA no computador do usuário.

O arquivo appx é um pacote de aplicativo clássico. Ele é usado para instalar o PWA em versões mais antigas do Windows. Confira Pacotes de aplicativos clássicos para obter mais informações.

Etapa 5: Enviar seus pacotes de aplicativos para a Microsoft Store

Esses pacotes podem ser enviados para a Microsoft Store da mesma forma que qualquer outro aplicativo empacotado como um arquivo MSIX pode ser. Para obter mais instruções sobre como enviar seus pacotes PWA para a loja, consulte Envios de aplicativo.