Depurar Progressive Web Apps

Use o painel Application para inspecionar, modificar e depurar manifestos, service workers e caches de service worker de apps da Web.

Os Progressive Web Apps (PWAs) são aplicativos modernos e de alta qualidade criados com tecnologia da Web. Os PWAs oferecem recursos semelhantes aos de apps para iOS, Android e para computador. São eles:

• Confiável mesmo em condições de rede instáveis.
• Instalável para iniciar plataformas de sistemas operacionais, como a pasta Aplicativos no Mac OS X, o menu Iniciar do Windows e a tela inicial no Android e no iOS.
• Apareça em alternadores de atividades, mecanismos de pesquisa de dispositivos como o Spotlight e em planilhas de compartilhamento de conteúdo.

Este guia discute apenas os recursos de App Web Progressivo do painel Aplicativo. Se você procura ajuda sobre outros painéis, confira a última seção deste guia, Guias do painel Outros aplicativos.

Resumo

• Use a guia Manifest para inspecionar o manifesto do seu app da Web.
• Use a guia Service Workers para acessar uma série de tarefas relacionadas ao service worker, como cancelar o registro ou atualizar um serviço, emular eventos de push, ficar off-line ou interromper um service worker.
• Veja o cache do service worker na guia Armazenamento de cache.
• Cancele o registro de um service worker e limpe todo o armazenamento e os caches com um único clique na guia Limpar armazenamento.

Manifesto do app da Web

Se você quiser que seus usuários possam adicionar seu app à pasta Aplicativos no Mac OS X, ao menu Iniciar do Windows e à tela inicial do Android e iOS, será necessário um manifesto do app da Web. O manifesto define como o app aparece na tela inicial, para onde direcionar o usuário ao iniciar pela tela inicial e qual será a aparência do app após a inicialização.

Depois de configurar o manifesto, use a guia Manifest do painel Application para inspecioná-lo.

• Para conferir a origem do manifesto, clique no link abaixo do rótulo Manifesto do app (manifest.webmanifest na captura de tela acima).
• As seções Identity e Presentation exibem apenas campos da origem do manifesto de uma maneira mais fácil de usar.
• A seção Gerenciadores de protocolo permite testar o registro do gerenciador de protocolo de URL do seu PWA com um clique de um botão. Para saber mais, consulte Registro do gerenciador de protocolo do URL de teste.
• A seção Ícones exibe todos os ícones especificados e permite verificar as máscaras deles.
• O conjunto de seções do Atalho #N exibe informações sobre todos os seus objetos de atalho.
• O conjunto de seções Captura de tela #N exibe as capturas de tela para uma interface de instalação mais avançada do app.

Além disso, se o DevTools encontrar um erro, como um ícone que não pode ser carregado, a guia Manifest vai mostrar uma seção Installability descrevendo o erro.

Conferir e verificar ícones mascaráveis

A seção Ícones da guia Manifesto mostra todos os ícones do seu aplicativo. Nesta seção, você também pode conferir as áreas seguras para ícones mascaráveis, o formato dos ícones que se adaptam às plataformas.

Para cortar os ícones e deixar apenas a área segura mínima visível, marque Mostrar apenas a área de segurança mínima para ícones mascaráveis.

Se todo o logotipo estiver visível na área segura, está tudo pronto.

Acionar instalação

O Chrome permite que você ative e promova a instalação do PWA diretamente na interface do usuário. Saiba como oferecer sua própria experiência de instalação no app.

Para acionar o fluxo de instalação do PWA:

1. Abra a página de destino do PWA no Chrome.

2. No lado direito da barra de endereço localizada na parte de cima, clique em Instalar.

   

3. Siga as instruções na tela.

O recurso Instalar app não pode simular o fluxo de trabalho em dispositivos móveis. Observe como o navegador Chrome para computador exibe o botão de instalação na barra de endereço, mesmo com o DevTools no Modo dispositivo. No entanto, se você conseguir adicionar o app ao computador, ele também vai funcionar para dispositivos móveis.

Se você quiser testar a experiência genuína para dispositivos móveis, conecte um dispositivo móvel real ao DevTools por meio da depuração remota. Para acionar a instalação no dispositivo móvel conectado, abra o menu de três pontos e clique em Instalar app.

Inspecionar atalhos

Com os atalhos de apps, você pode dar acesso rápido a algumas ações comuns das quais os usuários precisam com frequência.

Para inspecionar os atalhos que você definiu no seu arquivo de manifesto, role até as seções Atalho #N da guia Manifesto.

Inspecione capturas de tela para ter uma interface de instalação mais avançada

Quando você adiciona uma descrição e um conjunto de capturas de tela ao arquivo de manifesto, o app recebe uma caixa de diálogo de instalação mais completa.

Para inspecionar as capturas de tela, role até as seções Captura de tela #N da guia Manifesto.

Testar o registro do gerenciador de protocolo de URL

Os PWAs processam links que usam um protocolo específico para oferecer uma experiência mais integrada. Para saber como criar um gerenciador, consulte Registro do gerenciador de protocolo de URL para PWAs.

Para testar o gerenciador:

1. Abra o DevTools na página de destino do PWA. Por exemplo, confira esta demonstração do PWA.
2. Na página de demonstração, instale o PWA e recarregue o app após a instalação. O navegador registrou o PWA como um gerenciador do protocolo web+coffee.
3. Na seção Aplicativo > Manifesto > Gerenciador de protocolo, insira o URL que você quer que o gerenciador teste e clique em Testar protocolo. Neste exemplo, o gerenciador pode processar americano, chai e latte-macchiato.
4. Quando o Chrome perguntar se pode abrir o app, confirme clicando em Open Protocol Handler.
5. Na caixa de diálogo seguinte, permita que o app processe links web+coffee.

