SQLite Wasm trong trình duyệt, được hỗ trợ bởi Hệ thống tệp riêng tư theo nguồn gốc

Sử dụng SQLite để xử lý hiệu quả tất cả nhu cầu lưu trữ của bạn trên web.

Giới thiệu về SQLite

SQLite là một ngôn ngữ phổ biến, nguồn mở, gọn nhẹ, quan hệ dạng nhúng hệ thống quản lý cơ sở dữ liệu. Nhiều nhà phát triển sử dụng API này để lưu trữ dữ liệu trong có cấu trúc rõ ràng và dễ sử dụng. Do ứng dụng có kích thước nhỏ và bộ nhớ thấp SQLite thường được tận dụng làm công cụ cơ sở dữ liệu trong thiết bị di động, ứng dụng dành cho máy tính để bàn và trình duyệt web.

Một trong những đặc điểm chính của SQLite là cơ sở dữ liệu không máy chủ có nghĩa là để hoạt động không đòi hỏi một quy trình máy chủ riêng biệt. Thay vào đó, cơ sở dữ liệu được lưu trữ trong một tệp duy nhất trên thiết bị của người dùng, giúp bạn dễ dàng tích hợp vào các ứng dụng.

Biểu trưng SQLite.

SQLite dựa trên Web hội

Có một số phiên bản SQLite không chính thức dựa trên Web hội (wasm), cho phép sử dụng trong các trình duyệt web, ví dụ: sql.js. Chiến lược phát hành đĩa đơn Dự án phụ sqlite3 WASM/JS là được liên kết chính thức với Dự án SQLite tạo các bản dựng Wasm của thư viện thành viên thiết lập trong nhóm nội dung phân phối SQLite được hỗ trợ. Bê tông mục tiêu của dự án này bao gồm:

  • Liên kết một API sqlite3 cấp thấp gần với API C nhất khả thi trong điều khoản sử dụng.
  • API hướng đối tượng cấp cao hơn, gần giống với sql.jsTriển khai kiểu Node.js giao tiếp trực tiếp với API cấp thấp. API này phải được sử dụng từ cùng một làm API cấp thấp.
  • API dựa trên Worker nói chuyện với các API trước đó thông qua thông báo Worker. Chiến dịch này một định dạng để sử dụng trong luồng chính, với API cấp thấp hơn đã cài đặt trong luồng Worker và trò chuyện với chúng qua thông báo Worker.
  • Một biến thể dựa trên Promise của Worker API, giúp ẩn hoàn toàn thông tin các khía cạnh giao tiếp đa luồng của người dùng.
  • Hỗ trợ lưu trữ liên tục ở phía máy khách bằng các API JavaScript có sẵn, bao gồm cả Hệ thống tệp gốc riêng tư (OPFS).

Sử dụng SQLite Wasm với phần phụ trợ cố định Hệ thống tệp riêng tư ở nguồn gốc

Cài đặt thư viện từ npm

Cài đặt @sqlite.org/sqlite-wasm gói từ npm bằng lệnh sau:

npm install @sqlite.org/sqlite-wasm

Hệ thống tệp riêng tư gốc

Hệ thống tệp riêng tư gốc (OPFS, một phần của API Truy cập hệ thống tệp) được tăng cường bằng nền tảng đặc biệt mang lại quyền truy cập rất hiệu quả vào dữ liệu. Nền tảng mới này khác với các dịch vụ hiện có bằng việc cung cấp quyền ghi tại chỗ và độc quyền cho nội dung của tệp. Thay đổi này, cùng với khả năng đọc một cách nhất quán các sửa đổi chưa được gỡ bỏ và có sẵn một biến thể đồng bộ trên nhân viên tận tâm, cải thiện đáng kể hiệu suất và bỏ chặn người dùng mới trường hợp.

Như bạn có thể hình dung, điểm cuối cùng trong mục tiêu của dự án, Hỗ trợ cho lưu trữ lâu dài phía máy khách bằng API JavaScript sẵn có, đi kèm với yêu cầu nghiêm ngặt về hiệu suất liên quan đến việc lưu giữ dữ liệu vào tệp cơ sở dữ liệu. Đây là nơi Hệ thống tệp riêng tư gốc và cụ thể hơn là createSyncAccessHandle() phương thức của FileSystemFileHandle phát huy tác dụng. Phương thức này trả về một Promise phân giải thành một FileSystemSyncAccessHandle đối tượng có thể dùng để đọc và ghi đồng bộ vào một tệp. Chiến lược phát hành đĩa đơn bản chất đồng bộ của phương pháp này mang lại lợi thế về hiệu suất, nhưng do đó, nó chỉ sử dụng được trong Web Workers dành cho trong Hệ thống tệp riêng tư gốc để không thể chặn luồng chính.

Đặt tiêu đề bắt buộc

