👩🏼‍🏫 👨🏾‍🚒 🐼 Armazenamento web 🚴🏾 💅🏻 🧑🏽

Bom dia amigos

Apresento a você a tradução do artigo "Armazenamento para a Web", de Pete LePage.

Existem várias tecnologias para armazenar dados em um navegador. Qual é o melhor?

Uma conexão à Internet pode ser ruim ou até ausente em determinados lugares. Portanto, o suporte offline é um dos principais recursos dos aplicativos Web progressivos . Mesmo com uma conexão de alta velocidade, é prudente usar o cache e outras técnicas para melhorar a experiência do usuário. Existem várias maneiras de salvar arquivos (HTML, JavaScript, CSS, imagens, etc.) e dados (dados do usuário, artigos de notícias etc.). Mas qual solução é melhor escolher? E como garantir sua durabilidade?

O que usar?

Eu posso aconselhar o seguinte:

Para os recursos de rede necessários para o aplicativo funcionar e exibir conteúdo, use a API de armazenamento em cache (parte dos trabalhadores do serviço ).
Para outros dados, use o IndexedDB (com uma quebra das promessas ).

O IndexedDB e a API de cache são suportados por todos os navegadores modernos. Eles são assíncronos, ou seja, Não bloqueie o encadeamento principal (execução de código). Eles estão disponíveis no objeto Window, trabalhadores da Web e trabalhadores de serviço. Em outras palavras, eles podem ser usados em qualquer lugar.

E quanto a outros mecanismos?

O navegador também possui outros mecanismos de armazenamento de dados, mas eles têm certas limitações e podem levar a problemas de desempenho.

SessionStorage . , , , IndexedDB. , , . 5 ( ), - -.
LocalStorage . 5 ( ), - -.
Cookies . HTTP-, . , -, .
File System API FileWriter API . , , , Chrome.
Native File System API . . .
WebSQL , IndexedDB. . W3C 2010 .
Application Cache , - Cache API. .

?

Pelo menos algumas centenas de megabytes, potencialmente centenas de gigabytes. Depende do navegador, no entanto, a quantidade de armazenamento geralmente é baseada na quantidade de memória disponível no dispositivo do usuário.

O Chrome permite que você use até 60% do espaço em disco. Você pode usar a API StorageManager para determinar o limite (cota).
O Internet Explorer 10 e posterior podem armazenar até 250 MB de dados.
O Firefox permite armazenar até 2 GB de dados. Você pode usar a API StorageManager para determinar o limite.
O Safari (desktop e celular) permite armazenar até 1 GB de dados. Ao atingir o limite, o Safari solicita ao usuário permissão para aumentar a cota em 200 MB.

No passado, quando o limite de armazenamento era atingido, os navegadores solicitavam permissão do usuário para aumentar a quantidade de memória. Por exemplo, quando é atingido um limite de 50 MB, o navegador solicita permissão do usuário para aumentar a cota para 100 MB e, assim, a cada 50 MB.

Hoje, a maioria dos navegadores não aumenta automaticamente a quantidade de armazenamento dentro da cota. A exceção é o Safari, que, ao atingir 750 MB, solicita permissão do usuário para aumentar o limite para 1,1 GB. Uma tentativa de exceder a cota terminará em falha.

Como verificar o saldo do limite?

Para isso, em muitos navegadores, você pode usar a API StorageManager. Ele mostra o número total de bytes usados pelo IndexedDB e pela API de cache, permitindo calcular o restante.

if(navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate()
  // quota.usage ->   
  // quota.quota ->   
  const percentageUsed = (quota.usage / quota.quota) * 100
  console.log(`  ${ percentageUsed}% `)
  const remaining = quota.quota - quota.usage
  console.log(`   ${remaining} `)
}

Observe que a API StorageManager ainda não é suportada por todos os navegadores. No entanto, mesmo se for suportado, um manipulador de erros deve ser fornecido. Em alguns casos, a cota pode exceder a capacidade de armazenamento real.

Inspeção

Durante o desenvolvimento, você pode usar as ferramentas do navegador para rastrear o status de vários repositórios e limpá-los.

