Van Web SQL naar SQLite Wasm: de databasemigratiegids

Met SQLite Wasm, ondersteund door het oorspronkelijke private bestandssysteem, is er een veelzijdige vervanging voor de verouderde Web SQL-databasetechnologie. Dit artikel is een handleiding voor het migreren van uw gegevens van Web SQL naar SQLite Wasm.

Thomas Steiner

Vereiste achtergrond

In het bericht 'Deprecating and removing Web SQL' werd de veroudering van de Web SQL-databasetechnologie aangekondigd. Hoewel de technologie zelf mogelijk verouderd is, geldt dit niet voor de use cases die ermee worden aangepakt. Daarom beschrijft het vervolgbericht 'SQLite Wasm in de browser, ondersteund door het Origin Private File System' een vervangende set technologieën gebaseerd op de SQLite- database, gecompileerd naar Web Assembly (Wasm) en ondersteund door het Origin Private File System . Om de cirkel rond te maken, laat dit artikel zien hoe u databases kunt migreren van Web SQL naar SQLite Wasm.

Uw databases migreren

De volgende vier stappen illustreren het conceptuele idee van het migreren van een Web SQL-database naar SQLite Wasm, waarbij de SQLite-database wordt ondersteund door het oorspronkelijke private bestandssysteem. Dit kan dienen als basis voor uw eigen code, aangepast aan uw Web SQL-migratiebehoeften.

De te migreren Web SQL-database(s)

De basisveronderstelling van deze migratiehandleiding is dat u over een (of meerdere) bestaande web-SQL-databases beschikt die relevante gegevens voor uw app bevatten. In de onderstaande schermafbeelding ziet u een voorbeelddatabase genaamd mydatabase met een tabel met regenbuien die stemmingen koppelt aan ernstniveaus. Met Chrome DevTools kunt u web-SQL-databases bekijken voor foutopsporing , zoals weergegeven in de volgende schermafbeelding.

Het vertalen van de Web SQL-database naar SQL-instructies

Om de data op een voor de gebruiker transparante manier te migreren, dat wil zeggen zonder dat deze zelf migratiestappen hoeft uit te voeren, moeten de data in de database worden terugvertaald naar de oorspronkelijke SQL-instructies waarmee ze in eerste instantie zijn gemaakt. Deze uitdaging is al eerder aan de orde geweest en het migratiescript dat in dit artikel wordt gebruikt mywebsqldump.js – is gebaseerd op een communitybibliotheek genaamd websqldump.js , met enkele kleine aanpassingen. Het volgende codevoorbeeld toont de code die nodig is om de web-SQL-database mydatabase te vertalen naar een set SQL-instructies.

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

Wanneer u deze code uitvoert, resulteert dit in de onderstaande SQL-instructies.

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');

Gegevens importeren in SQLite Wasm

Het enige wat overblijft is het uitvoeren van deze SQL-opdrachten in de context van SQLite Wasm. Voor alle details over het instellen van SQLite Wasm verwijs ik u naar het artikel SQLite Wasm in de browser met het Origin Private File System als back -up, maar de kern staat hieronder. Houd er rekening mee dat deze code moet worden uitgevoerd in een worker (die de bibliotheek automatisch voor u aanmaakt), met de vereiste HTTP-headers correct ingesteld. U kunt het pakket @sqlite.org/sqlite-wasm installeren vanuit 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);
  }
})();

Nadat u deze code hebt uitgevoerd, inspecteert u het geïmporteerde databasebestand met de OPFS Explorer Chrome DevTools-extensie. Er zijn nu twee bestanden: één met de daadwerkelijke database en één met journaling-informatie. Houd er rekening mee dat deze twee bestanden zich in het oorspronkelijke private bestandssysteem bevinden, dus u moet de OPFS Explorer-extensie gebruiken om ze te bekijken.

Om te controleren of de geïmporteerde gegevens overeenkomen met de oorspronkelijke Web SQL-gegevens, klikt u op het bestand mydatabase.db De OPFS Explorer-extensie toont dan een dialoogvenster 'Bestand opslaan' waarmee u het bestand kunt opslaan in het voor de gebruiker zichtbare bestandssysteem. Nadat u het databasebestand hebt opgeslagen, kunt u de gegevens bekijken met een SQLite Viewer-app. De Project Fugu API Showcase bevat verschillende apps voor het werken met SQLite in de browser . Met Sqlime — SQLite Playground kunt u bijvoorbeeld een SQLite-databasebestand vanaf uw harde schijf openen en query's op de database uitvoeren. Zoals u in de onderstaande schermafbeelding kunt zien, is de rainstorm-tabel correct geïmporteerd in SQLite.

Web SQL-opslag vrijmaken

Hoewel het (misschien verrassend) onmogelijk is om een ​​Web SQL-database te verwijderen , kunt u toch wat opslagruimte vrijmaken door de nu verouderde Web SQL-tabellen te verwijderen nadat u de gegevens naar SQLite Wasm hebt gemigreerd. Om alle tabellen in een Web SQL-database weer te geven en te verwijderen met behulp van JavaScript, gebruikt u code zoals in het volgende fragment:

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);
  }
};

Werken met de gegevens na de migratie

Nadat u de gegevens hebt gemigreerd, werkt u ermee zoals beschreven in dit codevoorbeeld 'Aan de slag' . Zie de SQLite Wasm API-referentie voor meer informatie. Nogmaals, we willen u eraan herinneren dat u SQLite Wasm vanuit een worker moet benaderen als u het oorspronkelijke private bestandssysteem als uw opslagbackend gebruikt.

Conclusies

Het migreren van uw Web SQL-databases naar SQLite Wasm, ondersteund door het oorspronkelijke private file system, is mogelijk op een manier die transparant is voor uw gebruikers. Ze zullen niet merken dat hun gegevens nu worden gehost in het oorspronkelijke private file system in een SQLite-database en niet langer in Web SQL staan. Over het algemeen is de migratie van Web SQL naar SQLite een noodzakelijke stap voor webontwikkelaars die de stabiliteit en schaalbaarheid van hun applicaties op lange termijn willen garanderen. Hoewel het proces in eerste instantie wat inspanning kan vergen, maken de voordelen van een robuustere, flexibelere en vooral toekomstbestendige databaseoplossing de investering meer dan waard.