Depurar Progressive Web Apps

Kayce Basques

Sofia Emelianova

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

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

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

Este guia aborda apenas os recursos de Progressive Web App do painel Application. Se você precisar de ajuda com os outros painéis, consulte a última seção deste guia, Outros guias do painel Application.

Resumo

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

Manifesto do app da Web

Se você quiser que os usuários possam adicionar seu app à pasta Applications no Mac OS X, ao menu Start no Windows e à tela inicial no 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 na tela inicial e como o app aparece na inicialização.

Depois de configurar o manifesto, você pode usar a guia Manifest do painel Application para inspecioná-lo.

• Para conferir a origem do manifesto, clique no link abaixo do rótulo App Manifest (manifest.webmanifest na captura de tela acima).
• As seções Identity e Presentation mostram apenas campos da origem do manifesto de uma maneira mais fácil de usar.
• A seção Protocol Handlers permite testar o registro do gerenciador de protocolos de URL do PWA com um clique de um botão. Para saber mais, consulte Testar o registro do gerenciador de protocolos de URL.
• A seção Icons mostra todos os ícones especificados e permite verificar as máscaras.
• O conjunto de seções “Shortcut #N” mostra informações sobre todos os objetos de atalho.
• O conjunto de seções "Screenshot #N" mostra as capturas de tela para uma interface de instalação mais completa 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 Icons da guia Manifest mostra todos os ícones do aplicativo. Nessa seção, também é possível verificar áreas seguras para ícones mascaráveis, o formato de ícones que se adaptam a plataformas.

Para cortar os ícones de modo que apenas a área segura mínima fique visível, marque Show only the minimum safe area for maskable icons.

Se todo o logotipo estiver visível na área segura, você poderá continuar.

Acionar a instalação

O Chrome permite ativar e promover 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 na parte de cima, clique em Install.

   

3. Siga as instruções na tela.

Ponto principal:mantenha a gaveta Console aberta ao acionar a instalação. O Console informa se o manifesto tem problemas e registra outras informações sobre o ciclo de vida da instalação.

O recurso Install app (ou Add to home screen em alguns dispositivos) não pode simular o fluxo de trabalho para dispositivos móveis. Observe como o navegador Chrome para computador mostra o botão de instalação na barra de endereço, mesmo que o DevTools esteja em modo dispositivo. No entanto, se você conseguir adicionar o app ao computador, ele também vai funcionar no dispositivo móvel.

Se você quiser testar a experiência móvel real, conecte um dispositivo móvel real ao DevTools usando a depuração remota. Para acionar a instalação no dispositivo móvel conectado, abra o menu de três pontos e clique em Install app (ou Add to home screen).

Inspecionar atalhos

Os atalhos de apps permitem oferecer acesso rápido a algumas ações comuns que os usuários precisam com frequência.

Para inspecionar os atalhos definidos no seu arquivo de manifesto, role até as seções Shortcut #N da guia Manifest.

Observação: Observação: esta captura de tela foi feita nesta página de demonstração. Inspecione-a para mais exemplos.

Inspecionar capturas de tela para uma interface de instalação mais completa

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 Screenshot #N da guia Manifest.

Testar o registro do gerenciador de protocolos de URL

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

Para testar o gerenciador:

1. Abra o DevTools na página de destino do PWA. Por exemplo, confira este PWA de demonstração.
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 para o protocolo web+coffee.
3. Na seção Application > Manifest > Protocol Handler, insira o URL que você quer que o gerenciador teste e clique em Test protocol. Neste exemplo, o gerenciador pode processar americano, chai e latte-macchiato.
4. Quando o Chrome perguntar se ele pode abrir o app, confirme clicando em Open Protocol Handler.
5. Na próxima caixa de diálogo, permita que o app processe links web+coffee.

Se o gerenciador processar o link, uma imagem de uma xícara de café será aberta no app.

Service workers

Os service workers são uma tecnologia fundamental na futura plataforma da Web. 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 principal lugar no DevTools para inspecionar e depurar service workers.

• Se um service worker estiver instalado na página aberta no momento, ele vai aparecer 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 Offline coloca o DevTools no modo off-line. Isso é equivalente ao modo off-line disponível no painel Network ou à opção Go offline no menu de comandos.
• A caixa de seleção Update on reload força o service worker a ser atualizado em cada carregamento de página.
• A caixa de seleção Bypass for network ignora o service worker e força o navegador a acessar a rede para recursos solicitados.
• O link Network requests leva você ao painel Network com uma lista de solicitações interceptadas relacionadas ao service worker (filtro is:service-worker-intercepted).
• O link Update executa uma atualização única do service worker especificado.
• O botão Push emula uma notificação push 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. Confira 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 foi instalado. O link é o nome do arquivo de origem do service worker. Clicar no link envia você para a origem do service worker.
• A linha Status informa o status do service worker. O número nessa linha (#16 na captura de tela) indica quantas vezes o service worker foi atualizado. Se você ativar a caixa de seleção Update on reload, o número será incrementado em 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 stop pode simular isso. Interromper o service worker é uma ótima maneira de testar como o código se comporta quando o service worker é reiniciado. Ele geralmente revela bugs devido a suposições incorretas sobre o estado global persistente.
• A linha Clients informa a origem para a qual o service worker está no escopo. O botão focus é mais útil quando você tem vários service workers registrados. Se você clicar no botão focus ao lado de um service worker que está sendo executado em outra guia, o Chrome vai se concentrar nessa guia.

• A tabela Update Cycle mostra as atividades do service worker e os tempos decorridos, como instalar, aguardar e ativar. Para conferir o carimbo de data/hora exato de cada atividade, clique nos botões Expand.

  

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

Se o service worker causar erros, a guia Service Workers vai 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 conferir informações sobre todos os service workers, clique em See all registrations na parte de baixo da guia Service Workers. Esse link leva você a chrome://serviceworker-internals/?devtools, onde é possível depurar ainda mais os service workers.

Caches de service workers

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

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

Se você tiver dois ou mais caches abertos, eles vão aparecer listados abaixo do menu suspenso Cache Storage.

Utili­zação de cota

Algumas respostas na guia "Cache Storage" podem ser marcadas como "opacas". Isso se refere a uma resposta recuperada de uma origem diferente, como de uma CDN ou API remota, quando CORS não está ativado.

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

Os detalhes desse preenchimento variam de navegador para navegador, mas, no Google Chrome, isso significa que o tamanho mínimo que qualquer resposta opaca armazenada em cache contribui para o uso do armazenamento geral é de aproximadamente 7 megabytes. É importante considerar isso ao determinar quantas respostas opacas você quer armazenar em cache, já que é possível 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? (link em inglês)
• Workbox: entender a cota de armazenamento (link em inglês)

Limpar armazenamento

A guia Clear Storage é 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 mais ajuda sobre os outros painéis do Application.

Guias relacionados:

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