SQLite Wasm w przeglądarce korzystającej z prywatnego systemu plików źródła

Korzystaj z SQLite, aby wydajnie zarządzać miejscem na dane w internecie.

SQLite to popularny, lekki, wbudowany system zarządzania relacyjną bazą danych oparty na open source. Wielu deweloperów używa go do przechowywania danych w sposób uporządkowany i łatwy w użyciu. Ze względu na niewielki rozmiar i małe wymagania dotyczące pamięci SQLite jest często wykorzystywany jako silnik bazy danych na urządzeniach mobilnych, w aplikacjach na komputery i w przeglądarkach internetowych.

Jedną z kluczowych funkcji SQLite jest to, że jest to baza danych bez serwera, co oznacza, że do działania nie wymaga osobnego procesu serwera. Zamiast tego baza danych jest przechowywana w jednym pliku na urządzeniu użytkownika, co ułatwia jej integrację z aplikacjami.

Logo SQLite

SQLite oparty na WebAssembly

Istnieje wiele nieoficjalnych wersji SQLite opartych na WebAssembly (Wasm), które umożliwiają korzystanie z niej w przeglądarkach internetowych, np. sql.js. Podprojekt sqlite3 WASM/JS to pierwsze oficjalnie powiązane z projektem SQLite przedsięwzięcie, które tworzy kompilacje Wasm biblioteki, które są już częścią rodziny obsługiwanych bibliotek SQLite. Konkretne cele tego projektu to:

  • Powiązanie interfejsu API sqlite3 niskiego poziomu, który jest jak najbardziej zbliżony do interfejsu C pod względem użycia.
  • interfejs API zorientowany na obiekty, który jest wyższym poziomem interfejsu sql.js i implementacji w stylu Node.js, który bezpośrednio komunikuje się z interfejsem niskiego poziomu; Z tego interfejsu API należy korzystać w tym samym wątku co interfejs API niskiego poziomu.
  • Interfejs API oparty na Workerze, który komunikuje się z poprzednimi interfejsami API za pomocą wiadomości Workera. Jest on przeznaczony do użycia w głównym wątku, z interfejsami API niskiego poziomu zainstalowanymi w wątku Worker, i komunikowania się z nimi za pomocą wiadomości Worker.
  • Wersja interfejsu Worker API oparta na obietnicach, która całkowicie ukrywa przed użytkownikiem aspekty komunikacji między wątkami.
  • Obsługa trwałego magazynu po stronie klienta za pomocą dostępnych interfejsów API JavaScript, w tym systemu plików Origin Private File System (OPFS).

Korzystanie z SQLite Wasm z backendem trwałości prywatnego systemu plików Origin

Instalowanie biblioteki z npm

Zainstaluj pakiet @sqlite.org/sqlite-wasm z npm za pomocą tego polecenia:

npm install @sqlite.org/sqlite-wasm

System plików prywatnych Origin

System plików Origin Private File System (OPFS, część interfejsu File System Access API) został wzbogacony o specjalną powierzchnię, która zapewnia bardzo wydajny dostęp do danych. Ta nowa opcja różni się od dotychczasowych tym, że oferuje dostęp do treści pliku w miejscu i z wyłącznością. Ta zmiana, wraz z możliwością spójnego odczytu niezsynchronizowanych modyfikacji i dostępnością wariantu synchronicznego na dedykowanych workerach, znacznie poprawia wydajność i umożliwia tworzenie nowych przypadków użycia.

Jak możesz sobie wyobrazić, ostatni punkt celów projektu, czyli obsługa trwałego magazynu po stronie klienta za pomocą dostępnych interfejsów JavaScript API, wiąże się ze ścisłymi wymaganiami dotyczącymi wydajności w zakresie trwałego przechowywania danych w pliku bazy danych. Właśnie w tym miejscu do akcji wkracza prywatny system plików Origin, a ściślej mówiąc metoda createSyncAccessHandle()FileSystemFileHandleobiektów. Ta metoda zwraca obietnicę, która zwraca obiekt FileSystemSyncAccessHandle, który może być używany do synchronicznego odczytu i zapisu pliku. Asychronicy charakter tej metody zapewnia lepsze osiągi, ale można jej używać tylko w dedykowanych workerach sieciowych w przypadku plików w systemie plików prywatnych Origin, aby nie blokować głównego wątku.

