Od Web SQL do SQLite Wasm: przewodnik po migracji bazy danych

Dzięki użyciu SQLite Wasm obsługiwanego przez prywatny system plików źródłowego mamy uniwersalną alternatywę dla wycofanej technologii bazy danych Web SQL. Ten artykuł to przewodnik po migracji danych z Web SQL do SQLite Wasm.

Wymagany wątek

W poście Wycofanie i usunięcie Web SQL ogłosiliśmy wycofanie technologii bazy danych Web SQL. Chociaż sama technologia może być wycofana, przypadki użycia, które obsługuje, nie są. W następnym poście SQLite Wasm w przeglądarce obsługiwany przez prywatny system plików Origin opisaliśmy zestaw technologii zastępczych opartych na bazie danych SQLite, skompilowanej do Web Assembly (Wasm) i obsługiwanej przez prywatny system plików Origin. W tym artykule znajdziesz instrukcje migracji baz danych z Web SQL do SQLite Wasm.

Migracja baz danych

Te 4 sekwencje działań przedstawiają koncepcję migracji bazy danych Web SQL do SQLite Wasm, przy czym baza danych SQLite jest obsługiwana przez prywatny system plików źródła. Może on posłużyć jako podstawa do Twojego własnego kodu dostosowywanego do Twoich potrzeb związanych z migracją bazy danych Web SQL.

Bazy danych Web SQL do przeniesienia

W tym przewodniku zakładamy, że masz co najmniej 1 istniejącą bazę danych Web SQL, która zawiera dane istotne dla Twojej aplikacji. Na poniższym zrzucie ekranu widać przykładową bazę danych o nazwie mydatabase z tabelą rainstorms, która mapuje nastroje na ich natężenie. Narzędzia deweloperskie w Chrome umożliwiają wyświetlanie baz danych WebSQL na potrzeby debugowania, jak pokazano na poniższym zrzucie ekranu.

Baza danych Web SQL sprawdzona w narzędziach deweloperskich w Chrome Baza danych o nazwie mydatabase zawiera tabelę z 3 kolumnami: identyfikatorem wiersza, nastrojem i poważnym. Są 3 wiersze przykładowych danych.

Przekształcanie bazy danych Web SQL w instrukcje SQL

Aby dane zostały przeniesione w sposób przejrzysty dla użytkownika, czyli bez konieczności samodzielnego wykonywania przez niego jakichkolwiek kroków migracji, elementy danych w bazie danych muszą zostać przetłumaczone z powrotem na pierwotne instrukcje SQL, które je utworzyły. Ten problem pojawiał się już wcześniej, a skrypt migracji użyty w tym artykule (mywebsqldump.js) opiera się na bibliotece społeczności o nazwie websqldump.js z niewielkimi zmianami. Poniższy przykładowy kod pokazuje kod wymagany do przekształcenia bazy danych Web SQL mydatabase w zbiór instrukcji SQL.

websqldump.export({
  database: 'mydatabase',
  version: '1.0',
  success: function(sql) {
    // The SQL statements.
  },
  error: function(err) {
    // Handle the error.
  }
});

Uruchomienie tego kodu powoduje utworzenie ciągu instrukcji SQL widocznego poniżej.

CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');

Importowanie danych do SQLite Wasm

Teraz wystarczy wykonać te polecenia SQL w kontekście SQLite Wasm. Szczegółowe informacje o konfigurowaniu SQLite Wasm znajdziesz w artykule SQLite Wasm w przeglądarce obsługiwanym przez prywatny system plików Origin, ale najważniejsze informacje znajdziesz poniżej. Pamiętaj, że ten kod musi być uruchamiany w procesie Worker (który biblioteka automatycznie dla Ciebie tworzy), z prawidłowo skonfigurowanymi wymaganymi nagłówkami HTTP. Pakiet @sqlite.org/sqlite-wasm możesz zainstalować z npm.

import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';

(async () => {
  try {
    const promiser = await new Promise((resolve) => {
      const _promiser = sqlite3Worker1Promiser({
        onready: () => {
          resolve(_promiser);
        },
      });
    });

    let response;

    response = await promiser('open', {
      filename: 'file:mydatabase.db?vfs=opfs',
    });
    const { dbId } = response;

    const sql = `
      CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
      INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
      INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
      INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');`
    await promiser('exec', { dbId, sql });

    await promiser('close', { dbId });
  } catch (err) {
    if (!(err instanceof Error)) {
      err = new Error(err.result.message);
    }
    console.error(err.name, err.message);
  }
})();

Po uruchomieniu tego kodu sprawdź zaimportowany plik bazy danych za pomocą rozszerzenia OPFS Explorer w Narzędziach deweloperskich w Chrome. Teraz są 2 pliki: jeden z rzeczywistą bazą danych i jeden z informacjami z dziennika. Pamiętaj, że te 2 pliki znajdują się w prywatnym systemie plików źródłowego, więc aby je wyświetlić, musisz użyć rozszerzenia OPFS Explorer.

Sprawdzanie prywatnego systemu plików pochodzenia za pomocą narzędzia OPFS Explorer w Narzędziach deweloperskich w Chrome. Są to 2 pliki: mydatabase.db i mydatabase.db-journal.

Aby sprawdzić, czy zaimportowane dane są takie same jak początkowe dane Web SQL, kliknij plik mydatabase.db, a rozszerzenie OPFS Explorer wyświetli okno Zapisz plik, w którym możesz zapisać plik w widocznym dla użytkownika systemie plików. Po zapisaniu pliku bazy danych użyj aplikacji do wyświetlania SQLite, aby przejrzeć dane. Prezentacja interfejsów API projektu Fugu zawiera kilka aplikacji do pracy z SQLite w przeglądarce. Na przykład Sqlime – SQLite Playground umożliwia otwieranie pliku bazy danych SQLite z twardego dysku i uruchamianie w niej zapytań. Jak widać na zrzucie ekranu poniżej, tabela rainstorm została prawidłowo zaimportowana do SQLite.

Przeglądanie pliku mydatabase.db w narzędziu Sqlime SQLite Playground. Aplikacja jest wyświetlana z wykonanym zapytaniem SQL select star from rainstorms limit 10, które zwraca 3 wiersze początkowych danych przykładowych z Web SQL.

Uwolnienie miejsca na dane w Web SQL

Chociaż (może niespodziewanie) nie można usunąć bazy danych Web SQL, po przeniesieniu danych do SQLite Wasm warto zwolnić trochę miejsca, usuwając nieaktualne tabele Web SQL. Aby wyświetlić wszystkie tabele w bazie danych Web SQL i usunąć je za pomocą JavaScriptu, użyj kodu podobnego do tego:

const dropAllTables = () => {
  try {
    db.transaction(function (tx) {
      tx.executeSql(
        "SELECT name FROM sqlite_master WHERE type='table' AND name !='__WebKitDatabaseInfoTable__'",
        [],
        function (tx, result) {
          const len = result.rows.length;
          const tableNames = [];
          for (let i = 0; i < len; i++) {
            const tableName = result.rows.item(i).name;
            tableNames.push(`'${tableName}'`);
            db.transaction(function (tx) {
              tx.executeSql('DROP TABLE ' + tableName);
            });
          }
          console.log(`Dropped table${tableNames.length > 1 ? 's' : ''}: ${tableNames.join(', ')}.`);
        }
      );
    });
  } catch (err) {
    console.error(err.name, err.message);
  }
};

Praca z danymi po migracji

Po migracji danych możesz z nimi pracować zgodnie z opisem w tym przykładowym kodzie na potrzeby rozpoczęcia. Więcej informacji znajdziesz w dokumentacji interfejsu SQLite Wasm API. Przypominamy, że jeśli używasz prywatnego systemu plików źródłowego jako backendu pamięci masowej, musisz uzyskać dostęp do SQLite Wasm z Workera.

Testowanie

To demo pozwala wypełnić bazę danych Web SQL przykładowymi danymi, a potem wygenerować dane Web SQL jako instrukcje SQL, które następnie są importowane do SQLite Wasm obsługiwanego przez prywatny system plików pochodzenia. Na koniec zwalniasz miejsce, usuwając nieaktualne dane Web SQL. Sprawdź kod źródłowy, aby uzyskać pełną implementację, w tym poprawiony plik mywebsqldump.js.

Aplikacja demonstracyjna na stronie web-sql-to-sqlite-wasm.glitch.me.

Podsumowanie

Migracja baz danych Web SQL do SQLite Wasm obsługiwanej przez prywatny system plików pochodzenia jest możliwa w sposób przejrzysty dla użytkowników. Nie zauważy, że jego dane są teraz hostowane w prywatnym systemie plików źródłowego w bazie danych SQLite, a nie w bazie danych Web SQL. Ogólnie rzecz biorąc, migracja z Web SQL na SQLite jest konieczna dla deweloperów internetowych, którzy chcą zapewnić długoterminową stabilność i skalowalność swoich aplikacji. Chociaż proces ten może wymagać pewnych początkowych działań, korzyści płynące z bardziej niezawodnego, elastycznego i przede wszystkim przyszłościowego rozwiązania bazy danych sprawiają, że jest to inwestycja warta podjęcia.