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

Dzięki zastosowaniu protokołu SQLite Wasm w prywatnym systemie plików punktu początkowego można uniwersalnie zastąpić wycofaną technologię bazy danych Web SQL. Ten artykuł zawiera instrukcje przenoszenia danych z Web SQL do SQLite Wasm.

Thomas Steiner

Wymagane tło

W poście Wycofywanie i usuwanie Web SQL ogłoszono wycofanie technologii bazy danych Web SQL. Choć sama technologia może zostać wycofana, jej zastosowania w dużym stopniu nie są już wykorzystywane, dlatego kolejny post SQLite Wasm w przeglądarce oparty na Origin Private File System zawiera nowy zestaw technologii opartych na bazie danych SQLite, skompilowanych do Web Assembly (Wasm) i wspierane przez prywatny system plików origin. W tym artykule pokazujemy, jak przenieść bazy danych z Web SQL do Wasm SQLite.

Migracja baz danych

Kolejne 4 kroki przedstawiają koncepcję migracji bazy danych Web SQL do Wasm SQLite z użyciem jej prywatnego systemu plików. Może to być podstawa własnego kodu dostosowanego do Twoich potrzeb związanych z migracją do Web SQL.

Bazy danych Web SQL, które mają zostać przeniesione

Podstawowe założenie w tym przewodniku po migracji polega na tym, że masz co najmniej 1 bazę danych Web SQL zawierającą dane istotne dla Twojej aplikacji. Na zrzucie ekranu poniżej widać przykładową bazę danych o nazwie mydatabase z tabelą burzy, która mapuje nastroje do poziomów ważności. Narzędzia deweloperskie w Chrome umożliwiają wyświetlanie baz danych Web SQL na potrzeby debugowania, jak widać na poniższym zrzucie ekranu.

Translacja bazy danych Web SQL na instrukcje SQL

Aby można było przenieść dane w przejrzysty sposób dla użytkownika, tzn. bez konieczności samodzielnego wykonywania żadnych kroków migracji, fragmenty danych w bazie danych trzeba przekonwertować z powrotem do oryginalnych instrukcji SQL, które je utworzyły. To wyzwanie pojawiało się już wcześniej, a skrypt migracji użyty w tym artykule (mywebsqldump.js) jest oparty na bibliotece społeczności websqldump.js z niewielkimi zmianami. Poniżej znajduje się przykładowy kod, który przedstawia kod wymagany do translacji zawartości bazy danych Web SQL mydatabase na zestaw instrukcji SQL.

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

Uruchomienie tego kodu spowoduje wygenerowanie poniższego ciągu instrukcji 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');

Importowanie danych do Wasm SQLite

Pozostało tylko wykonywanie tych poleceń SQL w kontekście Wasm SQLite. Szczegółowe informacje o konfigurowaniu trybu SQLite Wam znajdziesz w artykule SQLite Wasm w przeglądarce opartej na Origin Private File System, ale poniżej znajdziesz jego ogólny opis. Pamiętaj, że ten kod musi zostać uruchomiony w instancji roboczej (której biblioteka tworzy automatycznie) z poprawnie ustawionymi wymaganymi nagłówkami HTTP. Możesz zainstalować pakiet @sqlite.org/sqlite-wasm 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. Masz teraz 2 pliki: jeden z rzeczywistą bazą danych, a drugi z informacjami z dziennika. Te 2 pliki znajdują się w prywatnym systemie plików punktu początkowego, więc aby je wyświetlić, musisz użyć rozszerzenia OPFS Explorer.

Aby faktycznie sprawdzić, czy zaimportowane dane są takie same jak początkowe dane Web SQL, kliknij plik mydatabase.db. Rozszerzenie Eksplorator OPFS wyświetli okno Zapisz plik, które umożliwia zapisanie pliku w systemie plików widocznym dla użytkowników. Po zapisaniu pliku bazy danych przejrzyj dane za pomocą aplikacji przeglądarki SQLite. Project Fugu API Showcase zawiera kilka aplikacji do pracy z SQLite w przeglądarce. Na przykład narzędzie Sqlime – SQLite Playground umożliwia otwarcie pliku bazy danych SQLite z dysku twardego i uruchamianie zapytań do bazy danych. Jak widać na poniższym zrzucie ekranu, tabela burzy z deszczem została prawidłowo zaimportowana do SQLite.

Zwalnianie miejsca na dane w Web SQL

Chociaż usunięcie bazy danych Web SQL jest (być może zaskakujące) niemożliwe, nadal warto zwolnić trochę miejsca, usuwając przestarzałe tabele Web SQL po przeniesieniu danych do Wasm SQLite. Aby wyświetlić listę wszystkich tabel w bazie danych Web SQL i upuścić je za pomocą JavaScriptu, użyj poniższego fragmentu kodu:

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 przeniesieniu danych wykorzystaj je w sposób opisany w przykładowym kodzie dla początkujących. Szczegółowe informacje znajdziesz w dokumentacji interfejsu SQLite Wasm API. Przypominamy, że jeśli jako backendu miejsca na dane używasz prywatnego systemu plików punktu początkowego, musisz uzyskać dostęp do modułu Wasm SQLite z poziomu instancji roboczej.

Przetestuj

W tej wersji demonstracyjnej możesz wypełnić bazę danych Web SQL przykładowymi danymi, a następnie skopiować dane Web SQL jako instrukcje SQL, które następnie zostaną zaimportowane do Wasm SQLite Wasm w ramach prywatnego systemu plików źródła. Na koniec zwolnij miejsce na dane, usuwając przestarzałe dane Web SQL. Pełną implementację, w tym poprawiony plik mywebsqldump.js, znajdziesz w kodzie źródłowym.

Podsumowanie

Migracja baz danych Web SQL do Wasm SQLite w ramach prywatnego systemu plików punktu początkowego jest możliwa w sposób przejrzysty dla użytkowników. Nie zauważą, że ich dane są teraz hostowane w prywatnym systemie plików punktu początkowego w bazie danych SQLite i nie są już dostępne w Web SQL. Ogólnie rzecz biorąc, migracja z Web SQL do SQLite jest niezbędnym krokiem dla programistów stron internetowych, którzy chcą zapewnić długoterminową stabilność i skalowalność swoich aplikacji. Chociaż ten proces może wymagać pewnego nakładu pracy, korzyści płynące z bardziej niezawodnego, elastycznego, a przede wszystkim przyszłościowego rozwiązania bazodalnego sprawiają, że warto zainwestować w ten proces.