SQLite Wasm ในเบราว์เซอร์ที่สนับสนุนโดยระบบไฟล์ส่วนตัวต้นทาง

ใช้ SQLite เพื่อจัดการพื้นที่เก็บข้อมูลทั้งหมดที่ต้องการได้อย่างมีประสิทธิภาพบนเว็บ

Thomas Steiner

SQLite เป็นระบบการจัดการฐานข้อมูลเชิงสัมพันธ์แบบฝังที่ได้รับความนิยม โอเพนซอร์ส และน้ำหนักเบา นักพัฒนาแอปหลายคนใช้เพื่อจัดเก็บข้อมูลในลักษณะที่มีโครงสร้างและใช้งานง่าย SQLite มักถูกนำมาใช้เป็นเครื่องมือฐานข้อมูลในอุปกรณ์เคลื่อนที่ แอปพลิเคชันเดสก์ท็อป และเว็บเบราว์เซอร์ เนื่องจากมีขนาดเล็กและต้องใช้หน่วยความจำน้อย

หนึ่งในฟีเจอร์หลักของ SQLite คือเป็นฐานข้อมูลแบบ Serverless ซึ่งหมายความว่าไม่จําเป็นต้องใช้กระบวนการเซิร์ฟเวอร์แยกต่างหากเพื่อทํางาน แต่ระบบจะจัดเก็บฐานข้อมูลไว้ในไฟล์เดียวในอุปกรณ์ของผู้ใช้แทน ซึ่งทำให้ผสานรวมกับแอปพลิเคชันได้ง่าย

SQLite อิงตาม Web Assembly

SQLite เวอร์ชันที่ไม่เป็นทางการจำนวนหนึ่งใช้ Web Assembly (Wasm) ซึ่งทำให้ใช้ในเว็บเบราว์เซอร์ได้ เช่น sql.js โปรเจ็กต์ย่อย sqlite3 WASM/JS เป็นโปรเจ็กต์แรกที่เกี่ยวข้องกับโปรเจ็กต์ SQLite อย่างเป็นทางการ ซึ่งสร้างบิลด์ Wasm ของไลบรารีซึ่งเป็นสมาชิกที่ก่อตั้งของตระกูลผลงานที่รองรับ SQLite เป้าหมายที่ชัดเจนของโปรเจ็กต์นี้ ได้แก่

• การเชื่อมโยง API ระดับต่ำของ sqlite3 ซึ่งใกล้เคียงกับ API ของ C มากที่สุดเท่าที่เป็นไปได้ในแง่การใช้งาน
• API เชิงออบเจ็กต์ระดับสูงขึ้น ซึ่งคล้ายกับ sql.js และการใช้งานสไตล์ Node.js มากกว่า ซึ่งจะสื่อสารกับ API ระดับล่างโดยตรง API นี้ต้องใช้จากเธรดเดียวกับ API ระดับล่าง
• API ที่อิงตาม Worker ซึ่งสื่อสารกับ API ก่อนหน้าผ่านข้อความ Worker API นี้มีไว้สําหรับใช้ในเธรดหลัก โดยติดตั้ง API ระดับล่างไว้ในเธรดผู้ทํางาน และสื่อสารกับ API เหล่านั้นผ่านข้อความของผู้ทํางาน
• ตัวแปร Worker API ที่อิงตาม Promise ซึ่งจะซ่อนแง่มุมการสื่อสารข้ามเธรดจากผู้ใช้โดยสิ้นเชิง
• การรองรับพื้นที่เก็บข้อมูลฝั่งไคลเอ็นต์แบบถาวรโดยใช้ JavaScript API ที่มีให้ รวมถึงระบบไฟล์ส่วนตัวของต้นทาง (OPFS)

การใช้ SQLite Wasm กับแบ็กเอนด์การคงข้อมูลระบบไฟล์ส่วนตัวของ Origin

การติดตั้งไลบรารีจาก npm

ติดตั้งแพ็กเกจ @sqlite.org/sqlite-wasm จาก npm ด้วยคำสั่งต่อไปนี้

npm install @sqlite.org/sqlite-wasm

ระบบไฟล์ส่วนตัวของ Origin

ระบบไฟล์ส่วนตัวของ Origin (OPFS ซึ่งเป็นส่วนหนึ่งของ File System Access API) ได้รับการเสริมด้วยแพลตฟอร์มพิเศษที่ให้การเข้าถึงข้อมูลได้อย่างมีประสิทธิภาพ แพลตฟอร์มใหม่นี้แตกต่างจากแพลตฟอร์มที่มีอยู่ตรงที่เสนอสิทธิ์การเขียนในตำแหน่งและสิทธิ์การเขียนเฉพาะสำหรับเนื้อหาของไฟล์ การเปลี่ยนแปลงนี้ รวมถึงความสามารถในการอ่านการแก้ไขที่ไม่ได้ล้างออกอย่างสม่ำเสมอและความพร้อมใช้งานของตัวแปรแบบซิงค์ในเวิร์กเกอร์เฉพาะจะช่วยปรับปรุงประสิทธิภาพและปลดล็อกกรณีการใช้งานใหม่ๆ ได้อย่างมีนัยสำคัญ

