Em “Chaves para um rápido web app” eu listei cache como uma grande vitória de desempenho. Eu vou focar em cache nos próximos meses. O primeiro passo é um estudo que lancei há alguns meses chamado “Clear Browser Experiment”. Antes de tentar medir a frequência e os benefícios do cache, eu queria começar avaliando o que acontece quando os usuários limpam o cache. Além do cache de disco do browser, eu comecei isso para incluir outros tipos de dados persistentes: cookies, localStorage, e cache de aplicação. (Eu não inclui IndexedDB porque é menos importante.)

Configuração da experiência

O teste começa indo para a página “Save Stuff“. Essa página faz quatro coisas:

• Define um cookie persistente chamado “cachetest”. Ele é criado usando JavaScript.
• Testa window.localStorage para ver se localStorage é suportado. Se assim for, salva um valor para localStorage com a chave “cachetest”.
• Testa window.applicationCache para ver se appcache é suportado. Se assim for, carrega um iframe que usa appcache. O arquivo de manifesto do iframe tem uma seção de retorno contendo “iframe404.js iframe.js”. Uma vez que iframe404.js não existe, o appcache deve carregar iframe.js, que define a variável global iframejsNow.
• Carrega uma imagem que leva 5 segundos para retornar. A imagem é armazenável em cache durante 30 dias.

Depois que esses dados são salvos para o navegador, é solicitada ao usuário a limpeza do seu navegador e que ele prossiga para a página de verificação de cache. Essa página verifica se os itens anteriores ainda existem:

• Procura pelo cookie chamado “cachetest”.
• Verifica localStorage para a chave “cachetest”.
• Carrega o iframe novamente. O handler onload do iframe verifica se o iframejsNow é definido, no caso de o appcache não ter sido apagado.
• Carrega a imagem de 5 segundos de novo. O handler da imagem onload verifica se ela leva mais de 5 segundos para retornar, no caso de o disco do cache de ter sido apagado.

Meus resultados

Eu criei um teste de usuário Browserscope para armazenar os resultados. (Se você ainda não usou esse recurso, deveria realmente dar uma conferida.). Esse teste é diferente dos meus outros, porque exige que o usuário faça uma ação. Devido a isso, eu rodei o teste em vários navegadores para criar uma tabela de resultados comparativos. Verde e “1” indicam os dados foram apagados com sucesso, enquanto vermelho e “0” indicam que não foi. O vazio significa que o recurso não era suportado.

Os resultados variam, porém são realmente mais consistentes do que eu esperava. Algumas observações:

• O Chrome 21 não limpa localStorage. Isso talvez seja um resultado anormal devido à estrutura do teste. O Chrome 21 limpa o localStorage, mas não o faz na memória da aba atual. Se você trocar de abas ou reiniciar o Chrome, o resultado vai estar desmarcado. No entanto, seria melhor limpá-lo a partir da memória. A equipe do Chrome já consertou esse bug como evidenciado pelos resultados crowdsourced para o Chrome 23.0.1259 e posterior.
• O Firefox 3.6 não limpa o cache de disco. A questão do cache de disco é semelhante à história do Chrome 21: a imagem é apagada do cache de disco, mas não do cache de memória. Idealmente ambos seriam apagadas, e a equipe do Firefox corrigiu esse bug em 2010.
• IE 6-7 não suporta nem appcache nem localStorage.
• IE 8-9 não suporta appcache.
• Firefox 3.6, IE 8-9, e Safari 5.0.5 não limpam localStorage. A minha hipótese para esse resultado é que não há interface de usuário ligada a localStorage. Consulte a seção seguinte sobre navegador UIs para screenshots desses navegadores.

Browser UIs

Antes de olhar os resultados encontrados, é importante ver que tipo de desafios a interface do usuário do navegador apresenta aos dados limpos. Isso é também um guia prático, apesar de longo, para limpar os dados para vários navegadores. (Pegamos as imagens e as seleções no menu a partir de Mac e Windows, para que você possa ver algo diferente.)

Chrome

No Chrome 21, ao clicando no ícone de configurações -> Histórico -> Limpar todos os dados de navegação… é exibida a janela abaixo. Se você marcar “Esvaziar o cache”, limpa o cache de disco, e “Excluir cookies e outros sites e dados de plug-in” apaga cookies, localStorage, e appcache.

 

Firefox

Para limpar o Firefox 3.6, clique em Ferramentas -> Limpar histórico recente… e verifique Cookies e Cache. Para ser mais agressivo, eu também verifico Preferências do site, mas nenhuma dessas checkboxes faz com que o localStorage seja limpo.

O Firefox 12 corrige esse problema adicionando uma checkbox para dados de site offline. Ele tem as mesmas escolhas. Como resultado, localStorage é apagado com sucesso.

 

Internet Explorer

É um pouco mais trabalhoso limpar o IE 6. Ao clicar em Ferramentas -> Opções de Internet… -> Geral, aparecem dois botões: Excluir Cookies e Excluir Arquivos… Ambos precisam ser selecionados e confirmados para limpar o navegador. Há uma opção “Excluir todo o conteúdo offline”, mas já que appcache e localStorage não são suportados, isso não é relevante para esta experiência.

A limpeza do IE 7 é feita da seguinte forma: vá em Ferramentas -> Excluir (?) Histórico de Navegação… Existem ainda botões separados para apagar arquivos e excluir cookies, mas há também um botão “Excluir tudo…” (?) para realizar tudo em uma ação.

