Depurar um PWA (Aplicativo Web Progressivo)

Use a ferramenta Aplicativo para inspecionar, modificar e depurar manifestos de aplicativo Web, trabalhadores de serviço e caches de trabalho de serviço de um PWA.

O A ferramenta de aplicativo inclui os seguintes painéis para recursos do PWA:

• Use o painel Manifesto para inspecionar o manifesto do aplicativo Web.

• Use o painel Trabalhos de serviço para tarefas relacionadas ao trabalho de serviço, como:

  • Cancelar o registro ou atualizar um serviço.
  • Emular eventos de push.
  • Ficar offline.
  • Parar um trabalho de serviço.

• Use o painel Armazenamento em Cache para exibir o cache do trabalho de serviço.

• Use o painel Armazenamento para visualizar a quantidade de dados que seu aplicativo está armazenando no dispositivo e limpe os dados armazenados.

Os recursos discutidos abaixo são recursos da ferramenta Aplicativo relevantes para PWAs. Para obter ajuda sobre os outros recursos e painéis na ferramenta Aplicativo , consulte:

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

Consulte também:

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

Manifesto do aplicativo Web

Se você quiser que seus usuários possam adicionar seu aplicativo às telas iniciais de dispositivos móveis, precisará de um manifesto de aplicativo Web. O manifesto define como o aplicativo aparece na tela inicial, para onde direcionar o usuário ao iniciar a partir da tela inicial e como o aplicativo se parece na inicialização.

Para inspecionar um manifesto:

1. Vá para a página da Web que usa o manifesto, como Airhorner.com, em uma nova janela ou guia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   O DevTools é aberto.

3. No DevTools, selecione o Ferramenta Aplicativo.

4. Na estrutura de tópicos à esquerda, na seção Aplicativo , selecione Manifesto.

   O painel Manifesto do aplicativo é exibido, onde você pode inspecionar o manifesto:

O painel Manifesto do aplicativo contém as seguintes seções:

• Seção superior, contendo o link do manifesto

• Identidade

• Apresentação

• Manipuladores de protocolo

• Ícones

• Sobreposição de controles de janela

• Captura de tela #1

• Captura de tela #2

• Para visualizar o arquivo de origem do manifesto, clique no link abaixo do rótulo do manifesto do aplicativo . Na figura anterior, esse link é manifest.json, que abre https://airhorner.com/manifest.json, para Airhorner.com.

• As seções Identidade e Apresentação exibem campos da origem do manifesto em uma exibição mais amigável.

• A seção Ícones exibe todos os ícones especificados no manifesto.

Profissionais de serviço

Os service workers são uma tecnologia fundamental na plataforma web. Os trabalhos de serviço são scripts que o navegador executa em segundo plano, separados de uma página da Web. Os scripts de trabalho de serviço permitem que seu aplicativo acesse recursos que não precisam de uma página da Web ou interação do usuário, como notificações por push, sincronização em segundo plano e experiências offline.

O local principal no DevTools para inspecionar e depurar trabalhadores de serviço é o painel Trabalho de Serviço no Ferramenta Aplicativo.

Para exibir os trabalhadores de serviço:

1. Acesse uma página da Web, como Airhorner.com, em uma nova janela ou guia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   O DevTools é aberto.

3. No DevTools, selecione o Ferramenta Aplicativo.

4. Na estrutura de tópicos à esquerda, na seção Aplicativo , selecione Trabalhadores de serviço.

   O painel Trabalhos de serviço é exibido:

• Se um service worker estiver instalado na página aberta no momento, o service worker será listado no painel Service Workers . Por exemplo, na figura anterior, há um trabalho de serviço instalado para o escopo do https://weather-pwa-sample.firebaseapp.com.

• A caixa de seleção Offline coloca o DevTools no modo offline. Isso é equivalente ao modo offline disponível no ferramenta Rede ou na Go offline opção no Menu de Comando.

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

• A caixa de seleção Ignorar para rede ignora o trabalho de serviço e força o navegador a ir para a rede para obter os recursos solicitados.

• O link Solicitações de rede leva você à ferramenta Rede com uma lista de solicitações interceptadas relacionadas ao trabalho de serviço (o is:service-worker-intercepted filtro). Consulte Exibir solicitações de rede tratadas por um trabalho de serviço, abaixo.

• O botão Atualizar executa uma atualização única do trabalho de serviço especificado.

• O botão de envio emula uma notificação por push sem carga (também conhecido como cócegas).

• O botão Sincronizar emula um evento de sincronização em segundo plano.