ดังที่คุณทราบ จุดสุดท้ายของเป้าหมายของโปรเจ็กต์คือ การรองรับพื้นที่เก็บข้อมูลฝั่งไคลเอ็นต์แบบถาวรโดยใช้ JavaScript API ที่มีให้ใช้งาน มาพร้อมกับข้อกําหนดด้านประสิทธิภาพที่เข้มงวดเกี่ยวกับการเก็บข้อมูลไปยังไฟล์ฐานข้อมูล ด้วยเหตุนี้ ระบบไฟล์ส่วนตัวของ Origin และโดยเฉพาะอย่างยิ่งวิธีใช้ออบเจ็กต์ FileSystemFileHandle ของ createSyncAccessHandle() จึงเข้ามามีบทบาท เมธอดนี้จะแสดงผล Promise ซึ่งจะแสดงผลเป็นออบเจ็กต์ FileSystemSyncAccessHandle ที่ใช้อ่านและเขียนไฟล์แบบซิงค์กันได้ ลักษณะการทำงานแบบซิงค์ของวิธีการนี้ให้ประโยชน์ด้านประสิทธิภาพ แต่จะใช้ได้เฉพาะใน Web Worker โดยเฉพาะสำหรับไฟล์ภายในระบบไฟล์ส่วนตัวของ Origin เพื่อไม่ให้บล็อกเธรดหลัก

การตั้งค่าส่วนหัวที่จำเป็น

ไฟล์ที่เก็บถาวร SQLite Wasm ที่ดาวน์โหลดมาจะมีไฟล์ sqlite3.js และ sqlite3.wasm ซึ่งประกอบกันเป็นบิลด์ sqlite3 WASM/JS ไดเรกทอรี jswasm จะมีไฟล์นำส่งหลักของ sqlite3 และไดเรกทอรีระดับบนสุดจะมีแอปสาธิตและแอปทดสอบ เบราว์เซอร์จะไม่แสดงไฟล์ Wasm จาก URL file:// ดังนั้นแอปที่คุณสร้างด้วยวิธีนี้จะต้องมีเว็บเซิร์ฟเวอร์ และเซิร์ฟเวอร์ดังกล่าวต้องมีส่วนหัวต่อไปนี้ในการตอบกลับเมื่อแสดงไฟล์

• Cross-Origin-Opener-Policy ตั้งค่าเป็นคำสั่ง same-origin ซึ่งแยกบริบทการท่องเว็บไว้สำหรับเอกสารต้นทางเดียวกันเท่านั้น ระบบจะไม่โหลดเอกสารข้ามแหล่งที่มาในบริบทการท่องเว็บเดียวกัน
• Cross-Origin-Embedder-Policy เป็นคำสั่ง require-corp เพื่อให้เอกสารโหลดได้เฉพาะทรัพยากรจากต้นทางเดียวกัน หรือทรัพยากรที่มีการทำเครื่องหมายไว้อย่างชัดเจนว่าโหลดได้จากต้นทางอื่น

เหตุผลที่ต้องมีส่วนหัวเหล่านี้คือ SQLite Wasm ต้องใช้ SharedArrayBuffer และการตั้งค่าส่วนหัวเหล่านี้เป็นส่วนหนึ่งของข้อกำหนดด้านความปลอดภัย

หากตรวจสอบการเข้าชมด้วยเครื่องมือสำหรับนักพัฒนาเว็บ คุณควรพบข้อมูลต่อไปนี้

Speedtest

ทีม SQLite ได้ทำการทดสอบประสิทธิภาพบางอย่างเกี่ยวกับการใช้งาน WebAssembly เทียบกับ Web SQL ที่เลิกใช้งานแล้ว การเปรียบเทียบเหล่านี้แสดงให้เห็นว่า SQLite Wasm โดยทั่วไปเร็วพอๆ กับ Web SQL บางครั้งอาจช้าลงเล็กน้อย บางครั้งก็เร็วขึ้นเล็กน้อย ดูรายละเอียดทั้งหมดในหน้าผลลัพธ์

ตัวอย่างโค้ดเริ่มต้นใช้งาน

ดังที่ได้กล่าวไว้ก่อนหน้านี้ SQLite Wasm ที่มีแบ็กเอนด์การคงข้อมูลระบบไฟล์ส่วนตัวของ Origin ต้องทำงานจากบริบทของ 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);
  }
})();

สาธิต

ดูการทำงานของโค้ดด้านบนในเดโม อย่าลืมตรวจสอบซอร์สโค้ดใน Glitch โปรดทราบว่าเวอร์ชันที่ฝังไว้ด้านล่างไม่ได้ใช้แบ็กเอนด์ OPFS แต่จะใช้เมื่อคุณเปิดการสาธิตในแท็บแยกต่างหาก

แก้ไขข้อบกพร่องของระบบไฟล์ส่วนตัวของ Origin

หากต้องการแก้ไขข้อบกพร่องเอาต์พุตระบบไฟล์ส่วนตัวของต้นทาง SQLite Wasm ให้ใช้ส่วนขยาย OPFS Explorer ใน Chrome

หลังจากติดตั้งส่วนขยายแล้ว ให้เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เลือกแท็บ OPFS Explorer จากนั้นคุณก็พร้อมที่จะตรวจสอบสิ่งที่ SQLite Wasm เขียนลงในระบบไฟล์ส่วนตัวของต้นทาง

หากเลือกไฟล์ใดก็ได้ในหน้าต่าง OPFS Explorer ในเครื่องมือสำหรับนักพัฒนาเว็บ คุณจะบันทึกไฟล์ลงในดิสก์ในเครื่องได้ จากนั้นคุณสามารถใช้แอปอย่าง SQLite Viewer เพื่อตรวจสอบฐานข้อมูล เพื่อให้มั่นใจว่า SQLite Wasm ใช้งานได้จริงตามที่สัญญาไว้

รับความช่วยเหลือและแสดงความคิดเห็น

SQLite Wasm ได้รับการพัฒนาและดูแลโดยชุมชน SQLite รับความช่วยเหลือและแสดงความคิดเห็นโดยค้นหาและโพสต์ในฟอรัมการสนับสนุน ดูเอกสารประกอบฉบับเต็มได้ในเว็บไซต์ SQLite