SQLite Wasm en el navegador respaldado por el sistema de archivos privados de origen

Usa SQLite para administrar todas tus necesidades de almacenamiento de manera eficiente en la Web.

Información acerca de SQLite

SQLite es una base de datos popular de código abierto, liviana, incorporada, relacional de administración de bases de datos. Muchos desarrolladores lo usan para almacenar datos forma estructurada y fácil de usar. Debido a su pequeño tamaño y poca memoria , SQLite suele aprovecharse como un motor de base de datos en dispositivos móviles, aplicaciones de escritorio y navegadores web.

Una de las características clave de SQLite es que es una base de datos sin servidores, significa que no requiere un proceso de servidor independiente para funcionar. En cambio, la base de datos se almacena en un único archivo en el dispositivo del usuario, lo que facilita integrarse en las aplicaciones.

Logotipo de SQLite.

SQLite basado en Web Assembly

Existen varias versiones no oficiales de SQLite basadas en Web Assembly (Wasm), lo que permite usarla en navegadores web, por ejemplo, sql.js. El el subproyecto WASM/JS SQLite3 es la primer esfuerzo que está oficialmente asociado con el Proyecto SQLite que crea compilaciones de Wasm de la biblioteca miembros establecidos de la familia de entregables de SQLite compatibles. El cemento objetivos de este proyecto incluyen:

  • Mediante la vinculación de una API de SQLite3 de bajo nivel que sea lo más cercana a la API de C como sea posible condiciones de uso.
  • Una API orientada a objetos de nivel superior, más parecida a sql.js y Implementaciones estilo Node.js, que se relaciona directamente con la API de bajo nivel. Esta API se debe usar desde la misma subproceso como la API de bajo nivel.
  • Una API basada en trabajadores que se comunica con las APIs anteriores a través de mensajes de trabajadores. Esta uno está diseñado para usarse en el subproceso principal, con las APIs de nivel inferior instalarse en un subproceso de Worker y hablar con ellos a través de mensajes de Worker.
  • Es una variante de la API de trabajador basada en promesas que oculta por completo el y los aspectos de comunicación entre subprocesos del usuario.
  • Compatibilidad con el almacenamiento persistente del lado del cliente a través de las APIs de JavaScript disponibles incluido el Origin Private File System (OPFS).

Cómo usar SQLite Wasm con el backend de persistencia del sistema de archivos privados de origen

Instala la biblioteca desde npm

Instala el @sqlite.org/sqlite-wasm de npm con el siguiente comando:

npm install @sqlite.org/sqlite-wasm

Origin Private File System

El sistema de archivos privados de origen (OPFS, parte del API de File System Access) se complementa con un una plataforma especial que ofrece un acceso de muy buen rendimiento a los datos. Esta nueva plataforma difiere de las existentes ya que ofrece acceso de escritura in situ y exclusivo a un el contenido del archivo. Este cambio, junto con la capacidad de leer constantemente las modificaciones sin vaciar y la disponibilidad de una variante síncrona en de los trabajadores más dedicados, mejora considerablemente el rendimiento y permite diferentes.

Como puedes imaginar, el último punto de los objetivos del proyecto, el apoyo a el almacenamiento persistente del lado del cliente con APIs de JavaScript disponibles, incluye estrictos requisitos de rendimiento con respecto a los datos persistentes en el archivo de la base de datos. Aquí es donde Origin Private File System y, más específicamente, el createSyncAccessHandle() método de FileSystemFileHandle entra en juego. Este método devuelve una promesa que da como resultado un FileSystemSyncAccessHandle que se puede usar para leer y escribir en un archivo de forma síncrona. El la naturaleza síncrona de este método aporta ventajas en cuanto al rendimiento, pero, por lo tanto, solo pueden usarse en aplicaciones Web Workers para archivos dentro del sistema de archivos privados de origen para que no se pueda bloquear el subproceso principal.

Configura los encabezados obligatorios

Entre otros archivos, el archivo SQLite Wasm descargado contiene el sqlite3.js y sqlite3.wasm, que conforman la compilación SQLite3 WASM/JS. El jswasm contiene los entregables principales de SQLite3 y el directorio de nivel superior. Contiene apps de demostración y prueba. Los navegadores no entregarán archivos Wasm desde file://, por lo que cualquier app que crees con esto requerirá un servidor web y que debe incluir los siguientes encabezados en su respuesta cuando muestre el archivos:

