Depurar uma Aplicação Web Progressiva (PWA)

Utilize a ferramenta Aplicação para inspecionar, modificar e depurar manifestos de aplicações Web do PWA, funções de trabalho de serviço e caches de trabalho de serviço.

O Ferramenta de aplicação inclui os seguintes painéis para funcionalidades do PWA:

• Utilize o painel Manifesto para inspecionar o manifesto da aplicação Web.

• Utilize o painel Funções de trabalho de serviço para tarefas relacionadas com o trabalho de serviço, tais como:

  • Anular o registo ou atualizar um serviço.
  • A emular eventos push.
  • A ficar offline.
  • Parar uma função de trabalho de serviço.

• Utilize o painel Armazenamento em Cache para ver a cache da função de trabalho de serviço.

• Utilize o painel Armazenamento para ver a quantidade de dados que a sua aplicação está a armazenar no dispositivo e limpar os dados armazenados.

As funcionalidades que são abordadas abaixo são funcionalidades da ferramenta Aplicação relevantes para PWAs. Para obter ajuda sobre as outras funcionalidades e painéis na ferramenta Aplicação , consulte:

• Ver os ficheiros de recursos que compõem uma página Web
• Exibir e editar o armazenamento local

Consulte também:

• Visão geral dos Aplicativos Web Progressivos (PWAs)

Manifesto do aplicativo Web

Se quiser que os seus utilizadores possam adicionar a sua aplicação aos respetivos ecrãs domésticos móveis, precisa de um manifesto de aplicação Web. O manifesto define a forma como a aplicação aparece no ecrã principal, onde direcionar o utilizador ao iniciar a partir do ecrã principal e o aspeto da aplicação no início.

Para inspecionar um manifesto:

1. Aceda à página Web que utiliza o manifesto, como Airhorner.com, numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione o Ferramenta de aplicação.

4. No contorno à esquerda, na secção Aplicação , selecione Manifesto.

   É apresentado o painel Manifesto da Aplicação , onde pode inspecionar o manifesto:

O painel Manifesto da Aplicação contém as seguintes secções:

• Secção superior, que contém a ligação do manifesto

• Identidade

• Apresentação

• Processadores de Protocolos

• Ícones

• Sobreposição de Controlos de Janela

• Captura de ecrã n.º 1

• Captura de ecrã n.º 2

• Para ver o ficheiro de origem do manifesto, clique na ligação abaixo da etiqueta Manifesto de Aplicação . Na figura anterior, essa ligação é manifest.json, que abre https://airhorner.com/manifest.json, para Airhorner.com.

• As secções Identidade e Apresentação apresentam campos da origem do manifesto num ecrã mais amigável.

• A secção Ícones apresenta todos os ícones que foram especificados no manifesto.

Profissionais de serviço

Os trabalhadores de serviços são uma tecnologia fundamental na plataforma Web. As funções de trabalho de serviço são scripts que o browser executa em segundo plano, separados de uma página Web. Os scripts de trabalho de serviço permitem que a sua aplicação aceda a funcionalidades que não precisam de uma página Web ou interação do utilizador, como notificações push, sincronização em segundo plano e experiências offline.

O local principal nas DevTools para inspecionar e depurar funções de trabalho de serviço é o painel Funções de trabalho de serviço no Ferramenta de aplicação.

Para ver as funções de trabalho de serviço:

1. Aceda a uma página Web, como Airhorner.com, numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione o Ferramenta de aplicação.

4. No contorno à esquerda, na secção Aplicação , selecione Funções de trabalho do serviço.

   É apresentado o painel Funções de trabalho de serviço:

• Se uma função de trabalho de serviço estiver instalada na página atualmente aberta, a função de trabalho de serviço é apresentada no painel Trabalhadores de serviços. Por exemplo, na figura anterior, existe uma função de trabalho de serviço instalada para o âmbito do https://weather-pwa-sample.firebaseapp.com.

• A caixa de verificação Offline coloca As DevTools no modo offline. Isto é equivalente ao modo offline disponível a partir da Ferramenta de ou da opção Go offline no Menu de Comandos.

• A caixa de verificação Atualizar ao recarregar força a função de trabalho de serviço a atualizar em cada carregamento de página.

• A caixa de verificação Ignorar para rede ignora a função de trabalho de serviço e força o browser a aceder à rede para obter recursos pedidos.

• A ligação Pedidos de rede direciona-o para a ferramenta Rede com uma lista de pedidos intercetados relacionados com a função de trabalho de serviço (o is:service-worker-intercepted filtro). Veja Apresentar pedidos de rede processados por uma função de trabalho de serviço, abaixo.

• O botão Atualizar efetua uma atualização única da função de trabalho de serviço especificada.

• O botão Push emula uma notificação push sem um payload (também conhecido como cócegas).

• O botão Sincronizar emula um evento de sincronização de fundo.

• A ligação Anular registo anule o registo da função de trabalho de serviço especificada. Para anular o registo de uma função de trabalho de serviço e apagar o armazenamento e as caches com um único clique de botão, veja Limpar armazenamento, abaixo.

