Estoy muy emocionado porque después de tanto tiempo y gracias al Origin Private File System podremos tener SQLite3 en los navegadores, con todas sus ventajas y todo contenido desde una página web.
Si quieres puedes ver el hola mundo sin Svelte, es decir, con JS puro y aprender cómo usar SQLite3 en el navegador web sin servidores.
Ya había leído eso hace tiempo pero tenías que hacer unas cosas “experimentales”.
El punto es que ando aprendiendo un poco de Svelte con Tailwind haciendo una app de notas (a las que les agregaré encriptación) y me dio curiosidad por ver si SQLite3 ya estaba “portado” totalmente, porque si bien ya existía con WebAssembly no había manera de crear archivos binarios en el navegador web.
Entonces encontré a: https://developer.chrome.com/blog/sqlite-wasm-in-the-browser-backed-by-the-origin-private-file-system/
Y vi que ya era posible. Lo siguiente era hacerlo funcionar con SvelteKit que usa a su vez Vite para todo su entorno.
Te contaré cómo lo hice y de dónde me he guiado.
Instalando dependencia
Lo primero que tenemos que hacer es instalar el paquete con:
npm install @sqlite.org/sqlite-wasm
Agregar encabezados para OPFS
Ahora vamos a configurar el “servidor” de desarrollo para que agregue unos encabezados y también excluya al paquete de optimizeDeps. Mi vite.config.js queda así:
Lo importante es optimizeDeps y el configure-response-headers.
Nota: cuando la aplicación sea compilada para producción será necesario agregar esos encabezados en el lugar donde la vayamos a servir. Aquí lo hacemos de ese modo porque Vite se encarga de hacerlo, pero si después la alojamos en un servidor Apache o similares debemos configurar lo necesario.
Creando web worker
Luego hice el worker.js colocado en src/worker.js. Quedó así con mis modificaciones (solo puse el hola e hice que los errores y registros se imprimieran en la consola):
SQLite3 con SvelteKit
Finalmente en mi componente cargué al Worker.
Aquí quiero dejar claro que, por alguna razón, al hacer un new Worker, me decía que “Worker” no está definido (debe ser alguna cuestión de la arquitectura que desconozco porque apenas estoy iniciando) así que lo tuve que cargar con import dentro del onMount guiándome de https://medium.com/geekculture/sveltekit-web-worker-8cfc0c86abf6
En este caso worker es el nombre del archivo. Los ../ son para referirme a la carpeta padre. Bien podría quedar así:
import('../../worker.js?worker')
Lo importante también es agregar el ?worker ya que el nombre del archivo puede ir sin la extensión. Y finalmente en el onMount:
Conclusión
Obviamente faltan muchas cosas a partir de aquí, pero ya es el “hola mundo” de SQLite3 “nativamente” en la web, usando todo lo existente de esa librería. Podemos crear tablas, consultar con varias condiciones, crear índices, unir tablas y todo lo que podemos hacer con SQLite3.
A mí me agrada bastante porque al fin tenemos algo robusto para almacenar datos en el navegador, con todo lo que SQL ofrece. Ya no será necesario usar localStorage con JSON.stringify ni librerías como PouchDB (aunque claro, sirven bastante bien y no por eso valen menos).
Espero poder integrar y terminar todo esto para luego publicar un ejemplo con JavaScript puro.