El motivo de estos encabezados es que SQLite Wasm depende de SharedArrayBuffer: y configurar estos encabezados es parte de su requisitos de seguridad.

Si inspeccionas el tráfico con Herramientas para desarrolladores, verás lo siguiente: información:

Los dos encabezados mencionados anteriormente, Cross-Origin-Embedder-Policy y Cross-Origin-Opener-Policy, destacados en Herramientas para desarrolladores de Chrome.

Prueba de velocidad

El equipo de SQLite ejecutó algunas comparativas en su implementación de WebAssembly. en comparación con el Web SQL obsoleto. Estas comparativas muestran que SQLite Wasm es en general, tan rápido como Web SQL. A veces es un poco más lento, otras veces es un poco más rápida. Consulta todos los detalles en la página de resultados.

Muestra de código para comenzar

Como se mencionó anteriormente, SQLite Wasm con el sistema de archivos privados de origen que el backend de persistencia se ejecute desde un contexto de trabajadores. La buena noticia es que la biblioteca se encarga automáticamente de todo esto por ti directamente desde el subproceso principal.

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

(async () => {
  try {
    console.log('Loading and initializing SQLite3 module...');

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

    console.log('Done initializing. Running demo...');

    let response;

    response = await promiser('config-get', {});
    console.log('Running SQLite3 version', response.result.version.libVersion);

    response = await promiser('open', {
      filename: 'file:worker-promiser.sqlite3?vfs=opfs',
    });
    const { dbId } = response;
    console.log(
      'OPFS is available, created persisted database at',
      response.result.filename.replace(/^file:(.*?)\?vfs=opfs$/, '$1'),
    );

    await promiser('exec', { dbId, sql: 'CREATE TABLE IF NOT EXISTS t(a,b)' });
    console.log('Creating a table...');

    console.log('Insert some data using exec()...');
    for (let i = 20; i <= 25; ++i) {
      await promiser('exec', {
        dbId,
        sql: 'INSERT INTO t(a,b) VALUES (?,?)',
        bind: [i, i * 2],
      });
    }

    console.log('Query data with exec()');
    await promiser('exec', {
      dbId,
      sql: 'SELECT a FROM t ORDER BY a LIMIT 3',
      callback: (result) => {
        if (!result.row) {
          return;
        }
        console.log(result.row);
      },
    });

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

Demostración

Observa el código anterior en acción en la demostración. Asegúrate de consultar la código fuente en Glitch. Ten en cuenta que la siguiente versión incorporada no usa el backend de OPFS. pero cuando abres la demostración pestaña independiente.

Cómo depurar el sistema de archivos privados de origen

Para depurar el resultado del sistema de archivos privados de origen de SQLite Wasm, usa el Explorador de OPFS extensión de Chrome.

Explorador de OPFS en Chrome Web Store.

Después de instalar la extensión, abre las Herramientas para desarrolladores de Chrome y selecciona OPFS. Explorer, y estarás listo para inspeccionar lo que SQLite Wasm escribe en el Sistema de archivos privado de origen.

Extensión de Chrome OPFS Explorer que muestra la estructura del sistema de archivos privados de origen de la app de demostración.

Si haces clic en cualquiera de los archivos de la ventana del Explorador de OPFS en Herramientas para desarrolladores, puedes guardarla en el disco local. Luego, puedes usar una app como SQLite Viewer para inspeccionar la base de datos, de modo que puedas tener la certeza de que SQLite Wasm funciona según lo prometido.

App de visualización de SQLite que se usa para abrir un archivo de base de datos de la demostración de SQLite Wasm.

Cómo obtener ayuda y enviar comentarios

La comunidad de SQLite desarrolla y mantiene SQLite Wasm. Obtén ayuda y proporcionar comentarios buscando y publicando en el foro de asistencia. El valor completo Puedes encontrar documentación en el sitio de SQLite.

Agradecimientos

Imagen hero de Tobias Fischer en Retiro: