Depurar Aplicativos Web Progressivos (PWAs)

Utilize a ferramenta Aplicação para inspecionar, modificar e depurar manifestos de aplicações Web, funções de trabalho de serviço e caches de trabalho de serviço. A ferramenta Aplicação inclui os seguintes painéis para funcionalidades da Aplicação Web Progressiva:

• Utilize o painel Manifesto para inspecionar o manifesto da aplicação Web e acionar eventos "Adicionar ao Ecrã Principal".

• 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 anular o registo de uma função de trabalho de serviço e limpar todo o armazenamento e caches.

Este artigo aborda as funcionalidades da Aplicação Web Progressiva da ferramenta Aplicação . Para obter ajuda nos outros painéis da ferramenta Aplicação , consulte Ver os ficheiros de recursos que compõem uma página Web e Ver 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.

Depois de configurar o manifesto, pode utilizar o painel Manifesto de Aplicação da ferramenta Aplicação para inspecionar o manifesto:

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

• 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 a origem do manifesto, clique na ligação abaixo da etiqueta do Manifesto de Aplicação (manifest.json na figura anterior, que é https://airhorner.com/manifest.jsonaberta ).

• 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. Estes scripts permitem-lhe aceder 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 painel Funções de trabalho de serviço na ferramenta Aplicação é o local principal nas DevTools para inspecionar e depurar as funções de trabalho dos serviços:

• Se uma função de trabalho de serviço estiver instalada na página atualmente aberta, é apresentada neste painel. 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 na ferramenta Rede ou à 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.

• 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.

• O botão Anular registo anule o registo da função de trabalho de serviço especificada. Consulte Armazenamento para obter uma forma de 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.

• 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 estado da função de trabalho de serviço. O número de ID junto ao indicador de estado verde (#36 na figura anterior) destina-se à função de trabalho de serviço atualmente ativa. Junto ao estado, é apresentado um botão iniciar (se a função de trabalho de serviço estiver parada) ou um botão de paragem (se a função de trabalho de serviço estiver em execução). 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.

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

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?

Storage

O painel Armazenamento é uma funcionalidade muito útil ao desenvolver aplicações Web progressivas. Este painel permite-lhe anular o registo das funções de trabalho de serviço e limpar todas as caches e armazenamento com um único clique de botão.

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original encontra-se aqui e é criada por Kayce Bascos (Technical Writer, Chrome DevTools & Lighthouse).

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