Depurar Progressive Web Apps

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

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

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

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

Resumo

• Use a guia Manifest para inspecionar o manifesto do seu app da Web.
• Use a guia Service Workers para uma série de tarefas relacionadas a service worker, como descadastrar 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 em 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 adicionem seu app à pasta Aplicativos no Mac OS X, ao menu Iniciar no Windows e à tela inicial no Android e iOS, será necessário um manifesto de apps da Web. O manifesto define como o app aparece na tela inicial, para onde direcionar o usuário ao iniciar da tela inicial e a aparência do app quando ele é iniciado.

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 App Manifest (manifest.webmanifest na captura de tela acima).
• As seções Identidade e Apresentação mostram 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. Para saber mais, consulte Registro do gerenciador de protocolos do URL de teste.
• A seção Ícones exibe cada ícone que você especificou e permite que você verifique suas máscaras.
• O conjunto de seções do Atalho #N exibe informações sobre todos os objetos de atalho.
• O conjunto de seções da Captura de tela #N exibe as capturas de tela para uma interface de instalação mais avançada do seu app.

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

Acessar e verificar ícones mascaráveis

A seção Ícones da guia Manifesto mostra todos os ícones do seu aplicativo. Nesta 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 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 para começar.

Acionar instalação

O Chrome permite ativar e promover a instalação do seu 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 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 mostra o botão de instalação na barra de endereço, mesmo que o DevTools esteja no Modo dispositivo. No entanto, se você conseguir adicionar o app ao computador, ele também vai funcionar para dispositivos móveis.

Caso queira testar a experiência móvel genuína, você pode conectar um dispositivo móvel real ao DevTools usando a depuração remota (link em inglês). Para iniciar a instalação no dispositivo móvel conectado, abra o menu de três pontos do e clique em Instalar app.

Inspecionar atalhos

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

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

Inspecione as capturas de tela para ter uma interface de instalação mais rica

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 avançada.

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

Testar o registro do gerenciador de protocolo 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 da sua PWA. Por exemplo, confira esta 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 do 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 é possível abrir o app, confirme clicando em Abrir gerenciador de protocolo.
5. Na próxima caixa de diálogo, permita que o app processe links web+coffee.

Se o gerenciador processar o link corretamente, você verá a imagem de uma xícara de café aberta no app.

Service workers

Os service workers são uma tecnologia fundamental na futura plataforma da Web. Eles são scripts que o navegador executa em segundo plano, separado de uma página da Web. Esses scripts permitem que você acesse 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 lugar principal no DevTools para inspecionar e depurar service workers.

• Se um service worker estiver instalado na página aberta no momento, ele vai aparecer listado nesta guia. Por exemplo, na imagem acima, há um worker de serviço instalado para o escopo de https://airhorner.com/.
• A caixa de seleção Off-line 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 comando.
• A caixa de seleção Atualizar ao recarregar 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 receber os recursos solicitados.
• O link Solicitações de rede leva você ao painel Rede com uma lista de solicitações interceptadas relacionadas ao worker de serviço (filtro is:service-worker-intercepted).
• O link Atualizar realiza uma atualização pontual do service worker especificado.
• O botão Push emula uma notificação por push sem um payload (também conhecido como um código).
• O botão Sincronizar emula um evento de sincronização em segundo plano.
• O link Cancelar registro cancela o registro do service worker especificado. Confira Limpar armazenamento para ver uma maneira de cancelar o registro de um service worker e excluir permanentemente armazenamento e 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ê é direcionado 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, vai notar que o número aumenta a cada carregamento da página. Ao lado do status, você verá um link start (se o service worker estiver parado) ou 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 seu service worker usando o link stop pode simular isso. Interromper seu service worker é uma ótima maneira de testar como seu código se comporta quando o service worker é reiniciado. Com frequência, ela revela bugs causados por conceitos incorretos sobre o estado global persistente.
• A linha Clients informa a origem a que o service worker está direcionado. O botão de foco é mais útil principalmente quando você tem vários service workers registrados. Se você clicar no botão focus ao lado de um service worker em execução em uma guia diferente, o Chrome foca nessa guia.

• A tabela Ciclo de atualização 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 Expandir.

  

  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 ver informações sobre todos os service workers, clique em See all records na parte inferior da guia Service Workers. Este link leva a chrome://serviceworker-internals/?devtools, onde você pode depurar ainda mais seus service workers.

Caches de service worker

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

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

Se dois ou mais caches estiverem abertos, eles aparecerão na lista suspensa Armazenamento em 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 uma CDN ou API remota, quando o CORS não está ativado.

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

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

Guias relacionados:

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

Limpar armazenamento

A guia Limpar armazenamento é um recurso muito útil no desenvolvimento de Progressive Web Apps. Essa guia permite cancelar o registro de service workers e limpar todos os caches e armazenamentos 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 Application.

Guias relacionados:

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