Ustawianie wymaganych nagłówków

Pobrane archiwum SQLite Wasm zawiera m.in. pliki sqlite3.js i sqlite3.wasm, które stanowią wersję sqlite3 WASM/JS. Katalog jswasm zawiera podstawowe wyniki sqlite3, a katalog najwyższego poziomu zawiera aplikacje demonstracyjne i testowe. Przeglądarki nie będą udostępniać plików Wasm z adresów URL file://, więc aplikacje tworzone z ich użyciem wymagają serwera WWW, który w odpowiedzi na żądanie udostępniania plików musi zawierać te nagłówki:

  • Cross-Origin-Opener-Policy ustawiona na dyrektywę same-origin, która izoluje kontekst przeglądania wyłącznie do dokumentów z tej samej domeny. Dokumenty z innych witryn nie są wczytywane w tym samym kontekście przeglądania.
  • Cross-Origin-Embedder-Policy ustawiony na dyrektywę require-corp, dzięki czemu dokument może wczytywać tylko zasoby z tego samego źródła lub zasoby wyraźnie oznaczone jako wczytywane z innego źródła.

Te nagłówki są potrzebne, ponieważ SQLite Wasm zależy od SharedArrayBuffer, a ustawianie tych nagłówków jest częścią wymagań dotyczących bezpieczeństwa.

Jeśli skontrolujesz ruch za pomocą Narzędzi deweloperskich, zobaczysz te informacje:

Dwa wspomniane powyżej nagłówki, Cross-Origin-Embedder-Policy i Cross-Origin-Opener-Policy, wyróżnione w Narzędziach deweloperskich w Chrome.

Speedtest

Zespół SQLite przeprowadził testy porównawcze implementacji WebAssembly w porównaniu z wycofanym interfejsem Web SQL. Te testy porównawcze pokazują, że SQLite Wasm jest na ogół tak samo szybki jak Web SQL. Czasami jest to trochę wolniej, a czasami szybciej. Wszystkie szczegóły znajdziesz na stronie wyników.

Przykładowy kod na początek

Jak już wspomnieliśmy, SQLite Wasm z systemem plików prywatnych Origin musi działać w kontekście Workera. Dobra wiadomość jest taka, że biblioteka automatycznie zadba o wszystko za Ciebie, a możesz z niej korzystać bezpośrednio z głównego wątku.

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

Prezentacja

Zobacz, jak działa kod powyżej, w prezentacji. Sprawdź kod źródłowy w Glitch. Poniżej widać wersję zintegrowaną, która nie korzysta z backendu OPFS, ale gdy otworzysz wersję demonstracyjną w oddzielnej karcie, będzie ona z niego korzystać.

Debugowanie prywatnego systemu plików Origin

Aby debugować dane wyjściowe systemu plików prywatnych Origin w SQLite Wasm, użyj rozszerzenia OPFS Explorer do Chrome.

OPFS Explorer w Chrome Web Store.

Po zainstalowaniu rozszerzenia otwórz Narzędzia deweloperskie w Chrome i wybierz kartę OPFS Explorer. Dzięki temu możesz sprawdzić, co SQLite Wasm zapisuje w Origin Private File System.

Rozszerzenie OPFS Explorer do Chrome pokazujące strukturę prywatnego systemu plików Origin w aplikacji demonstracyjnej.

Jeśli w oknie Eksploratora OPFS w narzędziach dla deweloperów wybierzesz dowolny plik, możesz go zapisać na dysku lokalnym. Następnie możesz użyć aplikacji takiej jak SQLite Viewer, aby sprawdzić bazę danych i upewnić się, że SQLite Wasm działa zgodnie z obietnicą.

Aplikacja SQLite Viewer służąca do otwierania pliku bazy danych z demo SQLite Wasm.

Uzyskiwanie pomocy i przesyłanie opinii

SQLite Wasm jest tworzona i utrzymywana przez społeczność SQLite. Aby uzyskać pomoc i przesłać opinię, wyszukaj na forum pomocy i opublikuj tam swój wpis. Pełna dokumentacja jest dostępna na stronie SQLite.