App web progressive: IndexedDB

1. Ti diamo il benvenuto

In questo lab, eseguirai il backup e il recupero dei dati del client in IndexedDB. Questo è il terzo di una serie di codelab complementari per il workshop sulle app web progressive. Il codelab precedente era Working with Workbox. Questa serie include altri cinque codelab.

Obiettivi didattici

  • Crea un database IndexedDB e un object store utilizzando idb
  • Aggiungere e recuperare elementi in un object store

Che cosa devi sapere

  • JavaScript e Promises

Che cosa ti serve

2. Configurazione

Inizia clonando o scaricando il codice iniziale necessario per completare questo codelab:

Se cloni il repository, assicurati di trovarti nel ramo pwa03--indexeddb. Il file zip contiene anche il codice per questo ramo.

Questo codebase richiede Node.js 14 o versioni successive. Una volta disponibile il codice, esegui npm ci dalla riga di comando nella cartella del codice per installare tutte le dipendenze necessarie. Poi, esegui npm start per avviare il server di sviluppo per il codelab.

Il file README.md del codice sorgente fornisce una spiegazione per tutti i file distribuiti. Inoltre, i seguenti sono i file esistenti chiave con cui lavorerai durante questo codelab:

File delle chiavi

  • js/main.js - File JavaScript dell'applicazione principale

3. Configura database

Prima di poter utilizzare un database IndexedDB, è necessario aprirlo e configurarlo. Sebbene tu possa farlo direttamente, poiché IndexedDB è stato standardizzato prima che le promesse diventassero importanti, la sua interfaccia basata su callback può essere difficile da usare. Utilizzeremo invece idb, un wrapper Promise molto piccolo per IndexedDB. Per iniziare, importalo prima in js/main.js:

import { openDB } from 'idb';

Quindi, aggiungi il seguente codice di configurazione all'inizio del listener di eventi DOMContentLoaded:

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

Spiegazione

Qui viene creato un database IndexedDB denominato settings-store. La sua versione è inizializzata su 1 e con un archivio di oggetti chiamato settings. Si tratta del tipo più semplice di archivio oggetti, semplici coppie chiave-valore, ma è possibile creare archivi oggetti più complessi in base alle esigenze. Senza questa inizializzazione di uno spazio di archiviazione di oggetti, non ci sarà alcun posto in cui inserire i dati, quindi omettere questa operazione equivale a creare un database senza tabelle.

4. Salva lo stato dell'editor durante l'aggiornamento

Una volta inizializzato il database, è il momento di salvarci i contenuti. L'editor espone un metodo onUpdate che consente di passare una funzione da chiamare ogni volta che i contenuti vengono aggiornati nell'editor. È il posto perfetto per intervenire e aggiungere le modifiche al database. Per farlo, aggiungi il seguente codice subito prima della dichiarazione defaultText in js/main.js:

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

Spiegazione

db è il database IndexedDB aperto in precedenza. Il metodo put consente di creare o aggiornare le voci in un archivio oggetti nel database. Il primo argomento è l'archivio oggetti nel database da utilizzare, il secondo è il valore da archiviare e il terzo è la chiave in cui salvare il valore se non è chiaro dal valore (in questo caso non lo è perché il nostro database non include chiavi specificate). Poiché è asincrono, è racchiuso in async/await.

5. Recupera stato al caricamento

Infine, per recuperare il lavoro in corso dell'utente, è necessario caricarlo quando viene caricato l'editor. L'editor fornisce un metodo setContent per impostare i contenuti. Attualmente viene utilizzato per impostarlo sul valore di defaultText. Aggiornalo con quanto segue per caricare invece il lavoro precedente dell'utente:

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

Spiegazione

Anziché impostare l'editor sul valore di defaultText, ora tenta di recuperare la chiave content dall'archivio oggetti settings nel database IndexedDB settings-store. Se questo valore esiste, viene utilizzato. In caso contrario, viene utilizzato il testo predefinito.

6. Impostare e recuperare lo stato della modalità notturna

Ora che hai familiarità con IndexedDB, aggiungi il seguente codice in fondo a js/main.js e aggiornalo per salvare la preferenza della modalità Buio dell'utente quando cambia e caricarla quando la modalità Buio viene inizializzata.

// 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. Complimenti!

Hai imparato a salvare e caricare dati da un object store in IndexedDB.

Il prossimo codelab della serie è Dalla scheda alla barra delle app.