Enquanto trabalhava neste artigo, escrevi esta ferramenta simples para teste rápido dos recursos de armazenamento. Essa é uma maneira rápida e fácil de experimentar diferentes mecanismos de armazenamento de dados e ver o que acontece quando a cota é excedida.

Como lidar com erros?

O que fazer quando o limite é atingido? Obviamente, lide com erros, seja QuotaExceededError ou qualquer outra coisa. Então, dependendo do design do seu aplicativo, você deve escolher a maneira como eles são processados. Você pode, por exemplo, excluir conteúdo ou dados antigos, dependendo do tamanho, ou fornecer ao usuário a capacidade de decidir o que excluir.

O IndexedDB e a API de cache lançam um DOMError QuotaExceededError quando uma cota é excedida.

Indexeddb

Quando o limite é atingido, uma tentativa de gravar dados no IndexedDB falhará. O método onabort () será chamado com o evento como argumento. O evento conterá uma DOMException na propriedade error. A verificação do nome do erro retornará um QuotaExceededError.

const transaction = idb.transaction(['entries'], 'readwrite')
transaction.onabort = function(event) {
    const error = event.target.error // DOMException
    if(error.name === 'QuotaExceededError') {
        // ...
    }
}

API de cache

Uma tentativa de gravar dados na API de cache quando o limite for atingido será rejeitada com uma QuotaExceededError DOMException.

try {
    const cache = await caches.open('my-cache')
    await cache.add(new Request('/sample1.jpg'))
} catch (error) {
    if(error.name = 'QuotaExceededError') {
        // ...
    }
}

Como funciona a limpeza de armazenamento?

Os repositórios da Web se enquadram em duas categorias, "autônomo" e "gerenciado". Independente significa que o repositório pode ser limpo pelo navegador sem a intervenção do usuário, porém é menos adaptável para uso prolongado, bem como na presença de dados críticos. Os cofres gerenciados não são limpos automaticamente quando estão cheios. O usuário deve limpar manualmente esses armazenamentos (através das configurações do navegador).

Por padrão, os armazenamentos da Web (IndexedDB, Cache API etc.) são classificados como independentes, o que significa que, se o controle manual não estiver instalado , o navegador poderá limpar o armazenamento independentemente sob determinadas condições, por exemplo, durante o preenchimento.

As condições para limpar o armazenamento são as seguintes:

Quando o armazenamento está cheio, o Chrome exclui os dados, começando pelo menos solicitado (o mais antigo em tempo de uso), até que o problema de estouro seja resolvido.
O IE 10+ não limpa o armazenamento, mas bloqueia a capacidade de gravar dados.
O Firefox faz a mesma coisa que o Chrome.
O Safari não esvaziou o cofre anteriormente, mas recentemente adicionou um período de retenção de dados de sete dias.

A partir do iOS e iPad 13.4, Safari 13.1 no macOS, há um período de retenção de dados de sete dias. Isso significa que, se o usuário não acessar os dados dentro de sete dias, eles serão excluídos. Esta política não se aplica a aplicativos adicionados à tela inicial.

Bônus: Promise Wrap Over IndexedDB

O IndexedDB é uma API de baixo nível que requer alguma configuração antes do uso, o que pode ser desnecessário se você precisar armazenar dados simples. Diferente da maioria das APIs modernas baseadas em promessa, ela é baseada em eventos. Um wrapper de promessas, como o idb, oculta alguns recursos poderosos desse repositório, mas, mais importante, também oculta seus complexos mecanismos internos (transações, versão).

Conclusão

Tempos de armazenamento limitado e solicitações de permissão do usuário para aumentar o limite caíram no esquecimento. Os sites podem armazenar efetivamente todos os recursos e dados necessários para o trabalho. Usando a API StorageManager, você pode determinar quanta memória é usada e quanto resta. E colocando o armazenamento no modo de controle manual, você pode proteger os dados contra exclusão.

Nota por.:

Aqui você pode ver como escrever um aplicativo para anotações usando o idb.
Aqui você pode ver como os funcionários de serviço trabalham.

Obrigado pelo seu tempo. Espero que tenha sido bem gasto.

Armazenamento web