Depurar Aplicativos Web progressivo

AS PWAs (Aplicativos Web progressivas) são criadas usando tecnologias Web. Portanto, todas as ferramentas disponíveis no Microsoft Edge DevTools também são úteis para PWAs. Para saber mais, consulte a documentação do Microsoft Edge DevTools.

As PWAs também usam trabalhos de serviço, manifestos de aplicativo Web e outros recursos específicos e APIs que exigem ferramentas especiais de depuração.

Abrir DevTools

As PWAs podem ser instaladas localmente e usadas em uma janela autônoma ou usadas em um navegador da Web, assim como um site.

Você pode abrir o DevTools em seu PWA da mesma forma em ambos os casos. Para abrir o DevTools, use uma das seguintes maneiras:

• Clique com o botão direito do mouse em qualquer item na interface do usuário do aplicativo e selecione Inspecionar.
• Pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).
• Pressione F12.

Para saber mais, confira Abrir DevTools em Visão geral de DevTools.

Teste as suas mudanças

Ao desenvolver seu PWA, você faz alterações no código-fonte e, em seguida, testa-as.

A maneira mais rápida de testar suas alterações é carregar seu PWA em um navegador da Web usando sua URL de desenvolvimento local, por exemplo http://localhost:8080. O teste em um navegador é mais rápido porque você não precisa instalar o PWA localmente primeiro.

Para testar suas alterações, atualize a guia do navegador em que o PWA é carregado pressionando F5.

Depois de ter um trabalho de serviço que armazena em cache arquivos estáticos, pressionar f5 pode nem sempre recarregar suas alterações mais recentes no navegador. Para forçar o navegador a recarregar suas alterações, use uma das seguintes maneiras:

• Abra DevTools, clique com o botão direito do mouse em Atualizar na barra de ferramentas do navegador e clique em Cache vazio e atualização dura.
• Abra DevTools, abra a Ferramenta de Aplicativo , clique em Trabalhos de Serviço e selecione a caixa de seleção Ignorar para rede .

Para testar os recursos de PWA habilitados adicionando código no manifesto do aplicativo Web, instale o PWA. Se você fizer outras alterações no manifesto do aplicativo Web, deverá desinstalar e reinstalar o PWA. Para saber como desinstalar seu PWA, consulte Gerenciando PWAs no Use Progressive Aplicativos Web no Microsoft Edge.

Depurar seu trabalho de serviço

Seu trabalho de serviço PWA é responsável por tornar seu aplicativo mais rápido e confiável para as condições de rede.

O trabalhador do serviço faz isso executando em paralelo ao seu aplicativo e interceptando solicitações de rede. Ele tem seu próprio ciclo de vida independente do ciclo de vida do seu aplicativo.

Para marcar se o trabalho de serviço foi instalado corretamente e em qual estado do ciclo de vida ele está atualmente, use o painel Trabalhos de Serviço da ferramenta Aplicativo. Para saber mais, consulte Trabalhos de serviço em PWAs (depuração progressiva de Aplicativos Web).

Para depurar o código JavaScript em execução no thread do trabalho de serviço, usando pontos de interrupção, alterne para o thread do trabalho de serviço na ferramenta Fontes . Para saber mais, confira Alterar o contexto do thread nos recursos de depuração do JavaScript.

Os trabalhadores do serviço podem ser executados mesmo quando seu aplicativo não estiver em execução e executar tarefas em segundo plano para manter seu aplicativo atualizado. Por exemplo, eles podem buscar dados do servidor ou receber mensagens push.

Para depurar as tarefas em segundo plano do trabalho de serviço, use a seção Serviços em Segundo Plano da ferramenta Aplicativo . Para saber mais, confira Depurar serviços em segundo plano.

Exibir o manifesto do aplicativo Web

O manifesto do aplicativo Web define o nome, a descrição, o ícone e os recursos do aplicativo. Se esses recursos funcionam corretamente, pode depender se eles foram inseridos corretamente no arquivo JSON do manifesto.

Para marcar se o Microsoft Edge detectar seu arquivo de manifesto e os recursos nele, use o painel Manifesto da ferramenta Aplicativo. Para saber mais, confira Manifesto do aplicativo Web em Depurar APLICATIVOS WEB Progressivo (PWAs).

Determinados recursos de manifesto PWA têm ferramentas dedicadas. Por exemplo, você pode testar o tratamento do protocolo PWA (Aplicativo Web Progressivo).

Exibir e editar dados locais

Para fornecer uma experiência avançada e rápida para seus usuários, seu PWA pode armazenar dados localmente. Para exibir, editar e excluir os dados armazenados, consulte a seguinte documentação de DevTools, dependendo da opção de armazenamento escolhida:

• Exibir dados do Cache.
• Exibir e alterar dados IndexedDB.
• Exibir e editar o armazenamento local.
• Exibir e editar armazenamento de sessão.

Para exibir a quantidade total de dados armazenados usados pelo PWA, a cota disponível e excluir os dados, use o painel Armazenamento da ferramenta Aplicativo . Para saber mais, confira Armazenamento em Depurar APLICATIVOS WEB Progressivo (PWAs).

Simular diferentes tamanhos de tela

Com o Progressive Aplicativos Web, você entrega um aplicativo para todos os dispositivos, de uma base de código. Para garantir que seu aplicativo se adapte a todos os tamanhos de tela do dispositivo, use a ferramenta Emulação de Dispositivo em DevTools.

Para saber mais, confira Emular dispositivos móveis (Emulação de Dispositivo).

Observe que a ferramenta Emulação de Dispositivo só está disponível quando o DevTools é usado no navegador e não quando o DevTools é usado em um PWA instalado. As PWAs instaladas têm suas próprias janelas autônomas que são muito fáceis de redimensionar para testar seu aplicativo em diferentes tamanhos de tela.