A seção Serviços em segundo plano do Chrome DevTools é um conjunto de ferramentas para as APIs JavaScript que permite que seu site envie e receba atualizações mesmo quando um usuário não está com o site aberto. Um serviço em segundo plano é funcionalmente semelhante a um processo em segundo plano.
A seção Serviços em segundo plano permite depurar os seguintes serviços em segundo plano:
- Busca em segundo plano
- Sincronização em segundo plano
- Notificações
- Carregamentos especulativos
- Mensagens push
O Chrome DevTools pode registrar eventos de busca, sincronização e notificação por três dias, mesmo quando o DevTools não está aberto. Isso ajuda a garantir que os eventos sejam enviados e recebidos conforme esperado.
Além dos eventos de serviço em segundo plano, o DevTools pode:
- Mostram os relatórios que o Chrome já enviou ou está prestes a enviar usando a API Reporting.
- Permite depurar e testar o cache de avanço e retorno com um clique.
Busca em segundo plano
A API Background Fetch permite que um service worker faça o download de recursos grandes, como filmes ou podcasts, de maneira confiável como um serviço em segundo plano. Para registrar eventos de busca em segundo plano por três dias, mesmo quando o DevTools não estiver aberto:
- Abra o DevTools, por exemplo, nesta página de demonstração.
Navegue até Aplicativo > Serviços em segundo plano > Busca em segundo plano e clique em
Record.
Na página de demonstração, clique em Armazenar recursos localmente. Isso aciona uma atividade de busca em segundo plano. O DevTools registra os eventos na tabela.
Clique em um evento para ver os detalhes no espaço abaixo da tabela.
Feche o DevTools e deixe a gravação em execução por até três dias. Para interromper a gravação, clique em
Stop.
Sincronização em segundo plano
A API Background Sync permite que um service worker off-line envie dados a um servidor assim que uma conexão de Internet confiável for restabelecida. Para registrar eventos de sincronização em segundo plano por três dias, mesmo quando o DevTools não estiver aberto:
- Abra o DevTools, por exemplo, nesta página de demonstração.
Navegue até Aplicativo > Serviços em segundo plano > Sincronização em segundo plano e clique em
Gravar.
Na página de demonstração, clique em Register background sync para registrar o respectivo service worker e clique em Allow quando solicitado.
O registro do service worker é uma atividade de sincronização em segundo plano. O DevTools registra os eventos na tabela.
Clique em um evento para ver os detalhes no espaço abaixo da tabela.
Feche o DevTools e deixe a gravação em execução por até três dias. Para interromper a gravação, clique em
Stop.
(Experimental) Mitigações de rastreio por redirecionamento
O experimento com mitigações de rastreio por redirecionamento no Chrome permite identificar e excluir o estado de sites que parecem executar o rastreamento entre sites usando a técnica de rastreamento de rejeições. É possível forçar manualmente as mitigações de rastreamento e conferir uma lista de sites com estados excluídos.
Para forçar mitigações de rastreamento, faça o seguinte:
- Bloquear cookies de terceiros no Chrome Navegue até
> Configurações > 
Privacidade e segurança > Cookies e outros dados do site > 
Bloquear cookies de terceiros. - Em
chrome://flags, defina o experimento Mitigações de rastreio por redirecionamento como Ativadas com exclusão. - Abra o DevTools, por exemplo, na página de demonstração (link em inglês) e navegue até Application > Background Services > Mitigações de rastreio por redirecionamento.
- Na página de demonstração, clique em um link de devolução e aguarde (10 segundos) para que o Chrome registre a rejeição. A guia Issues avisa sobre uma exclusão de estado que vai acontecer em breve.
- Clique em Forçar execução para excluir o estado imediatamente.
Notificações
Depois que um service worker recebe uma mensagem push de um servidor, usa a API Notifications para exibir os dados a um usuário. Para registrar notificações por três dias, mesmo quando o DevTools não estiver aberto:
- Abra o DevTools, por exemplo, nesta página de demonstração.
Navegue até Aplicativo > Serviços em segundo plano > Notificações e clique em
Record.
Na página de demonstração, clique em Programar notificação e em Permitir quando solicitado.
Aguarde a notificação aparecer. O DevTools registra os eventos de notificação na tabela.
Clique em um evento para ver os detalhes no espaço abaixo da tabela.
Feche o DevTools e deixe a gravação em execução por até três dias. Para interromper a gravação, clique em
Stop.
Carregamentos especulativos
Os carregamentos especulativos permitem o carregamento de página quase instantâneo com base em regras de especulação definidas por você. Isso permite que seu site faça a pré-busca e pré-renderização da maioria das páginas acessadas.
A pré-busca busca um recurso com antecedência, e a pré-renderização vai além e renderiza a página inteira em um processo oculto de renderização de segundo plano.
É possível depurar carregamentos especulativos na seção Aplicativo > Serviços em segundo plano > Carregamentos especulativos. A seção contém três visualizações:
- Carregamentos especulativos. Contém o status especulativo da página atual, o URL atual, as páginas que a página atual tenta carregar especulativamente e os status delas.
- Regras. Contém os conjuntos de regras da página atual no painel Elementos e o status geral das especulações.
- Especulações. Contém uma tabela com informações sobre as tentativas de carregamento especulativo e os status delas. Em caso de falha em uma tentativa, clique nela na tabela para consultar informações detalhadas e o motivo da falha.
Tente depurar os carregamentos especulativos nesta página de demonstração:
Abra o DevTools na página e acesse Aplicativo > Serviços em segundo plano > Carregamentos especulativos. Se não for possível visualizar carregamentos especulativos iniciados pela página, atualize-a.
A página inicial da demonstração pré-renderiza duas páginas e não faz a pré-renderização de uma. Clique em Acessar todas as especulações.
Em Especulações, selecione a especulação com o status Falha para conferir o Motivo da falha na seção com informações detalhadas na parte de baixo.
Nesse caso, a pré-renderização falhou porque não há uma página
/next3.htmlno site.Abra a seção Regras e clique em Status para ver o conjunto de regras na parte inferior. Ao clicar no link Conjunto de regras, você acessa o painel Elementos e mostra onde a regra de especulação está definida.
Para um tutorial mais detalhado, consulte Como depurar regras de especulação.
Mensagens push
Para exibir uma notificação push a um usuário, um service worker precisa primeiro usar a API Push Message para receber dados de um servidor. Quando o service worker estiver pronto para exibir a notificação, ele usará a API Notifications. Para registrar mensagens push por três dias, mesmo quando o DevTools não estiver aberto:
- Abra o DevTools, por exemplo, nesta página de demonstração.
Navegue até Aplicativo > Serviços em segundo plano > Mensagens push e clique em
Registro.
Na página de demonstração, alterne para Ativar notificações push, clique em Permitir quando solicitado, digite e envie uma mensagem. O DevTools registra eventos de notificação push na tabela.
Clique em um evento para ver os detalhes no espaço abaixo da tabela.
Feche o DevTools e deixe a gravação em execução por até três dias. Para interromper a gravação, clique em
Stop.
API Reporting
Alguns erros acontecem apenas na produção. Você nunca os vê localmente ou durante o desenvolvimento porque usuários reais, redes e dispositivos mudam o jogo.
Por exemplo, digamos que seu novo site dependa de software de terceiros que usa document.write() para carregar scripts essenciais. Novos usuários em todo o mundo abrem o site, mas é possível que a conexão deles seja mais lenta do que a anterior. Você não reconhece, seu site começa a apresentar falhas porque o Chrome intervém contra document.write() em redes lentas. Outra opção é ficar de olho nas APIs descontinuadas ou que serão desativadas em breve na sua base de código.
A API Reporting foi criada para ajudar você a monitorar chamadas de API descontinuadas, violações de segurança da sua página e muito mais. Você pode configurar a geração de relatórios conforme descrito em Monitorar seu aplicativo da Web com a API Reporting.
Para visualizar os relatórios gerados por uma página:
- Acesse
chrome://flags/#enable-experimental-web-platform-features, defina Recursos experimentais da Plataforma Web como Ativado e reinicie o Chrome. Abra o DevTools e acesse Aplicativo > Serviços em segundo plano > API Reporting. Por exemplo, confira os relatórios nesta página de demonstração.
A guia API Reporting é dividida em três partes:
- A tabela Relatórios com as seguintes informações sobre cada relatório:
- URL que gerou a geração do relatório
- Tipo de violação
- Status do relatório
- Endpoint de destino
- Carimbo de data/hora Gerado em
- Denunciar Corpo
- A seção de visualização do Corpo do relatório. Para visualizar o corpo de um relatório, clique nele na tabela de relatórios.
- A seção Endpoints com uma visão geral de todos os endpoints configurados no cabeçalho
Reporting-Endpoints.
Status do relatório
A coluna Status informa se o Chrome enviou o relatório, se está prestes a enviá-lo ou se falhou.
| Status | Descrição |
|---|---|
Success |
O navegador enviou o relatório, e o endpoint respondeu com um código de êxito (200 ou outro código de resposta de êxito 2xx). |
Pending |
O navegador está tentando enviar o relatório. |
Queued |
O relatório foi gerado e o navegador ainda não está tentando enviá-lo. Elas aparecem como Queued em um destes dois casos:
|
MarkedForRemoval |
Depois de tentar novamente por um tempo (Queued), o navegador parou de tentar enviar o relatório e, em breve, o removerá da lista de relatórios a serem enviados. |
Os relatórios são removidos depois de algum tempo, mesmo que não sejam enviados.