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

Skorzystaj z SQLite, aby wydajnie zaspokoić wszystkie potrzeby związane z miejscem na dane w internecie.

SQLite – informacje

SQLite to popularny, open source, lekki, wbudowany system zarządzania relacyjną bazą danych. Wielu programistów używa jej do przechowywania danych w uporządkowany, łatwy w obsłudze sposób. Ze względu na niewielki rozmiar i niewielkie wymagania dotyczące pamięci SQLite często jest wykorzystywana jako silnik bazy danych w urządzeniach mobilnych, aplikacjach komputerowych i przeglądarkach.

Jedną z najważniejszych cech SQLite jest to, że jest to bezserwerowa baza danych, co oznacza, że nie wymaga do działania osobnego procesu serwera. Baza danych jest przechowywana w jednym pliku na urządzeniu użytkownika, co ułatwia integrację z aplikacjami.

Logo SQLite.

SQLite w oparciu o Web Assembly,

Istnieje wiele nieoficjalnych wersji SQLite opartych na Web Assembly (Wasm), co pozwala na używanie ich w przeglądarkach, np. sql.js. Podprojekt WASM/JS sqlite3 to pierwszy projekt oficjalnie powiązany z projektem SQLite, który tworzy kompilacje Wasm na podstawie biblioteki, dla której należą do rodziny obsługiwanych materiałów dostarczanych przez SQLite. Cele tego projektu to:

  • Powiązanie niskiego poziomu interfejsu API sqlite3, który jest jak najbardziej zbliżony do interfejsu C w odniesieniu do użycia.
  • Interfejs API wyższego poziomu zorientowany na obiekty, podobny do sql.js i implementacji typu Node.js, który komunikuje się bezpośrednio z niskim interfejsem API. Tego interfejsu API należy używać z tego samego wątku co interfejsu API niskiego poziomu.
  • Interfejs API oparty na instancjach roboczych, który komunikuje się z poprzednimi interfejsami API za pomocą komunikatów instancji roboczej. Jest on przeznaczony do użytku w wątku głównym, w którym w wątku instancji roboczych są zainstalowane interfejsy API niższego poziomu oraz komunikowanie się z nimi za pomocą komunikatów instancji roboczej.
  • Oparty na obietnicach wariant interfejsu Worker API, który całkowicie ukrywa przed użytkownikiem aspekty komunikacji między wątkami.
  • Obsługa trwałej pamięci po stronie klienta z wykorzystaniem dostępnych interfejsów API JavaScript, w tym Origin Private File System (OPFS).

Korzystanie z SQLite Wasm z backendem trwałości prywatnego systemu plików źródła

Instaluję bibliotekę z npm

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

npm install @sqlite.org/sqlite-wasm

Prywatny system plików źródła

System Origin Private File System (OPFS, część File System Access API) został wzbogacony o specjalną platformę, która zapewnia bardzo wydajny dostęp do danych. Ta nowa platforma różni się od dotychczasowych, oferując spersonalizowany i wyłączny dostęp do zawartości pliku. Ta zmiana, wraz z możliwością spójnego odczytu niezmienionych zmian i dostępności wariantu synchronicznego w wyznaczonych instancjach roboczych, znacznie poprawia wydajność i umożliwia korzystanie z nowych przypadków użycia.

Jak można sobie wyobrazić, ostatni element celów projektu – obsługa trwałego przechowywania po stronie klienta za pomocą dostępnych interfejsów API JavaScript – wiąże się z rygorystycznymi wymaganiami dotyczącymi przechowywania danych w pliku bazy danych. W tym miejscu do akcji wkracza prywatny system plików źródła, a konkretnie metoda createSyncAccessHandle() obiektów FileSystemFileHandle. Ta metoda zwraca obietnicę, która przyjmuje wartość do obiektu FileSystemSyncAccessHandle, którego można używać do synchronicznego odczytu pliku i zapisu w nim. Ta metoda synchronicznie zwiększa wydajność, ale dlatego można jej używać tylko w specjalnych instancjach roboczych przeznaczonych do plików w prywatnym systemie plików źródła, przez co nie można zablokować głównego wątku.

Ustawienie wymaganych nagłówków

Wśród innych plików pobrane archiwum SQLite Wasm zawiera pliki sqlite3.js i sqlite3.wasm, które składają się na kompilację WASM/JS sqlite3. Katalog jswasm zawiera podstawowe elementy do dostarczenia sqlite3, a katalog najwyższego poziomu – aplikacje demonstracyjne i testowe. Przeglądarki nie będą wyświetlać plików Wasm z adresów URL file://, dlatego aplikacje, które utworzysz za ich pomocą, wymagają serwera WWW, który podczas udostępniania plików musi zawierać w odpowiedzi te nagłówki:

Powodem utworzenia tych nagłówków jest to, że baza danych SQLite Wasm zależy od SharedArrayBuffer, a ich ustawienie jest jednym z wymagań w zakresie bezpieczeństwa.

Sprawdzając ruch za pomocą Narzędzi deweloperskich, znajdziesz w nich te informacje:

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

Test szybkości

Zespół SQLite przeprowadził testy porównawcze w implementacji WebAssembly w porównaniu z wycofaną wersją Web SQL. Te testy wskazują, że usługa SQLite Wasm zwykle działa tak szybko jak Web SQL. czasami działa wolniej, a czasem trochę szybciej. Więcej informacji znajdziesz na stronie wyników.

Przykładowy kod dla początkujących

Jak już wspomnieliśmy, SQLite Wasm z backendem trwałości prywatnego systemu plików źródła musi działać z kontekstu instancji roboczej. Dobra wiadomość jest taka, że biblioteka zrobi to automatycznie, a Ty możesz z niej korzystać bezpośrednio w wątku głównym.

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

Pokaz

Sposób działania kodu możesz zobaczyć w prezentacji. Sprawdź kod źródłowy na Glitch. Zwróć uwagę, że przedstawiona poniżej wersja nie korzysta z backendu OPFS, ale gdy otworzysz wersję demonstracyjną w osobnej karcie, już tak.

Debugowanie prywatnego systemu plików źródła

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

OPFS Explorer w Chrome Web Store

Po zainstalowaniu rozszerzenia otwórz Narzędzia deweloperskie w Chrome, wybierz kartę Eksplorator OPFS, a następnie sprawdź, co SQLite Wasm zapisuje w prywatnym systemie plików Origin.

Rozszerzenie OPFS Explorer do Chrome pokazujące strukturę prywatnego systemu plików źródła dla aplikacji demonstracyjnej.

Jeśli klikniesz dowolny plik w oknie Eksploratora OPFS w narzędziach deweloperskich, możesz go zapisać na dysku lokalnym. Do sprawdzenia bazy danych możesz użyć aplikacji takiej jak SQLite Wyświetlający, aby zyskać pewność, że SQLite Wasm działa zgodnie z oczekiwaniami.

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

Uzyskiwanie pomocy i przesyłanie opinii

Oprogramowanie SQLite Wasm zostało opracowane i utrzymywane przez społeczność SQLite. Aby uzyskać pomoc i przekazać swoją opinię, wyszukaj i zadaj pytanie na forum pomocy. Pełna dokumentacja jest dostępna na stronie SQLite.

Podziękowania

Baner powitalny od Tobiasa Fischera na stronie Unsplash.