Progressive Web Apps: IndexedDB

1. Olá!

Neste laboratório, você vai fazer backup e recuperar dados do cliente no IndexedDB. Este é o terceiro de uma série de codelabs complementares para o workshop de Progressive Web Apps. O codelab anterior foi Como trabalhar com o Workbox. Há mais cinco codelabs nesta série.

O que você vai aprender

  • Criar um banco de dados e um repositório de objetos do IndexedDB usando idb
  • Adicionar e recuperar itens de um armazenamento de objetos

O que você precisa saber

  • JavaScript e promessas

O que é necessário

2. Começar a configuração

Comece clonando ou fazendo o download do código inicial necessário para concluir este codelab:

Se você clonar o repositório, verifique se está na ramificação pwa03--indexeddb. O arquivo zip também contém o código dessa ramificação.

Essa base de código exige o Node.js 14 ou versões mais recentes. Quando o código estiver disponível, execute npm ci na linha de comando da pasta do código para instalar todas as dependências necessárias. Em seguida, execute npm start para iniciar o servidor de desenvolvimento do codelab.

O arquivo README.md do código-fonte explica todos os arquivos distribuídos. Além disso, estes são os principais arquivos com que você vai trabalhar ao longo deste codelab:

Arquivos de chave

  • js/main.js: arquivo JavaScript principal do aplicativo.

3. Configurar banco de dados

Antes de usar um banco de dados IndexedDB, é preciso abri-lo e configurá-lo. Embora seja possível fazer isso diretamente, como o IndexedDB foi padronizado antes da popularização das Promises, a interface baseada em callback pode ser difícil de usar. Em vez disso, vamos usar idb, um wrapper de Promise muito pequeno para IndexedDB. Para começar, importe para js/main.js:

import { openDB } from 'idb';

Em seguida, adicione o seguinte código de configuração à parte de cima do listener de eventos DOMContentLoaded:

// Set up the database
const db = await openDB('settings-store', 1, {
  upgrade(db) {
    db.createObjectStore('settings');
  },
});

Explicação

Aqui, um banco de dados IndexedDB chamado settings-store é criado. A versão é inicializada como 1 e com um armazenamento de objetos chamado settings. Esse é o tipo mais básico de armazenamento de objetos, pares de chave-valor simples, mas armazenamentos de objetos mais complexos podem ser criados conforme necessário. Sem essa inicialização de um armazenamento de objetos, não haverá onde colocar os dados. Portanto, omitir isso seria como criar um banco de dados sem tabelas.

4. Salvar o estado do editor na atualização

Com o banco de dados inicializado, é hora de salvar conteúdo nele. O editor expõe um método onUpdate que permite transmitir uma função a ser chamada sempre que o conteúdo é atualizado no editor. É o lugar perfeito para tocar e adicionar as mudanças ao banco de dados. Para fazer isso, adicione o código abaixo antes da declaração defaultText em js/main.js:

// Save content to database on edit
editor.onUpdate(async (content) => {
  await db.put('settings', content, 'content');
});

Explicação

db é o banco de dados IndexedDB aberto anteriormente. O método put permite que entradas em um armazenamento de objetos nesse banco de dados sejam criadas ou atualizadas. O primeiro argumento é o armazenamento de objetos no banco de dados a ser usado, o segundo é o valor a ser armazenado, e o terceiro é a chave para salvar o valor, caso não esteja claro no valor (neste caso, não está, já que nosso banco de dados não inclui chaves especificadas). Como é assíncrono, ele é encapsulado em async/await.

5. Recuperar estado ao carregar

Por fim, para recuperar o trabalho em andamento do usuário, ele precisa ser carregado quando o editor é carregado. O editor fornece um método setContent para fazer exatamente isso: definir o conteúdo. Atualmente, ele é usado para definir o valor de defaultText. Atualize com o seguinte para carregar o trabalho anterior do usuário:

editor.setContent((await db.get('settings', 'content')) || defaultText);

Explicação

Em vez de apenas definir o editor com o valor de defaultText, ele agora tenta extrair a chave content do armazenamento de objetos settings no banco de dados settings-store IndexedDB. Se esse valor existir, ele será usado. Caso contrário, o texto padrão será usado.

6. Definir e recuperar o estado do modo noturno

Agora que você já conhece o IndexedDB, adicione o seguinte código à parte de baixo de js/main.js e atualize-o para salvar a preferência do usuário pelo modo noturno quando ela mudar e carregar essa preferência quando o modo noturno for inicializado.

// Set up night mode toggle
const { NightMode } = await import('./app/night-mode.js');
new NightMode(
  document.querySelector('#mode'),
  async (mode) => {
    editor.setTheme(mode);
    // Save the night mode setting when changed
  },
  // Retrieve the night mode setting on initialization
);

7. Parabéns!

Você aprendeu a salvar e carregar dados de um armazenamento de objetos no IndexedDB.

O próximo codelab da série é Da guia à barra de tarefas.