• O link Cancelar registro cancela o registro do trabalho de serviço especificado. Para cancelar o registro de um trabalho de serviço e limpar o armazenamento e os caches com um único clique de botão, consulte Limpar armazenamento, abaixo.

• A linha Fonte informa quando o trabalho de serviço em execução no momento foi instalado. O link é o nome do arquivo de origem do trabalho de serviço. Escolher no link envia você para a origem do trabalho de serviço.

• A linha Status informa o status do trabalho de serviço. O número de ID ao lado do indicador de status verde (#36na figura anterior) é para o trabalhador de serviço ativo no momento.

  Ao lado do status:

  • Se o trabalho de serviço estiver parado, um botão Iniciar será exibido.
  • Se o trabalho de serviço estiver em execução, um botão de parada será exibido.

  Os trabalhos de serviço são projetados para serem interrompidos e iniciados pelo navegador a qualquer momento. Parar explicitamente o trabalho de serviço usando o botão de parada pode simular isso.

  Interromper o trabalho de serviço é uma ótima maneira de testar como o código se comportará quando o trabalho de serviço for iniciado novamente. Ele frequentemente revela bugs devido a suposições incorretas sobre o estado global persistente.

• A linha Clients informa a origem para a qual o trabalho de serviço está no escopo. O botão de foco é mais útil quando você habilita a caixa de seleção mostrar tudo . Quando essa caixa de seleção está ativada, todos os trabalhadores de serviço registrados são listados. Se você clicar no botão de foco ao lado de um trabalho de serviço em execução em uma guia diferente, o Microsoft Edge focará nessa guia.

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

Se o trabalho de serviço causar algum erro, um rótulo de Erros será exibido.

Consulte também:

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

Exibir solicitações de rede tratadas por um trabalho de serviço

No painel Trabalhos de serviço da ferramenta Aplicativo , é possível acessar rapidamente a lista de solicitações de rede que são tratadas por um trabalho de serviço, por meio da ferramenta Rede .

Para exibir as solicitações de rede tratadas por um trabalho de serviço:

1. Acesse uma página da Web, como Airhorner.com, em uma nova janela ou guia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   O DevTools é aberto.

3. No DevTools, selecione o Ferramenta Aplicativo.

4. Na estrutura de tópicos à esquerda, na seção Aplicativo , selecione Trabalhadores de serviço.

   O painel Trabalhos de serviço é exibido.

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

   O A ferramenta Rede é aberta.

   A caixa de texto Filtro contém is:service-worker-intercepted. Esse filtro exibe apenas as solicitações que foram tratadas por esse trabalho de serviço.

6. Atualize a página da Web.

7. Selecione uma das solicitações, como main.css.

   A barra lateral é exibida.

8. Na barra lateral, clique na guia Intervalo .

   A seção Trabalho de Serviço exibe informações de tempo sobre as fases Inicialização e respondWith .

Caches de trabalho do serviço

O painel Armazenamento em Cache fornece uma lista somente leitura de recursos que foram armazenados em cache usando a API de Cache (trabalho de serviço):

Na primeira vez que você abre um cache e adiciona um recurso a ele, o DevTools pode não detectar a alteração. Atualize a página para exibir o cache.

Todos os caches abertos são listados no expansor de armazenamento de cache .

Uso de cota

Algumas respostas no painel Armazenamento em Cache podem ser sinalizadas como "opacas". Isso se refere a uma resposta recuperada de uma origem diferente, como de uma CDN ou API remota, quando o CORS não está habilitado.

Para evitar o vazamento de informações entre domínios, um preenchimento significativo é adicionado ao tamanho de uma resposta opaca usada para calcular limites de cota de armazenamento (por exemplo, se uma QuotaExceeded exceção é lançada) e relatada navigator.storage pela API.

Os detalhes desse preenchimento variam de navegador para navegador, mas para o Microsoft Edge, isso significa que o tamanho mínimo que qualquer resposta opaca em cache única contribui para o uso geral do armazenamento é de aproximadamente 7 megabytes. Lembre-se do preenchimento ao determinar quantas respostas opacas você deseja armazenar em cache, pois você pode facilmente exceder as limitações de cota de armazenamento muito mais cedo do que o esperado com base no tamanho real dos recursos opacos.

Guias relacionados:

• Stack Overflow: Quais limitações se aplicam a respostas opacas?

Limpar armazenamento

A guia Limpar Armazenamento é útil ao desenvolver um aplicativo Web progressivo. Use o painel Limpar Armazenamento para cancelar o registro de trabalhos de serviço e limpar todos os caches e armazenamento com um único clique de botão.

Consulte também

• Inspecionar atividade de rede

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.