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

Dzięki systemowi SQLite Wasm opartemu na prywatnym systemie plików źródła stanowi uniwersalny zamiennik wycofanej technologii baz danych Web SQL. Ten artykuł jest przewodnikiem po migracji danych z Web SQL do SQLite Wasm.

Wymagane tło

W poście Wycofanie i usuwanie Web SQL zapowiedzieliśmy wycofanie technologii baz danych Web SQL. Sama technologia może być wycofana, jednak przypadki użycia objęte nią w bardzo dużym stopniu są nieistotne. W kolejnym poście SQLite Wasm in the Browser oparty na prywatnym systemie plików Origin zawiera informacje o zastąpionym zestawie technologii opartych na bazie danych SQLite, skompilowanej do Web Assembly (Wasm) i wspieranych przez prywatny system plików źródła. Ten artykuł pokazuje, jak przenieść bazy danych z Web SQL do SQLite Wasm.

Migrowanie baz danych

Kolejne 4 kroki ilustrują koncepcję migracji bazy danych Web SQL do bazy danych SQLite Wasm, w której baza danych SQLite jest oparta na prywatnym systemie plików origin. Na podstawie tych informacji możesz utworzyć własny kod dostosowany do Twoich potrzeb związanych z migracją Web SQL.

Bazy danych Web SQL do przeniesienia

Zakładamy, że w tym przewodniku po migracji masz co najmniej 1 bazę danych Web SQL, która zawiera dane istotne dla Twojej aplikacji. Na zrzucie ekranu poniżej widać przykładową bazę danych o nazwie mojabaza_danych z tabelą burz, która mapuje nastroje na wagi. Narzędzia deweloperskie w Chrome umożliwiają wyświetlanie baz danych Web SQL do debugowania, jak pokazano na poniższym zrzucie ekranu.

Baza danych Web SQL sprawdzona w Narzędziach deweloperskich w Chrome. Baza danych nosi nazwę mojabaza_danych i zawiera tabelę z 3 kolumnami: ID wiersza, nastrój i wagę. Są tam 3 wiersze przykładowych danych.

Translacja bazy danych Web SQL na instrukcje SQL

Aby przenieść dane w sposób przejrzysty dla użytkowników, czyli bez konieczności samodzielnego wykonywania jakichkolwiek czynności związanych z migracją, dane w bazie danych muszą zostać przetłumaczone z powrotem do oryginalnych instrukcji SQL, które je utworzyły. Takie wyzwanie już się pojawiło, a skrypt migracji używany w tym artykule (mywebsqldump.js) jest oparty na bibliotece społeczności o nazwie websqldump.js, z pewnymi niewielkimi poprawkami. Poniższy przykładowy kod przedstawia kod wymagany do przetłumaczenia 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 wyświetlenie ciągu instrukcji SQL 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

Trzeba tylko wykonać te polecenia SQL w kontekście SQLite Wasm. Szczegółowe informacje o konfigurowaniu bazy danych SQLite Wasm w przeglądarce znajdziesz w artykule SQLite Wasm w przeglądarce, który korzysta z prywatnego systemu plików źródła. Istnieją jednak sedno sprawy. Pamiętaj, że ten kod musi zostać uruchomiony w instancji roboczej (która biblioteka automatycznie tworzy dla Ciebie) z prawidłowo 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 przy użyciu rozszerzenia OPFS Explorer do Chrome DevTools. Są 2 pliki: jeden z faktyczną bazą danych, a drugi z informacjami w dzienniku. Te 2 pliki znajdują się w prywatnym systemie plików origin, więc aby je wyświetlić, musisz użyć rozszerzenia OPFS Explorer.

Badanie prywatnego systemu plików źródła za pomocą Narzędzi deweloperskich w Chrome OPFS Explorer. Istnieją 2 pliki, jeden o nazwie mojabaza_danych.db, a drugi o nazwie mydatabase.db-journal.

Aby sprawdzić, czy zaimportowane dane są takie same jak początkowe dane Web SQL, kliknij plik mydatabase.db. Rozszerzenie OPFS Explorer 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 możesz przejrzeć dane za pomocą aplikacji SQLite Viewer. Project Fugu API Showcase zawiera kilka aplikacji do pracy z SQLite w przeglądarce. Na przykład aplikacja Sqlime – SQLite Playground pozwala otworzyć plik bazy danych SQLite na dysku twardym i wykonywać w niej zapytania. Jak widać na zrzucie ekranu poniżej, tabela burzy deszczowej została prawidłowo zaimportowana do SQLite.

Analiza pliku mydatabase.db w narzędziu Sqlime SQLite Playground. Aplikacja jest wyświetlana z gwiazdką wyboru zapytania SQL z limitu 10 burzy, w wyniku czego powstają 3 wiersze z początkowych przykładowych danych z Web SQL.

Zwalnianie miejsca na dane Web SQL

Chociaż usunięcie bazy danych Web SQL jest (może to być zaskakujące) nie ma możliwości usunięcia bazy danych Web SQL, nadal należy zwolnić część miejsca, usuwając przestarzałe tabele Web SQL po przeniesieniu danych do SQLite Wasm. Aby wyświetlić wszystkie tabele w bazie danych Web SQL i usunąć je za pomocą JavaScriptu, użyj kodu jak w tym fragmencie:

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 wykonaj czynności opisane w artykule Pierwsze kroki z kodem. Więcej informacji znajdziesz w dokumentacji interfejsu SQLite Wasm API. Przypominamy, że jeśli używasz prywatnego systemu plików źródła jako backendu, musisz uzyskać dostęp do SQLite Wasm z instancji roboczej.

Przetestuj

Ta prezentacja pozwala wypełnić bazę danych Web SQL przykładowymi danymi, a następnie zapisywać dane Web SQL jako instrukcje SQL, które następnie są importowane do SQLite Wasm na podstawie prywatnego systemu plików źródła. Na koniec zwalniasz miejsce na dane, usuwając przestarzałe dane Web SQL. Sprawdź kod źródłowy, aby zapoznać się z pełną implementacją, w tym z poprawionym plikiem mywebsqldump.js.

Aplikacja demonstracyjna dostępna pod adresem web-sql-to-sqlite-wasm.glitch.me.

Podsumowanie

Migracja baz danych Web SQL do SQLite Wasm przy użyciu prywatnego systemu plików źródła jest możliwa w sposób przejrzysty dla użytkowników. Nie zauważą, że ich dane są teraz przechowywane w prywatnym systemie plików źródła w bazie danych SQLite i nie znajdują się już 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. Ten proces może wymagać na początku pewnego nakładu pracy, ale zalety solidnego i elastycznego rozwiązania bazodanego na przyszłości są warte inwestycji.