A limpeza da UI para o IE8 é conseguida por meio de Ferramentas -> Opções de Internet -> Geral -> Excluir… Ele possui uma checkbox adicional para limpar os dados em relação ao IE 7: “InPrivateFiltering data”. O LocalStorage é suportado no IE 8, mas de acordo com os resultados não é limpo, e agora vemos uma provável explicação: não existe opção para limpar explicitamente os dados offline da web (como existe no Firefox 12 +).

A limpeza de UI do IE 9 muda mais uma vez. “Download de Histórico” é adicionado, e “Dados da Filtragem InPrivate” é substituída por “a filtragem de ActiveX e Rastreamento de proteção de dados”. Semelhante ao IE 8, localStorage é suportado no IE 9, mas de acordo com os resultados não é limpo, e a provável explicação é que não há uma opção para limpar os dados offline da web explicitamente (como existe no Firefox 12 +).

iPhone

O iPhone (não surpreendentemente) tem a interface de usuário mais simples para limpar os dados do navegador. Passando por Configurações -> Safari, encontramos um único botão: “Limpar cookies e dados”. Os resultados dos testes mostram que ele apaga os cookies, appcache, localStorage, e cache de disco. É difícil executar o meu teste no iPhone, porque você tem que sair do navegador para chegar a configurações, então quando você volta ao navegador a página de teste foi apagada. Eu resolvo isso digitando a URL da página seguinte no teste: http://stevesouders.com/tests/clearbrowser/check.php.

Opera

O Opera oferece um refinamento melhor para deletar. No Opera 12. vá em Ferramentas -> Apagar dados privados… Ele exibe uma caixa de diálogo. As checkboxes chave para este teste são “Excluir todos os cookies”, “Excluir todo o cache” e “Excluir armazenamento persistente”. Há muita coisa para escolher, mas é tudo em um diálogo.

Safari

No Safari 5.0.5, indo para o ícone de configuração -> Reset Safari… (no Windows), exibe uma caixa de diálogo com muitas opções. Nenhuma delas aborda “dados offline” de forma explícita, e é provavelmente por isso que os resultados mostram que localStorage não foi apagado. (“Limpar histórico” não tem efeito – Eu apenas tentei para ver se ele iria limpar localStorage.)

O Safari 5.1.7 foi confuso para mim. No começo, eu escolhi Safari -> cache vazio… (no Mac), mas percebi que isso só afetou o cache de disco. Eu também vi Safari -> Reset Safari… Mas lá só tinha “Remova todos os dados do site”, o que parecia muito vago e amplo. Eu fui à procura de mais opções de compensação e encontrei Safari -> Preferências… -> Privacidade com um botão “Remover Todos os dados de sites…”, mas isso também não tinha granularidade do que limpar. Esse botão fez uma limpeza com êxito de cookies, localStorage, AppCache e cache de disco.

Diversos resultados

A beleza de testes de usuário com Browserscope é que você pode pode obter diversos resultados. Isso permite que você reúna resultados para navegadores e dispositivos aos quais não tem acesso. Os diversos resultados para este experimento incluem aproximadamente 100 navegadores diferentes, incluindo webOS, BlackBerry e RockMelt. Eu extraí os resultados para os mesmos grandes navegadores mostrados na tabela anterior.

Ao escrever esta experiência, eu, de maneira intencional, utilizei o termo genérico “limpeza de navegador” em uma tentativa de ver o que os usuários selecionam sem nenhuma notificação. Os diversos resultados correspondem de forma bem próxima aos meus resultados pessoais. Uma vez que este teste exigiu que os usuários realizassem uma ação sem uma maneira de confirmar que eles realmente tentaram limpar o cache, eu estendi a tabela para mostrar a porcentagem de testes que refletem a maioria dos resultados.

Uma diferença entre os meus resultados e os diversos resultados é o iPhone – acho que isso é devido ao fato de que limpar o cache requer deixar o navegador e, assim, interromper a experiência. A outra diferença principal é o Safari 5. O tamanho da amostra é pequeno, então não devemos tirar conclusões fortes. É possível que ter vários caminhos para limpar dados tenha causado confusão.

A complexidade e a falta de consistência nas UIs para limpar dados poderiam ser uma causa para esses resultados menos-unânimes. Chrome 21 e o Firefox 15 possuem um bom número de testes (154 e 46), e ainda alguns dos resultados vencedores são vistos somente em 50% ou 68% do tempo. O Firefox pode ser um caso especial porque ele solicita antes de guardar informações para localStorage. E esse teste pode ser afetado pela navegação privada, como o modo incógnito do Chrome. Finalmente, é possível que os que fizeram o teste não queriam limpar o cache, mas ainda salvaram seus resultados para Browserscope.

Existem muitas explicações possíveis para os diversos resultados, mas revisar a seção Browser UIs mostra que saber como limpar os dados do navegador varia significativamente entre os navegadores, e muitas vezes muda de uma versão para o outra. Há uma necessidade de interface de usuário mais consistente nesse sentido. Como seria uma interface de usuário consistente? A simples interface de usuário do iPhone (um único botão) torna mais fácil limpar tudo, mas é isso o que os usuários querem e precisam? Muitas vezes, eu quero limpar meu cache de disco, mas com menos frequência optar por limpar todos os meus cookies. No mínimo, os usuários precisam de uma maneira de limpar os dados do seu navegador em todos os navegadores, o que atualmente não é possível.

***

Texto original disponível em http://www.stevesouders.com/blog/2012/09/10/clearing-browser-data/