Depurar um PWA

Um PWA (Aplicativo Web Progressivo) é criado usando tecnologias da Web. Portanto, todas as ferramentas disponíveis no Microsoft Edge DevTools também são úteis para um PWA. Um PWA também usa um manifesto de aplicativo Web e pode usar trabalhos de serviço e outros recursos e APIs específicos que exigem ferramentas especiais de depuração.

Veja também:

Abrir DevTools

Um PWA pode ser instalado localmente e usado em uma janela autônoma ou pode ser usado em um navegador da Web, como um site.

Você pode abrir o DevTools no PWA da mesma maneira 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, consulte Abrir DevTools em Visão geral do DevTools.

Teste as suas mudanças

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

A maneira mais rápida de testar suas alterações é carregar o PWA em um navegador da web usando seu URL de desenvolvimento local, por exemplo http://localhost:8080. Testar 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 onde o PWA está carregado pressionando F5.

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

  • Abra o DevTools, clique com o botão direito do mouse em Atualizar na barra de ferramentas do navegador e clique em Esvaziar cache e atualização forçada.
  • Abra o DevTools, abra a Ferramenta de Aplicativo , clique em Trabalhadores de serviço e marque a caixa de seleção Ignorar para rede .

Para testar os recursos do PWA habilitados pela adição de código no manifesto do aplicativo Web, você deve instalar o PWA. Se você fizer mais alterações no manifesto do aplicativo Web, deverá desinstalar e reinstalar o PWA. Para saber como desinstalar seu PWA, consulte Gerenciando PWAs em Usar Aplicativos Web Progressivos (PWAs) no Microsoft Edge.

Depurar o trabalho de serviço

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

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

Para marcar se o seu trabalho de serviço foi instalado corretamente e em qual estado de seu ciclo de vida ele está atualmente, use o painel Trabalho de Serviço da ferramenta Aplicativo. Para saber mais, consulte Trabalhadores de serviço em Depurar um Aplicativo Web Progressivo (PWA).

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

Os Trabalho de 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, consulte 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 de manifesto.

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

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

Exibir e editar dados locais

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

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 . Consulte Limpar armazenamento em Depurar um Aplicativo Web Progressivo (PWA).

Simule diferentes tamanhos de tela

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

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

Observe que a ferramenta de Emulação de Dispositivo só está disponível quando DevTools é usado no navegador, e não quando DevTools é usado em um PWA instalado. Os PWAs instalados 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.

  • Last updated on