Kaynak Özel Dosya Sistemi tarafından desteklenen tarayıcıda SQLite Wasm

Tüm depolama alanı ihtiyaçlarınızı web'de etkili bir şekilde karşılamak için SQLite kullanın.

Thomas Steiner

Başarı: Blog yayınımızda Web SQL'in kullanımdan kaldırılması ve kaldırılması, SQLite tabanlı Web SQL'in yerini alan bir hizmet. Origin'i içeren SQLite Wasm kitaplığı Gizli Dosya Sistemi kalıcı arka ucu, bu sözümüzü yerine getiriyoruz.

SQLite hakkında

SQLite popüler bir açık kaynak, basit, yerleştirilmiş ilişkisel sistemidir. Birçok geliştirici, verilerini bir şekilde özelleştirebilirsiniz. Küçük boyutu ve düşük bellek nedeniyle bir veritabanı motoru olarak kullandığı için SQLite, masaüstü uygulamaları ve web tarayıcıları.

SQLite'ın en önemli özelliklerinden biri, sunucusuz bir veritabanı olmasıdır. çalışması için ayrı bir sunucu işlemi gerektirmemesidir. Bunun yerine veritabanı kullanıcının cihazında tek bir dosyada saklandığından entegre edebiliyoruz.

Web Assembly tabanlı SQLite

Web Assembly'ye (Wasm) dayalı olarak resmi olmayan birkaç SQLite sürümü vardır. ve web tarayıcılarında kullanılmasına izin verir. Örneğin, sql.js'dir. İlgili içeriği oluşturmak için kullanılan sqlite3 WASM/JS alt projesi ilk adımı olarak eşsiz özelliklerinden Wasm kitaplığın Wasm derlemelerini yapan SQLite projesi desteklenen SQLite teslimatlarından oluşan ailenin yerleşik üyelerinden oluşuyor. Beton şu hedefleri sayabiliriz:

• C API'ye olabildiğince yakın bir alt düzey sqlite3 API bağlamak şartları kabul etmiş olursunuz.
• Şuna daha yakın, üst düzey nesne odaklı API: sql.js ve Node.js stili uygulamalara alt düzey API ile iletişim kurar. Bu API, iş parçacığının alt düzey API'sidir.
• Önceki API'lere Çalışan mesajları aracılığıyla iletişim kuran Çalışan tabanlı bir API. Bu Biri, alt düzey API'lerle ana iş parçacığında kullanılmak üzere tasarlanmıştır. ve bunlarla çalışan mesajları aracılığıyla iletişim kurulmasını sağlar.
• Worker API'nin söz konusu API'yi tamamen gizleyen Promise tabanlı bir varyantı. ileti dizileri arası iletişim kurmanın yanı sıra
• Mevcut JavaScript API'lerini kullanarak kalıcı istemci tarafı depolama desteği, Buna Kaynak Gizli Dosya Sistemi (OPFS) dahildir.

Kaynak Özel Dosya Sistemi kalıcı arka ucuyla SQLite Wasm'ı kullanma

npm'den kitaplığı yükleme

Şunu yükleyin: @sqlite.org/sqlite-wasm npm'den paketi aşağıdaki komutu kullanarak:

npm install @sqlite.org/sqlite-wasm

Kaynak Gizli Dosya Sistemi

Kaynak Gizli Dosya Sistemi (OPFS, File System Access API) ise Bu çözüm, verilere son derece etkili erişim sağlayan özel bir yüzeydir. Bu yeni platform yerleşik ve özel yazma erişimi sunarak mevcut olanlardan farklıdır. dosyanın içeriği hakkında daha fazla bilgi edinin. Bu değişim ve düzenli olarak okuma kabiliyeti değiştirilmemiş değişiklikler ve eşzamanlı bir varyantın kullanılabilirliği performansı önemli ölçüde artırır ve yeni kullanım alanları ortaya çıkarır durumlarda işe yarar.

Tahmin edebileceğiniz gibi, proje hedeflerinin son noktası olan ekibinize destek sunmak, mevcut JavaScript API'lerini kullanan kalıcı istemci tarafı depolama verilerin veritabanı dosyasında saklanmasıyla ilgili katı performans gereksinimleri. Kaynak Özel Dosya Sistemi ve özellikle createSyncAccessHandle() yöntemi FileSystemFileHandle devreye girer. Bu yöntem, FileSystemSyncAccessHandle Eşzamanlı olarak bir dosyaya okuma ve yazma işlemi yapmak için kullanılabilecek nesne. İlgili içeriği oluşturmak için kullanılan eşzamanlı yapısı performans avantajları sağlar, ancak diğer yalnızca özelleştirilebilir Web Çalışanları'nın kaynak Özel Dosya Sistemi'ndeki dosyaları kullanır.

