Progressive Web-Apps: IndexedDB

1. Willkommen

In diesem Lab sichern und stellen Sie Clientdaten in IndexedDB wieder her. Dies ist das dritte in einer Reihe von Codelabs für den Workshop zu progressiven Web-Apps. Das vorherige Codelab hieß Mit Workbox arbeiten. Diese Reihe umfasst fünf weitere Codelabs.

Lerninhalte

  • IndexedDB-Datenbank und Objektspeicher mit idb erstellen
  • Elemente in einem Objektspeicher hinzufügen und abrufen

Wichtige Informationen

  • JavaScript und Promises

Voraussetzungen

2. Einrichtung

Klonen oder laden Sie zuerst den Starter-Code herunter, der für dieses Codelab benötigt wird:

Wenn Sie das Repository klonen, achten Sie darauf, dass Sie sich im pwa03--indexeddb-Branch befinden. Die ZIP-Datei enthält auch den Code für diesen Zweig.

Für diese Codebasis ist Node.js 14 oder höher erforderlich. Sobald Sie den Code haben, führen Sie npm ci über die Befehlszeile im Ordner des Codes aus, um alle erforderlichen Abhängigkeiten zu installieren. Führen Sie dann npm start aus, um den Entwicklungsserver für das Codelab zu starten.

Die README.md-Datei des Quellcodes enthält eine Erklärung für alle verteilten Dateien. Außerdem sind die folgenden Dateien wichtig, mit denen Sie in diesem Codelab arbeiten werden:

Schlüsseldateien

  • js/main.js – JavaScript-Datei der Hauptanwendung

3. Datenbank einrichten

Bevor eine IndexedDB-Datenbank verwendet werden kann, muss sie geöffnet und eingerichtet werden. Das ist zwar direkt möglich, aber da IndexedDB standardisiert wurde, bevor Promises eine wichtige Rolle spielten, kann die Callback-basierte Schnittstelle umständlich zu verwenden sein. Stattdessen verwenden wir idb, einen sehr kleinen Promise-Wrapper für IndexedDB. Importieren Sie es zuerst in js/main.js:

import { openDB } from 'idb';

Fügen Sie dann den folgenden Einrichtungscode oben in den DOMContentLoaded-Ereignis-Listener ein:

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

Erklärung

Hier wird eine IndexedDB-Datenbank mit dem Namen settings-store erstellt. Die Version wird auf 1 initialisiert und mit einem Objektspeicher namens settings initialisiert. Dies ist die einfachste Art von Objektspeicher, nämlich einfache Schlüssel/Wert-Paare. Bei Bedarf können jedoch auch komplexere Objektspeicher erstellt werden. Ohne diese Initialisierung eines Objektspeichers gibt es keinen Ort, an dem Daten abgelegt werden können. Das Auslassen dieser Initialisierung wäre also so, als würde man eine Datenbank ohne Tabellen erstellen.

4. Editorstatus bei Aktualisierung speichern

Nachdem die Datenbank initialisiert wurde, können Sie Inhalte darin speichern. Der Editor bietet eine onUpdate-Methode, mit der Sie eine Funktion übergeben können, die immer dann aufgerufen wird, wenn Inhalte im Editor aktualisiert werden. Hier können Sie die Änderungen in die Datenbank aufnehmen. Fügen Sie dazu den folgenden Code direkt vor der defaultText-Deklaration in js/main.js ein:

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

Erklärung

db ist die zuvor geöffnete IndexedDB-Datenbank. Mit der Methode put können Einträge in einem Objektspeicher in dieser Datenbank erstellt oder aktualisiert werden. Das erste Argument ist der zu verwendende Objektspeicher in der Datenbank, das zweite Argument ist der zu speichernde Wert und das dritte Argument ist der Schlüssel, unter dem der Wert gespeichert werden soll, wenn er nicht aus dem Wert hervorgeht (in diesem Fall ist das nicht der Fall, da unsere Datenbank keine angegebenen Schlüssel enthält). Da es asynchron ist, wird es in async/await eingeschlossen.

5. Status beim Laden abrufen

Damit die Arbeit des Nutzers wiederhergestellt werden kann, muss sie beim Laden des Editors geladen werden. Der Editor bietet die Methode setContent, um genau das zu tun: den Inhalt festlegen. Derzeit wird sie verwendet, um sie auf den Wert von defaultText festzulegen. Aktualisieren Sie den Prompt mit dem folgenden Text, um die bisherigen Arbeiten des Nutzers zu laden:

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

Erklärung

Anstatt den Editor einfach auf den Wert von defaultText festzulegen, wird jetzt versucht, den content-Schlüssel aus dem settings-Objektspeicher in der IndexedDB-Datenbank settings-store abzurufen. Wenn dieser Wert vorhanden ist, wird er verwendet. Andernfalls wird der Standardtext verwendet.

6. Nachtmodusstatus festlegen und abrufen

Nachdem Sie sich mit IndexedDB vertraut gemacht haben, fügen Sie den folgenden Code am Ende von js/main.js ein und aktualisieren Sie ihn, um die Einstellung des Nutzers für den Nachtmodus zu speichern, wenn sie sich ändert, und diese Einstellung zu laden, wenn der Nachtmodus initialisiert wird.

// 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. Glückwunsch!

Sie haben gelernt, wie Sie Daten in einem Objektspeicher in IndexedDB speichern und laden.

Das nächste Codelab in der Reihe ist From Tab to Taskbar.