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 Apps Web Progressivos (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 plataformas de sistemas operacionais, como a pasta Applications no Mac OS X, o menu Start no Windows e a tela inicial no Android e no 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 do App Web Progressivo do painel Application. Se você precisar de ajuda com os outros painéis, consulte a última seção deste guia, Outros guias de painéis do aplicativo.

Resumo

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

Manifesto do app da Web

Se você quiser que os usuários possam adicionar o app à pasta Applications no Mac OS X, ao menu Start no Windows e à tela inicial no Android e no iOS, você vai precisar de um manifesto de app da Web. O manifesto define como o app aparece na tela inicial, para onde direcionar o usuário ao abrir o app e como ele aparece ao ser aberto.

Depois de configurar o manifesto, use a guia Manifesto 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 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 Testar o registro do gerenciador de protocolos de URL.
• A seção Ícones mostra todos os ícones especificados e permite verificar as máscaras.
• O conjunto de seções Atalho #N mostra informações sobre todos os objetos de atalho.
• O conjunto de capturas de tela N # mostra as capturas de tela para uma interface de instalação mais rica do app.

Além disso, se as Ferramentas do desenvolvedor encontrarem um erro, como um ícone que não pode ser carregado, a guia Manifesto vai mostrar uma seção Instalabilidade que descreve 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 verificar áreas seguras para ícones mascaráveis, o formato de ícones que se adaptam às plataformas.

Para ajustar os ícones de modo que apenas a área segura mínima fique visível, marque Mostrar apenas a menor área segura para ícones mascaráveis.

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

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 da PWA:

1. Abra a página de destino da 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.

Importante:mantenha a gaveta do 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 Instalar app 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ços, mesmo que o DevTools esteja no Modo dispositivo. No entanto, se você conseguir adicionar o app ao computador, ele também vai funcionar em dispositivos móveis.

Se você quiser testar a experiência real em dispositivos móveis, 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 Instalar app.

Inspecionar atalhos

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

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

Observação:observação: esta captura de tela foi tirada da página de demonstração. Confira mais exemplos.

Inspecionar capturas de tela para 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 completa.

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 agora 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 pode 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, uma imagem de uma xícara de café será aberta no app.

Service workers

Os service workers são uma tecnologia fundamental na plataforma da 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: rápidas, relevantes e precisas

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

• Se um service worker estiver instalado na página aberta no momento, ele será listado nesta aba. Por exemplo, na captura de tela acima, há um worker de serviço instalado para o escopo de https://airhorner.com/.
• A caixa de seleção Off-line coloca as Ferramentas do desenvolvedor no modo off-line. Isso é equivalente ao modo off-line disponível no painel Network ou à opção Go offline no Command Menu.
• 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 (Desviar para rede) ignora o worker do serviço 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 worker de serviço (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 push sem um payload (também conhecido como tickle).
• O botão Sync emula um evento de sincronização em segundo plano.
• O link Cancelar inscrição cancela o registro do service worker especificado. Consulte Limpar armazenamento para saber como cancelar o registro de um worker de serviço e limpar o armazenamento e os caches com um único clique.
• A linha Source informa quando o worker de serviço em execução foi instalado. O link é o nome do arquivo de origem do worker de serviço. Ao clicar no link, você é direcionado à origem do worker de serviço.
• 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 Atualizar na recarga, vai notar que o número vai aumentar a cada carregamento de página. Ao lado do status, você verá um link start (se o worker de serviço estiver parado) ou stop (se o worker de serviço estiver em execução). Os service workers foram projetados para serem interrompidos e iniciados pelo navegador a qualquer momento. É possível simular isso interrompendo explicitamente o worker de serviço usando o link stop. Interromper o service worker é uma ótima maneira de testar como o código se comporta quando o service worker é reiniciado. Ele frequentemente revela bugs devido a suposições incorretas sobre o estado global persistente.
• A linha Clientes informa a origem para a qual o worker de serviço está limitado. O botão foco é mais útil quando você tem vários service workers registrados. Se você clicar no botão foco ao lado de um service worker que está sendo executado em uma guia diferente, o Chrome vai focar nessa guia.

• A tabela Ciclo de atualização mostra as atividades do worker do serviço e o tempo decorrido, como instalação, espera e ativação. 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 worker de serviço causar algum erro, a guia Workers de serviço vai mostrar um ícone Erro com o número de erros ao lado da linha Origem. 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 Ver todos os registros na parte de baixo da guia Service Workers. Este link leva a chrome://serviceworker-internals/?devtools, onde você pode depurar melhor seus service workers.

Caches de service worker

A guia Armazenamento em cache mostra uma lista somente leitura de recursos 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 talvez não detecte a mudança. Atualize a página para ver o cache.

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

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 um CDN ou de uma API remota, quando o CORS não está ativado.

Para evitar o vazamento de informações entre domínios, há um padding significativo adicionado ao tamanho de uma resposta opaca usada para calcular os limites de cota de armazenamento, ou seja, se uma exceção QuotaExceeded é gerada e informada 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 mais cedo do que o esperado com base no tamanho real dos recursos opacos.

Guias relacionados:

• Stack Overflow: What limitations apply to opaque responses?
• Workbox: Como entender a cota de armazenamento

Limpar armazenamento

A guia Limpar armazenamento é um recurso muito útil ao desenvolver apps da Web progressivos. 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 de aplicativos

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

Guias relacionados:

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