Gerekli başlıkları ayarlama

Uyarı: Bu üstbilgilerin ayarlanması, Kaynak Özel dosya sisteminin kalıcı arka ucunun çalışması.

İndirilen SQLite Wasm arşivi, diğer dosyaların yanı sıra sqlite3.js içerir. ve sqlite3.wasm dosyaları sqlite3 WASM/JS derlemesini oluşturur. jswasm dizin, temel sqlite3 teslimatlarını ve üst düzey dizini içerir. demo ve test uygulamaları içerir. Tarayıcılar Wasm dosyalarını file:// URL'leri içerir. Bu nedenle, bununla oluşturduğunuz tüm uygulamalar bir web sunucusu sunucu, dosyalar:

• Cross-Origin-Opener-Policy şuna ayarla: same-origin yönergesi, Bu, tarama bağlamını yalnızca aynı kaynak dokümanlara ayırır. Kaynaklar arası dokümanlar aynı tarama bağlamında yüklenmez.
• Cross-Origin-Embedder-Policy şuna ayarla: require-corp yönergesi, Böylece bir doküman yalnızca aynı kaynaktan gelen kaynakları veya kaynakları yükleyebilir açıkça başka bir kaynaktan yüklenebilir olarak işaretlenmiş.

Bu başlıkların nedeni SQLite Wasm'ın SharedArrayBuffer Bu başlıkları ayarlamak, güvenlik şartlarına uymalısınız.

Geliştirici Araçları'nı kullanarak trafiği incelerseniz bilgi:

Hız testi

SQLite ekibi, WebAssembly uygulamaları için bazı karşılaştırmalar yaptı. web SQL'e kıyasla 3 kat daha fazla. Bu karşılaştırmalar SQLite Wasm'in genellikle Web SQL hızı kadar hızda ilerler. Bazen biraz daha yavaş, bazen de biraz daha hızlıdır. Tüm ayrıntıları öğrenmek için sonuçlar sayfasına gidin.

Başlangıç kod örneği

Daha önce belirtildiği gibi, Kaynak Özel Dosya Sistemi ile SQLite Wasm kalıcı arka ucun çalışan bağlamından çalıştırılması gerekir. Neyse ki kitaplık, tüm bunları sizin için otomatik olarak gerçekleştirir. doğrudan ana ileti dizisinden.

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

Demo

Demoda yukarıdaki kodun işleyiş şeklini görebilirsiniz. Şu bölüme mutlaka göz atın: kaynak kod görebilirsiniz. Aşağıdaki yerleştirilmiş sürümün OPFS arka ucunu kullanmadığını unutmayın. Demoyu açtığınızda, ayrı bir sekmeye ekleyin.

Kaynak Gizli Dosya Sisteminde Hata Ayıklama

SQLite Wasm'ın Kaynak Özel Dosya Sistemi çıkışında hata ayıklamak için OPFS Gezgini Chrome uzantısı.

Uzantıyı yükledikten sonra Chrome Geliştirici Araçları'nı açın, OPFS Gezgin sekmesine tıklayın. Böylece SQLite Wasm'in Kaynak Gizli Dosya Sistemi.

Geliştirici Araçları'ndaki OPFS Gezgini penceresindeki herhangi bir dosyayı tıkladığınızda dosyayı yerel diske kaydedebilir. Ardından şöyle bir uygulama kullanabilirsiniz: Veritabanını incelemek için SQLite Görüntüleyici'yi SQLite Wasm'ın aslında vadetildiği gibi çalıştığından emin olun.

Yardım alma ve geri bildirim sağlama

SQLite Wasm, SQLite topluluğu tarafından geliştirilip yönetilmektedir. Yardım alın ve şurada arama yaparak ve yayınlayarak geri bildirim sağlamak destek forumunu ziyaret edin. Tam dokümanlarını SQLite sitesinde bulabilirsiniz.

Teşekkür

Tobias Fischer'ın hero resmi Lansmanı kaldırın.