Progressive Web Apps : IndexedDB

1. Bienvenue

Dans cet atelier, vous allez sauvegarder et récupérer des données client dans IndexedDB. Il s'agit du troisième d'une série d'ateliers de programmation complémentaires pour l'atelier sur les progressive web apps. L'atelier de programmation précédent était Utiliser Workbox. Cette série comprend cinq autres ateliers de programmation.

Points abordés

  • Créer une base de données et un magasin d'objets IndexedDB à l'aide de idb
  • Ajouter et récupérer des éléments dans un magasin d'objets

À savoir

  • JavaScript et les promesses

Ce dont vous avez besoin

2. Préparer l'atelier

Commencez par cloner ou télécharger le code de démarrage nécessaire pour effectuer cet atelier de programmation :

Si vous clonez le dépôt, assurez-vous d'être dans la branche pwa03--indexeddb. Le fichier ZIP contient également le code de cette branche.

Ce code de base nécessite Node.js 14 ou version ultérieure. Une fois le code disponible, exécutez npm ci à partir de la ligne de commande dans le dossier du code afin d'installer toutes les dépendances dont vous aurez besoin. Ensuite, exécutez npm start pour démarrer le serveur de développement de l'atelier de programmation.

Le fichier README.md du code source fournit une explication pour tous les fichiers distribués. De plus, voici les principaux fichiers existants que vous utiliserez tout au long de cet atelier de programmation :

Fichiers clés

  • js/main.js : fichier JavaScript de l'application principale

3. Configurer la base de données

Avant de pouvoir utiliser une base de données IndexedDB, vous devez l'ouvrir et la configurer. Bien que vous puissiez le faire directement, l'interface basée sur les rappels d'IndexedDB peut être difficile à utiliser, car elle a été normalisée avant que les promesses ne deviennent importantes. Nous utiliserons plutôt idb, un très petit wrapper de promesse pour IndexedDB. Pour commencer, importez-le dans js/main.js :

import { openDB } from 'idb';

Ensuite, ajoutez le code de configuration suivant en haut de l'écouteur d'événements DOMContentLoaded :

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

Explication

Ici, une base de données IndexedDB appelée settings-store est créée. Sa version est initialisée sur 1 et elle est initialisée avec un magasin d'objets appelé settings. Il s'agit du type de magasin d'objets le plus élémentaire, à savoir des paires clé-valeur simples. Toutefois, des magasins d'objets plus complexes peuvent être créés si nécessaire. Sans cette initialisation d'un magasin d'objets, il n'y aura aucun endroit où placer les données. Omettre cette étape reviendrait à créer une base de données sans tables.

4. Enregistrer l'état de l'éditeur lors de la mise à jour

Maintenant que la base de données est initialisée, il est temps d'y enregistrer du contenu. L'éditeur expose une méthode onUpdate qui vous permet de transmettre une fonction à appeler chaque fois que le contenu est mis à jour dans l'éditeur. C'est l'endroit idéal pour appuyer et ajouter les modifications à la base de données. Pour ce faire, ajoutez le code suivant juste avant la déclaration defaultText dans js/main.js :

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

Explication

db est la base de données IndexedDB précédemment ouverte. La méthode put permet de créer ou de mettre à jour des entrées dans un magasin d'objets de cette base de données. Le premier argument est le magasin d'objets à utiliser dans la base de données, le deuxième argument est la valeur à stocker et le troisième argument est la clé à laquelle enregistrer la valeur si elle n'est pas claire à partir de la valeur (dans ce cas, elle ne l'est pas, car notre base de données n'inclut pas de clés spécifiées). Étant donné qu'il est asynchrone, il est encapsulé dans async/await.

5. Récupérer l'état au chargement

Enfin, pour récupérer le travail en cours de l'utilisateur, il doit être chargé lorsque l'éditeur se charge. L'éditeur fournit une méthode setContent pour définir le contenu. Il est actuellement utilisé pour le définir sur la valeur de defaultText. Remplacez-le par ce qui suit pour charger le travail précédent de l'utilisateur :

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

Explication

Au lieu de simplement définir l'éditeur sur la valeur de defaultText, il tente désormais d'obtenir la clé content à partir du magasin d'objets settings dans la base de données IndexedDB settings-store. Si cette valeur existe, elle est utilisée. Sinon, le texte par défaut est utilisé.

6. Définir et récupérer l'état du mode Nuit

Maintenant que vous êtes à l'aise avec IndexedDB, ajoutez le code suivant au bas de js/main.js et mettez-le à jour pour enregistrer la préférence du mode Nuit de l'utilisateur lorsqu'elle change, et chargez cette préférence lorsque le mode Nuit s'initialise.

// 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. Félicitations !

Vous avez appris à enregistrer et à charger des données à partir d'un store d'objets dans IndexedDB.

Le prochain atelier de programmation de la série est De l'onglet à la barre des tâches.