このページは Cloud Translation API によって翻訳されました。

Origin Private File System を基盤とするブラウザ内の SQLite Wasm

SQLite を使用して、ウェブですべてのストレージニーズを高いパフォーマンスで処理します。

Thomas Steiner

SQLite について

SQLite は広く使用されているオープンソース、軽量の埋め込みリレーショナルデータベース管理システムなどです多くのデベロッパーはこれを使用して簡単に作成できるようにすることです。容量が小さく、メモリが少ないため、 SQLite は多くの場合、モバイルデバイスのデータベースエンジンとして活用されます。デスクトップアプリケーション、ウェブブラウザです。

SQLite の重要な特長の一つはサーバーレスデータベースであることです。つまり、運用のために個別のサーバープロセスを必要としないということです。代わりにデータベースはユーザーのデバイス上に 1 つのファイルに保存されるため、アプリケーションに統合できます。

Web Assembly に基づく SQLite

SQLite には、Web Assembly（Wasm）をベースにした非公式バージョンが多数あります。たとえば、 sql.js「 sqlite3 WASM/JS サブプロジェクトは、 SRE に関する最初の取り組みとして、ライブラリの Wasm ビルドを作成する SQLite プロジェクトサポートされる SQLite の成果物ファミリーの確立されたメンバーです。コンクリートこのプロジェクトの目標は次のとおりです。

可能な限り C に近い低レベルの sqlite3 API をバインドする。利用規約に記載されます。
より高レベルのオブジェクト指向 API。 sql.js と Node.js スタイルの実装低レベル API と直接やり取りします。この API は、低レベル API として使用します。
Worker メッセージを介して以前の API と通信する Worker ベースの API。この 1 つはメインスレッドでの使用を目的としたもので、下位レベルの API は Worker スレッドにインストールされ、Worker メッセージを介してやり取りします。
Worker API の Promise ベースのバリアントで、スレッド間通信の側面を認識します。
利用可能な JavaScript API を使用した永続的なクライアントサイドストレージのサポートこれには Origin Private File System（OPFS）も含まれます。

Origin Private File System 永続バックエンドで SQLite Wasm を使用する

npm からライブラリをインストールする

@sqlite.org/sqlite-wasm パッケージを npm からインストールします。

npm install @sqlite.org/sqlite-wasm

オリジンのプライベートファイルシステム

Origin Private File System（OPFS）は、 File System Access API など）は、高パフォーマンスのデータアクセスを実現する特殊なサーフェスこの新しいサーフェス既存のものとは異なり、アプリケーションに対するインプレースアクセスと排他的書き込みアクセスが表示されます。今回の変更により同期可能なバリアントの可用性をパフォーマンスが大幅に向上し、新たな使用の妨げとなる対応できます

ご想像のとおり、プロジェクトの目標の最後のポイントは、クライアントサイドの永続ストレージにデータを保存し、データベースファイルへのデータの永続化に関する厳しいパフォーマンス要件。これがオリジンプライベートファイルシステム、具体的には createSyncAccessHandle() メソッド FileSystemFileHandle 出番ですこのメソッドは Promise を返します。 FileSystemSyncAccessHandle ファイルの同期的な読み取り / 書き込みに使用可能なオブジェクトです。「同期的な性質を持つため、パフォーマンス上の利点はありますが、 Dedicated Interconnect またはウェブワーカー: メインスレッドをブロックできないようにします。

必須ヘッダーの設定

特に、ダウンロードした SQLite Wasm アーカイブには sqlite3.js が含まれています。および sqlite3.wasm ファイルがあります。これらは sqlite3 WASM/JS ビルドです。jswasm ディレクトリには、sqlite3 のコアとなる成果物と、最上位のディレクトリがあります。デモ用とテスト用アプリが含まれています。ブラウザは Wasm ファイルを file:// URL です。そのため、この URL を使用して作成するアプリにはウェブサーバーが必要であり、サーバーは、広告の配信時に次のヘッダーをレスポンスに含める必要があります。ファイル:

Cross-Origin-Opener-Policy を same-origin ディレクティブ、これは、ブラウジングコンテキストを同一オリジンのドキュメントに排他的に分離します。クロスオリジンのドキュメントは同じブラウジングコンテキストで読み込まれません。
Cross-Origin-Embedder-Policy を require-corp ディレクティブ、ドキュメントには、同じオリジンのリソースのみ、または明示的に別のオリジンから読み込み可能とマークされています。

これらのヘッダーの理由は、SQLite Wasm が SharedArrayBuffer これらのヘッダーの設定はセキュリティ要件。

DevTools でトラフィックを検査すると、以下のことがわかります。含まれます

上記の 2 つのヘッダー、Cross-Origin-Embedder-Policy と Cross-Origin-Opener-Policy が Chrome DevTools でハイライト表示されています。

スピードテスト

SQLite チームは WebAssembly 実装でいくつかのベンチマークを実行しましたパフォーマンスが向上しますこれらのベンチマークは、SQLite Wasm が処理速度はウェブ SQL とほぼ同じです。速度が遅くなるときやその方が少し速くなります。詳しくは、結果ページ。

スタートガイドのコードサンプル

前述のように、オリジンプライベートファイルシステムでの SQLite Wasm Worker コンテキストから実行する必要があります。幸いなことにこの処理はすべてライブラリが自動的に行い直接アクセスできます。

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

デモ

上記のコードの実際の動作については、デモをご覧ください。 Google 広告ヘルプセンターのソースコード。以下の埋め込みバージョンは OPFS バックエンドを使用しません。 Google Chat でデモを開くと、別のタブを開きます。

オリジンのプライベートファイルシステムのデバッグ

SQLite Wasm のオリジンプライベートファイルシステムの出力をデバッグするには、次のコマンドを使用します。 OPFS エクスプローラ Chrome 拡張機能。

Chrome ウェブストアの OPFS Explorer。

拡張機能をインストールしたら、Chrome DevTools を開いて [OPFS エクスプローラのタブを開き、SQLite Wasm が書き込んだファイルの内容を調べる準備が整いました送信元のプライベートファイルシステムです。

デモアプリのオリジンプライベートファイルシステムの構造を示す OPFS Explorer Chrome 拡張機能。

DevTools の [OPFS Explorer] ウィンドウでいずれかのファイルをクリックすると、ローカルディスクに保存できます。その後、次のようなアプリを使用できます。 SQLite ビューア: データベースを検査します。これにより、 SQLite Wasm が実際に約束どおりに動作することを確認します。

SQLite Wasm デモからデータベースファイルを開くために使用される SQLite Viewer アプリ。

ヘルプの利用とフィードバックの提供

SQLite Wasm は、SQLite コミュニティによって開発、保守されています。ヘルプとフィードバックを送信して、サポートフォーラムをご利用ください。完全なドキュメントをご覧ください。

謝辞

ヒーロー画像作成者: Tobias Fischer スプラッシュを解除。