Armazene dados no dispositivo

Os PWA (Aplicativos Web Progressivos) oferecem opções robustas para armazenar dados localmente para permitir que os usuários continuem trabalhando mesmo se a conexão de rede se tornar instável ou ficar offline.

Há várias maneiras pelas quais um PWA pode armazenar dados em um dispositivo, como armazenamento local, API de cache ou IndexedDB.

A tabela a seguir descreve as diferentes opções, e o restante deste artigo aborda mais detalhes e cenários de uso para cada opção.

Observação: não use WebSQL ou cache de aplicativo. Embora esses sejam dois outros mecanismos de armazenamento do navegador, ambos foram preteridos. Em vez de WebSQL, use IndexedDB. Em vez de Cache de Aplicativo, use a API de Cache.

Armazenamento na Web

O armazenamento na Web é útil para armazenar pequenas quantidades de dados de cadeia de caracteres no dispositivo do usuário. A simplicidade do sistema de pares chave-valor do Web Storage facilita o uso.

O Armazenamento na Web funciona de forma síncrona apenas no thread principal do aplicativo. Isso significa que o Armazenamento na Web não está disponível para uso entre os trabalhadores de serviço e que o uso intenso do Armazenamento na Web pode criar problemas de desempenho para seu aplicativo.

Cada tipo de Armazenamento na Web, sessão e local, é mantido como um armazenamento de dados separado, isolado do domínio que o criou.

• sessionStorage Persiste apenas durante a sessão, por exemplo, enquanto o navegador está aberto, o que inclui quando a página é atualizada.
• localStorage persiste até que os dados sejam removidos pelo código do aplicativo, pelo usuário ou pelo navegador.

O código a seguir mostra como usar localStorageo , que é semelhante ao modo como sessionStorage é usado:

const browserInformation = {
  name: 'Microsoft Edge',
  version: 108
};

localStorage.setItem('browser', JSON.stringify(browserInformation));

O código acima armazena um objeto JavaScript como uma string JSON usando localStorage o setItem() método e atribui uma chave igual a browser. Você pode recuperar as informações localStorage usando o getItem() método mostrado abaixo:

const value = localStorage.getItem('browser');

const browserInformation = JSON.parse(value);

Para saber mais, consulte API de armazenamento na Web no MDN.

IndexedDB

IndexedDB é uma API assíncrona para armazenar dados estruturados que podem ser usados no código de front-end do seu aplicativo ou no código de trabalho de serviço. Use a API IndexedDB para armazenar uma quantidade significativa de dados estruturados no cliente ou dados binários, como arquivos ou objetos de mídia criptografados.

IndexedDB é a melhor opção para armazenar dados em seu PWA, pois usar a API não torna seu aplicativo lento bloqueando o thread principal e pode ser usado tanto do código de front-end do seu aplicativo quanto do trabalho de serviço.

O uso do IndexedDB é mais complexo do que o uso do armazenamento na Web e requer as seguintes etapas para armazenar dados:

1. Abra um banco de dados, usando a window.indexedDB.open() função.
2. Crie um repositório de objetos no banco de dados, usando a IDBDatabase.createObjectStore() função.
3. Inicie uma transação para armazenar dados usando a IDBDatabase.transaction() função.
4. Aguarde a conclusão da operação ouvindo um evento.

Para saber mais e exibir exemplos de código, consulte Usando IndexedDB no MDN.

Cache

A API de cache é um sistema para armazenar e recuperar solicitações e respostas de rede no código de front-end do seu aplicativo ou no trabalho de serviço. Ele pode ser usado para armazenar ativos, como imagens e arquivos, localmente no dispositivo do usuário. Isso pode fazer com que seu aplicativo funcione mesmo quando estiver offline ou melhorar seu desempenho reduzindo o número de solicitações de rede necessárias para renderizar o aplicativo.

O trecho de código a seguir mostra como escutar o fetch evento em um trabalho de serviço e armazenar a resposta do servidor usando a API de Cache:

self.addEventListener("fetch", event => {
  async function cacheAndReturnRequest() {
    // Get the response from the server.
    const fetchResponse = await fetch(event.request.url);
    // Open the app's cache.
    const cache = await caches.open("cache-name");
    // Put the response in cache.
    cache.put(event.request.url, fetchResponse.clone());
    // And return the response.
    return fetchResponse.
  }

  event.respondWith(cacheAndReturnRequest());
});

