Partilhar via

Depurar um PWA

  • Artigo

Uma Aplicação Web Progressiva (PWA) é criada com tecnologias Web. Por conseguinte, todas as ferramentas disponíveis no Microsoft Edge DevTools também são úteis para um PWA. Um PWA também utiliza um manifesto de aplicação Web e pode utilizar funções de trabalho de serviço e outras funcionalidades e APIs específicas que requerem ferramentas de depuração especiais.

Veja também:

Abrir DevTools

Um PWA pode ser instalado localmente e ser utilizado numa janela autónoma ou pode ser utilizado num browser como um site.

Pode abrir DevTools no seu PWA da mesma forma em ambos os casos. Para abrir o DevTools, utilize uma das seguintes formas:

  • Clique com o botão direito do rato em qualquer item na interface de utilizador da aplicação e, em seguida, selecione Inspecionar.
  • Prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS).
  • Prima F12.

Para saber mais, veja Open DevTools in Overview of DevTools (Abrir DevTools em Descrição Geral das DevTools).

Teste as suas mudanças

Ao desenvolver um PWA, efetua alterações ao código fonte e, em seguida, testa-os.

A forma mais rápida de testar as alterações é carregar o PWA num browser com o URL de desenvolvimento local, por exemplo http://localhost:8080. Os testes num browser são mais rápidos porque não precisa de instalar o PWA localmente primeiro.

Para testar as alterações, atualize o separador do browser onde o PWA é carregado ao premir F5.

Depois de ter uma função de trabalho de serviço que coloca os ficheiros estáticos em cache, premir F5 poderá nem sempre recarregar as alterações mais recentes no browser. Para forçar o browser a recarregar as alterações, utilize uma das seguintes formas:

  • Abra DevTools, clique com o botão direito do rato em Atualizar na barra de ferramentas do browser e clique em Esvaziar cache e atualização rápida.
  • Abra DevTools, abra a Ferramenta de Aplicação , clique em Funções de trabalho de serviço e, em seguida, selecione a caixa de verificação Ignorar para rede .

Para testar as funcionalidades do PWA que estão ativadas ao adicionar código no manifesto da aplicação Web, tem de instalar o seu PWA. Se, em seguida, fizer mais alterações ao manifesto da aplicação Web, tem de desinstalar e reinstalar o PWA. Para saber como desinstalar o seu PWA, consulte Gerir PWAs em Utilizar PWAs no Microsoft Edge.

Depurar a função de trabalho de serviço

A sua função de trabalho do serviço PWA é responsável por tornar a sua aplicação mais rápida e fiável para as condições de rede.

A função de trabalho de serviço fá-lo ao executar em paralelo com a sua aplicação e intercetar pedidos de rede. Tem o seu próprio ciclo de vida que é independente do ciclo de vida da sua aplicação.

Para marcar se a sua função de trabalho de serviço foi instalada corretamente e em que estado do respetivo ciclo de vida está atualmente, utilize o painel Funções de trabalho de serviço da ferramenta Aplicação. Para saber mais, veja Service workers in Debug a Progressive Web App (PWA) (Trabalhos de serviço na Depuração de uma Aplicação Web Progressiva (PWA)).

Para depurar o código JavaScript em execução no thread de trabalho de serviço, com pontos de interrupção, mude para o thread de trabalho de serviço na ferramenta Origens . Para saber mais, veja Alterar o contexto de thread nas funcionalidades de depuração do JavaScript.

As funções de trabalho de serviço podem ser executadas mesmo quando a sua aplicação não está em execução e executar tarefas em segundo plano para manter a sua aplicação atualizada. Por exemplo, podem obter dados do servidor ou receber mensagens push.

Para depurar as tarefas em segundo plano da função de trabalho de serviço, utilize a secção Serviços em Segundo Plano da ferramenta Aplicação . Para saber mais, veja Depurar serviços em segundo plano.

Ver o manifesto da aplicação Web

O manifesto da aplicação Web define o nome, a descrição, o ícone e as funcionalidades da sua aplicação. Se estas funcionalidades funcionam corretamente pode depender se foram introduzidas corretamente no ficheiro JSON do manifesto.

Para marcar se o Microsoft Edge detetar o ficheiro de manifesto e as funcionalidades no mesmo, utilize o painel Manifesto da ferramenta Aplicação. Para saber mais, veja Manifesto de aplicação Web em Depurar uma Aplicação Web Progressiva (PWA).

Determinadas funcionalidades de manifesto do PWA têm ferramentas dedicadas. Por exemplo, pode Testar o processamento de protocolos PWA (Progressive Web App).

Ver e editar dados locais

Para proporcionar uma experiência avançada e rápida aos seus utilizadores, o seu PWA pode armazenar dados localmente. Para ver, editar e eliminar os dados armazenados, veja a seguinte documentação do DevTools, consoante a opção de armazenamento que escolheu:

Para ver a quantidade total de dados armazenados utilizados pelo seu PWA, a quota disponível e eliminar os dados, utilize o painel Armazenamento da ferramenta Aplicação . Para saber mais, veja Armazenamento em Depurar uma Aplicação Web Progressiva (PWA).

Simular diferentes tamanhos de ecrã

Com a Aplicativos Web Progressiva, fornece uma aplicação para todos os dispositivos, a partir de uma base de código. Para se certificar de que a sua aplicação se adapta a todos os tamanhos de ecrã do dispositivo, utilize a ferramenta Emulação do Dispositivo em DevTools.

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

Tenha em atenção que a ferramenta DevTools só está disponível quando o DevTools é utilizado no browser e não quando o DevTools é utilizado num PWA instalado. As PWAs instaladas têm as suas próprias janelas autónomas que são muito fáceis de redimensionar para testar a sua aplicação em diferentes tamanhos de ecrã.