Trong số các tệp khác, kho lưu trữ SQLite Wasm đã tải xuống chứa sqlite3.jssqlite3.wasm, tạo thành bản dựng sqlite3 WASM/JS. jswasm Thư mục chứa các nội dung phân phối sqlite3 cốt lõi và thư mục cấp cao nhất chứa ứng dụng kiểm thử và minh hoạ. Các trình duyệt sẽ không phân phát tệp Wasm từ file:// URL, vì vậy, bất kỳ ứng dụng nào bạn xây dựng bằng loại này đều yêu cầu phải có máy chủ web và máy chủ phải bao gồm các tiêu đề sau trong phản hồi của mình khi cung cấp tệp:

  • Cross-Origin-Opener-Policy đặt thành lệnh same-origin, giúp tách riêng ngữ cảnh duyệt web thành các tài liệu có cùng nguồn gốc. Các tài liệu nhiều nguồn gốc không được tải trong cùng một ngữ cảnh duyệt web.
  • Cross-Origin-Embedder-Policy đặt thành lệnh require-corp, vì vậy, một tài liệu chỉ có thể tải tài nguyên từ cùng một nguồn gốc hoặc từ các tài nguyên được đánh dấu rõ ràng là có thể tải từ một nguồn khác.

Lý do cho các tiêu đề này là do SQLite Wasm phụ thuộc vào SharedArrayBuffer! và việc đặt các tiêu đề này là một phần của các yêu cầu về bảo mật.

Nếu kiểm tra lưu lượng truy cập bằng Công cụ cho nhà phát triển, bạn sẽ thấy những thông tin sau của bạn:

Hai tiêu đề nêu trên, Chính sách về nhiều nguồn gốc nhúng và Chính sách mở trên nhiều nguồn gốc, được làm nổi bật trong Công cụ của Chrome cho nhà phát triển.

Kiểm tra tốc độ

Nhóm SQLite đã chạy một số phép đo điểm chuẩn trong quá trình triển khai WebAssembly so với Web SQL không dùng nữa. Các điểm chuẩn này cho thấy SQLite Wasm thường có tốc độ nhanh như Web SQL. Đôi khi chậm hơn một chút, đôi khi nhanh hơn một chút. Xem tất cả chi tiết trên trang kết quả.

Mã mẫu bắt đầu

Như đã đề cập trước đó, SQLite Wasm với Hệ thống tệp riêng tư gốc chương trình phụ trợ cố định cần chạy từ ngữ cảnh Worker. Tin vui là thư viện sẽ tự động xử lý tất cả những việc này cho bạn và bạn có thể sử dụng ngay từ luồng chính.

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

Bản minh hoạ

Xem bản minh hoạ về mã nguồn ở trên. Hãy nhớ xem mã nguồn trên Glitch. Lưu ý rằng phiên bản được nhúng bên dưới không sử dụng phần phụ trợ OPFS, nhưng khi bạn mở bản minh hoạ trong một thẻ riêng.

Gỡ lỗi hệ thống tệp gốc riêng tư

Để gỡ lỗi dữ liệu đầu ra của Hệ thống tệp riêng tư gốc của SQLite Wasm, hãy sử dụng Trình khám phá OPFS Tiện ích của Chrome.

Trình khám phá OPFS trong Cửa hàng Chrome trực tuyến.

Sau khi cài đặt tiện ích này, hãy mở Công cụ của Chrome cho nhà phát triển, chọn OPFS Explorer, để rồi bạn có thể kiểm tra những gì SQLite Wasm ghi vào Nguồn gốc hệ thống tệp riêng tư.

Tiện ích OPFS Explorer của Chrome hiển thị cấu trúc Hệ thống tệp gốc riêng tư của ứng dụng minh hoạ.

Nếu nhấp vào bất kỳ tệp nào trong cửa sổ Trình khám phá OPFS trong Công cụ cho nhà phát triển, bạn có thể lưu vào ổ đĩa cục bộ. Sau đó, bạn có thể dùng một ứng dụng như Trình xem SQLite để kiểm tra cơ sở dữ liệu, nhờ đó bạn có thể hãy đảm bảo với chính bạn rằng SQLite Wasm thực sự hoạt động như đã hứa.

Ứng dụng Trình xem SQLite được dùng để mở tệp cơ sở dữ liệu trong bản minh hoạ SQLite Wasm.

Nhận trợ giúp và cung cấp phản hồi

SQLite Wasm được cộng đồng SQLite phát triển và duy trì. Nhận trợ giúp và bằng cách tìm kiếm trong và đăng lên diễn đàn hỗ trợ của chúng tôi. Đầy đủ tài liệu này có trên trang web SQLite.

Xác nhận

Hình ảnh chính của Tobias Fischer đang bật Không hiển thị màn hình.