Para descobrir outros cenários úteis da API de cache, consulte Cache no MDN > Referências > Guias de aplicativos > Web progressivos.

Acesso ao sistema de arquivos

A API de Acesso ao Sistema de Arquivos possibilita que seu aplicativo acesse arquivos no dispositivo do usuário de maneira semelhante aos aplicativos nativos. Ele pode ser usado para criar aplicativos que podem ler e gravar arquivos, como editores de texto ou imagem.

Para abrir um arquivo do dispositivo do usuário, use a showOpenFilePicker() função:

openFileButton.addEventListener("click", async () => {
  const fileHandles = await window.showOpenFilePicker();
});

Para saber mais, consulte Window.showOpenFilePicker() no MDN.

A API de Acesso ao Sistema de Arquivos também pode ser acoplada ao recurso Manipulação de Arquivos do PWA para registrar seu aplicativo como um manipulador de tipos de arquivo específicos e, portanto, parecer mais nativo para os usuários. Para saber mais, consulte Manipular arquivos em um PWA.

A API de Acesso ao Sistema de Arquivos de origem privada é uma variação da API de Acesso ao Sistema de Arquivos que se destina a fornecer mais privacidade para os usuários. Ele permite que os aplicativos também acessem arquivos no dispositivo do usuário, mas apenas em um diretório específico que seja privado da origem do aplicativo. Além disso, essa API não se destina a facilitar o acesso dos usuários ao diretório privado usando seu explorador de arquivos.

Para abrir um arquivo do sistema de arquivos privado de origem, use a navigator.storage API baseada em promessa:

// Get the origin-private directory handle.
const root = await navigator.storage.getDirectory();
// Get the handle for a file in the directory.
const fileHandle = await root.getFileHandle("my-file.txt");

Cota de Armazenamento

No Microsoft Edge, o armazenamento local e de sessão são limitados a cerca de 5 MB cada.

Outros tipos de armazenamento de dados, como IndexedDB, API de cache ou API de acesso ao sistema de arquivos privado de origem, podem usar até 60% do espaço total em disco no dispositivo. Por exemplo, se o dispositivo em que seu aplicativo está sendo executado tiver um disco de 64 GB, o Microsoft Edge permitirá que seu aplicativo armazene até cerca de 38 GB de dados.

Observe que o espaço livre realmente disponível no dispositivo pode ser menor que a cota de armazenamento de 60%. Por exemplo, se o dispositivo em que seu aplicativo está sendo executado tiver um disco de 64 GB, mas 50 GB já estiverem sendo usados pelo sistema operacional e outros arquivos, seu aplicativo só poderá armazenar 14 GB de dados, mesmo que a cota de armazenamento ainda seja de 38 GB.

Você pode usar navigator.storage.estimate() para perguntar à API do Gerenciador de Armazenamento qual é a cota de armazenamento para a origem do seu aplicativo e quanto dela já é usado. Para saber mais, consulte StorageManager.estimate() no MDN.

Tentar armazenar mais dados do que os disponíveis ou permitidos resulta em um erro de JavaScript. Seu código deve capturar esse erro usando try...catch instruções. O trecho de código abaixo mostra como detectar um erro de cota excedida ao armazenar dados usando o Armazenamento na Web:

try {
  localStorage.setItem('foo', 'bar');
} catch (e) {
  // Code that handles the lack of storage space.
}

Remoção de dados

Quando o dispositivo do usuário começar a ficar com pouco espaço em disco disponível, também conhecido como pressão de armazenamento, o Microsoft Edge começará a remover dados não persistentes.

Isso significa que os dados que seu aplicativo armazenou usando a API de cache, o IndexedDB, a API de acesso ao sistema de arquivos privado de origem ou o armazenamento na Web podem ser removidos.

Por padrão, os dados que seu aplicativo armazena não são considerados persistentes e podem ser removidos quando há pressão de armazenamento. Se seu aplicativo armazena dados críticos, use a função para tornar o navigator.storage.persist() armazenamento do aplicativo persistente. O armazenamento persistente só pode ser limpo pelo usuário. Para saber mais, consulte StorageManager.persist() no MDN.