• A Linha de origem indica-lhe quando a função de trabalho de serviço atualmente em execução foi instalada. A ligação é o nome do ficheiro de origem da função de trabalho de serviço. Escolher na ligação envia-o para a origem da função de trabalho de serviço.

• A linha Estado indica-lhe o status da função de trabalho de serviço. O número de ID junto ao indicador de status verde (#36na figura anterior) destina-se à função de trabalho de serviço atualmente ativa.

  Junto ao status:

  • Se a função de trabalho de serviço estiver parada, é apresentado um botão Iniciar .
  • Se a função de trabalho de serviço estiver em execução, é apresentado um botão parar .

  As funções de trabalho de serviço foram concebidas para serem paradas e iniciadas pelo browser em qualquer altura. Parar explicitamente a função de trabalho de serviço com o botão parar pode simular isso.

  Parar a sua função de trabalho de serviço é uma excelente forma de testar o comportamento do código quando a função de trabalho de serviço volta a iniciar a cópia de segurança. Revela frequentemente erros devido a pressupostos defeituosos sobre o estado global persistente.

• A linha Clientes indica-lhe a origem para a qual a função de trabalho de serviço está confinada. O botão de foco é sobretudo útil quando ativa a caixa de verificação Mostrar tudo . Quando essa caixa de verificação estiver ativada, todas as funções de trabalho de serviço registadas são listadas. Se clicar no botão de foco junto a uma função de trabalho de serviço que está em execução num separador diferente, o Microsoft Edge concentra-se nesse separador.

• A tabela Ciclo de Atualização apresenta as atividades da função de trabalho de serviço e os respetivos tempos decorridos, como Instalar, Aguardar e Ativar. Para ver o carimbo de data/hora exato de cada atividade, clique nos botões Expandir ().

Se a função de trabalho de serviço causar erros, é apresentada uma etiqueta Erros .

Consulte também:

• API de Trabalho de Serviço – na MDN, sobre os trabalhadores de serviços.

Apresentar pedidos de rede processados por uma função de trabalho de serviço

No painel Funções de trabalho de serviço da ferramenta Aplicação , pode aceder rapidamente à lista de pedidos de rede que são processados por uma função de trabalho de serviço, através da ferramenta Rede .

Para apresentar os pedidos de rede que são processados por uma função de trabalho de serviço:

1. Aceda a uma página Web, como Airhorner.com, numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione o Ferramenta de aplicação.

4. No contorno à esquerda, na secção Aplicação , selecione Funções de trabalho do serviço.

   O painel Funções de trabalho de serviço é apresentado.

5. No canto superior direito do painel Funções de trabalho de serviço, clique no botão Pedidos de rede .

   O Ferramenta de rede é aberta.

   A caixa de texto Filtro contém is:service-worker-intercepted. Este filtro apenas apresenta os pedidos que foram processados por esta função de trabalho de serviço.

6. Atualize a página Web.

7. Selecione um dos pedidos, como main.css.

   É apresentada a barra lateral.

8. Na barra lateral, clique no separador Temporização .

   A secção Trabalho de Serviço apresenta informações de temporização sobre o Arranque e as fases RespondWith .

Caches de trabalho de serviço

O painel Armazenamento em Cache fornece uma lista só de leitura dos recursos que foram colocados em cache com a API de Cache (service worker):

Da primeira vez que abrir uma cache e adicionar um recurso à mesma, as DevTools poderão não detetar a alteração. Atualize a página para apresentar a cache.

Todas as caches abertas estão listadas no expansor do Armazenamento em Cache .

Utilização da quota

Algumas respostas no painel Armazenamento em Cache podem ser sinalizadas como sendo "opacas". Isto refere-se a uma resposta obtida de uma origem diferente, como a partir de uma CDN ou de uma API remota, quando o CORS não está ativado.

Para evitar fugas de informações entre domínios, é adicionado um preenchimento significativo ao tamanho de uma resposta opaca utilizada para calcular os limites de quota de armazenamento (por exemplo, se é emitida uma QuotaExceeded exceção) e comunicado pela navigator.storage API.

Os detalhes deste preenchimento variam de browser para browser, mas para o Microsoft Edge, isto significa que o tamanho mínimo que qualquer resposta opaca em cache única contribui para a utilização geral do armazenamento é de aproximadamente 7 megabytes. Lembre-se do preenchimento ao determinar quantas respostas opacas pretende colocar em cache, uma vez que pode facilmente exceder as limitações de quota de armazenamento muito mais cedo do que esperava com base no tamanho real dos recursos opacos.

Guias Relacionados:

• Stack Overflow: Que limitações se aplicam às respostas opacas?

Limpar armazenamento

O separador Limpar Armazenamento é útil ao desenvolver uma aplicação Web progressiva. Utilize o painel Limpar Armazenamento para anular o registo das funções de trabalho de serviço e limpar todas as caches e armazenamento, com um único clique no botão.

Consulte também

• Inspecionar atividade de rede

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.