Se o gerenciador processar o link com êxito, você verá uma imagem de uma xícara de café aberta no aplicativo.

Service workers

Os service workers são uma tecnologia fundamental para a plataforma Web do futuro. Eles são scripts que o navegador executa em segundo plano, separados de uma página da Web. Esses scripts permitem acessar recursos que não precisam de uma página da Web ou interação do usuário, como notificações push, sincronização em segundo plano e experiências off-line.

Guias relacionados:

• Introdução aos service workers
• Notificações push: oportunas, relevantes e precisas

A guia Service Workers no painel Application é o local principal no DevTools para inspecionar e depurar service workers.

• Se um service worker estiver instalado na página aberta no momento, você o verá listado nessa guia. Por exemplo, na captura de tela acima, há um service worker instalado para o escopo de https://airhorner.com/.
• A caixa de seleção Off-line coloca o DevTools em modo off-line. Isso é equivalente ao modo off-line disponível no painel Network ou à opção Go offline no Menu de comando.
• A caixa de seleção Atualizar ao recarregar força o service worker a atualizar em cada carregamento de página.
• A caixa de seleção Ignorar para rede ignora o service worker e força o navegador a acessar a rede para os recursos solicitados.
• O link Solicitações de rede leva você ao painel Rede com uma lista de solicitações interceptadas relacionadas ao service worker (filtro is:service-worker-intercepted).
• O link Atualizar executa uma atualização única do service worker especificado.
• O botão Push emula uma notificação sem um payload (também conhecido como tickle).
• O botão Sync emula um evento de sincronização em segundo plano.
• O link Unregister cancela o registro do service worker especificado. Acesse Limpar armazenamento para saber como cancelar o registro de um service worker e limpar o armazenamento e os caches com um único clique.
• A linha Source informa quando o service worker em execução no momento foi instalado. O link é o nome do arquivo de origem do service worker. Ao clicar no link, você acessa a origem do service worker.
• A linha Status informa o status do service worker. O número nesta linha (#16 na captura de tela) indica quantas vezes o service worker foi atualizado. Se você ativar a caixa de seleção Atualizar ao recarregar, vai notar que o número aumenta a cada carregamento de página. Ao lado do status, você verá um link start (se o service worker estiver parado) ou um link stop (se o service worker estiver em execução). Os service workers são projetados para serem interrompidos e iniciados pelo navegador a qualquer momento. Interromper explicitamente o service worker usando o link de interrupção pode simular isso. Parar o service worker é uma ótima maneira de testar como seu código se comporta quando ele é reiniciado novamente. Frequentemente, ele revela bugs devido a suposições incorretas sobre o estado global persistente.
• A linha Clients informa a origem do escopo do service worker. O botão de foco é útil principalmente quando você tem vários service workers registrados. Se você clicar no botão de foco ao lado de um service worker que está sendo executado em uma guia diferente, o Chrome focará nessa guia.

• A tabela Ciclo de atualização mostra as atividades do service worker e os tempos decorridos deles, como instalação, espera e ativação. Para ver o carimbo de data/hora exato de cada atividade, clique nos botões Expand (expandir).

  

  Para mais informações, consulte O ciclo de vida do service worker.

Se o service worker causar erros, a guia Service Workers mostrará um ícone Error com o número de erros ao lado da linha Source. O link com o número leva você ao Console com todos os erros registrados.

Para ver informações sobre todos os service workers, clique em Ver todos os registros na parte inferior da guia Service Workers. Esse link leva a chrome://serviceworker-internals/?devtools, onde é possível depurar ainda mais seus service workers.

Caches do service worker

A guia Armazenamento em cache fornece uma lista somente leitura de recursos que foram armazenados em cache usando a API Cache do service worker.

Na primeira vez que você abrir um cache e adicionar um recurso a ele, o DevTools poderá não detectar a mudança. Atualize a página para ver o cache.

Se houver dois ou mais caches abertos, eles serão listados abaixo da lista suspensa Armazenamento de cache.

Uso de cota

Algumas respostas na guia "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á ativado.

Para evitar o vazamento de informações entre domínios, há um padding significativo no tamanho de uma resposta opaca. Esse recurso é usado para calcular os limites de cota de armazenamento (ou seja, se uma exceção QuotaExceeded foi gerada) e informado pela API navigator.storage.

Os detalhes desse preenchimento variam de navegador para navegador, mas, para o Google Chrome, isso significa que o tamanho mínimo que qualquer resposta opaca em cache individual contribui para o uso geral do armazenamento é de aproximadamente 7 megabytes. Tenha isso em mente ao determinar quantas respostas opacas você quer armazenar em cache, já que você pode facilmente exceder as limitações de cota de armazenamento muito antes do que esperaria com base no tamanho real dos recursos opacos.

Guias relacionados:

• Stack Overflow: quais limitações se aplicam a respostas opacas? (em inglês)
• Caixa de trabalho: noções básicas sobre a cota de armazenamento

Limpar armazenamento

A guia Limpar armazenamento é um recurso muito útil ao desenvolver Progressive Web Apps. Essa guia permite cancelar o registro de service workers e limpar todos os caches e armazenamento com um único clique. Confira a seção abaixo para saber mais.

Guias relacionados:

• Limpar armazenamento

Outros guias do painel Application

Confira os guias abaixo para receber mais ajuda sobre os outros painéis do painel Aplicativo.

Guias relacionados:

• Inspecionar recursos da página
• Inspecionar e gerenciar armazenamento local e caches