Neste tutorial, vou explicar como você pode usar a guia Application nas Ferramentas de Desenvolvedor do Chrome para investigar os recursos de um aplicativo da web. Especialmente em foco estão diferentes opções de armazenamento como Local Storage, Session Storage e IndexedDB. Também são abordados o gerenciamento de dados, o armazenamento por Service Worker e o manuseio de Cookies. Ao otimizar a gestão de armazenamento, você pode garantir que seu aplicativo da web funcione de forma mais eficiente.
Principais conclusões
- A guia Application é uma ferramenta central para análise e otimização de seu aplicativo da web.
- Você pode investigar o arquivo Manifesto, Service Workers, opções de armazenamento e Cookies diretamente no navegador.
- A exclusão e o reset dessas opções de armazenamento podem ajudar na resolução de problemas e otimização de desempenho.
Passo a passo
Acesso à guia Application
Para abrir a guia Application, acesse sua página e pressione a tecla F12 ou clique com o botão direito e selecione "Inspecionar". Nas Ferramentas de Desenvolvedor, você encontrará a guia "Application", que oferece uma visão geral dos diferentes recursos utilizados por seu aplicativo da web.
Examinando o Manifesto
No guia Application, certifique-se de acessar a seção "Manifesto". Aqui você poderá ver o arquivo de manifesto de seu aplicativo da web e verificar as informações fornecidas corretamente, como ícones, nomes e descrições. Isso é especialmente importante ao desenvolver Progressive Web Apps (PWAs).
Uso de Service Worker
O próximo passo é examinar os Service Workers. Eles são essenciais para a operação offline de seu aplicativo da web. Clique na seção "Service Workers" para ver os Service Workers registrados e testar suas funcionalidades, como mensagens Push ou sincronização.
Testando a funcionalidade offline
Um ponto importante é testar a funcionalidade offline. Você pode ativar o modo offline e recarregar a página para ver como ela se comporta. Um aplicativo da web bem projetado deve funcionar também nesse estado e fornecer orientações apropriadas quando estiver offline.
Análise de armazenamento
Agora vá para a seção "Storage". Aqui você terá uma visão geral do cache, Local Storage, Session Storage e IndexedDB. Essas opções de armazenamento desempenham um papel crucial ao se tratar de armazenar dados entre visitas ou sessões diferentes.
Excluir dados armazenados
Você pode excluir todos os dados armazenados marcando as caixas correspondentes e então selecionando "Limpar dados do site". Isso pode ser útil para solucionar problemas causados por dados desatualizados ou corrompidos.
Trabalhando com o Local Storage
Agora vá para o Local Storage e defina alguns valores. Você pode usar localStorage.setItem('chave', 'valor'); no console para criar uma nova entrada e então atualizar a área de Local Storage para ver as mudanças.
Alterando valores no Local Storage
Nesta seção, você também pode alterar valores diretamente. Dê um duplo clique em um valor para editá-lo. Observe que textos no formato JSON podem ser inseridos, permitindo que você armazene dados mais complexos.
Uso de Session Storage
O Session Storage é semelhante ao Local Storage, porém é específico por pessoa e é apagado quando a guia ou navegador é fechado. Você pode testar isso adicionando alguns valores e verificando-os durante sua sessão.
Investigação de Cookies
Clique na área "Cookies" do domínio da sua Web-App para ver os cookies que foram definidos. Você pode verificar os valores desses cookies, alterá-los ou até mesmo excluí-los. Isso é especialmente importante se estiver enfrentando problemas com sessões de usuário ou autenticação.
Visão Geral do Armazenamento de Cache
O Armazenamento de Cache fornece uma visão geral de todos os arquivos em cache que sua aplicação utiliza. Isso ajuda a entender quais arquivos estão disponíveis offline ou que podem precisar ser atualizados.
Utilização de Serviços em Segundo Plano
Se sua Web-App utiliza funcionalidades como notificações ou sincronização em segundo plano, você pode encontrá-las em "Serviços em Segundo Plano". Isso é especialmente importante para o desenvolvimento de PWAs, pois esses recursos são utilizados para aprimorar a experiência do usuário.
Análise de Frames e iFrames
Se você utiliza iFrames ou Framesets em sua Web-App, pode verificar os recursos carregados na seção "Frames". Aqui você pode ver quais arquivos são carregados pelos iFrames e se há algum problema associado.
Resumo
Neste guia, você aprendeu como pode utilizar as diferentes funcionalidades das guias de aplicativos nas ferramentas de desenvolvimento do Chrome. Você obteve uma visão geral do manifesto, o uso de Service Workers, as diferentes opções de armazenamento e a gestão de cookies. Ao analisar e otimizar regularmente esses recursos, você pode melhorar significativamente o desempenho de sua Web-App.
Perguntas Frequentes
Como posso acessar a guia de aplicativos?Pressione F12 ou clique com o botão direito em uma página e selecione "Inspecionar".
Qual a diferença entre Local Storage e Session Storage?O Local Storage armazena dados permanentemente, enquanto o Session Storage é válido apenas durante a sessão do navegador.
Como posso excluir cookies na guia de aplicativos?Vá para a seção "Cookies" e selecione o domínio, então você pode visualizar e deletar os cookies.
Como posso testar a funcionalidade offline da minha Web-App?Ative o modo offline na seção de Rede e atualize a página para testar sua funcionalidade offline.
O que é um Service Worker?Um Service Worker é um script instalado em segundo plano pelo navegador que controla solicitações de rede, permitindo funcionalidade offline e em cache.
