SQLite Wasm בדפדפן שמגובה על ידי מערכת הקבצים הפרטית של Origin

שימוש ב-SQLite כדי לטפל בכל צורכי האחסון באופן יעיל באינטרנט.

Thomas Steiner

הצלחה: בפוסט בבלוג שלנו הוצאה משימוש והסרה של Web SQL, הבטחנו שתחליף ל-Web SQL מבוסס על SQLite. ספריית SQLite Wasm הקצה העורפי של Private File System (הקצה העורפי של Private File System) הוא מילוי ההבטחה שלנו.

מידע על SQLite

SQLite היא שיטה פופולרית, קוד פתוח, קל-משקל, מוטמע רלציוני לניהול מסדי נתונים. מפתחים רבים משתמשים בו כדי לאחסן נתונים בצורה מובנית וקלה לשימוש. בגלל גודלו הקטן ונפח הזיכרון הפנוי לרוב משתמשים ב-SQLite כמנוע מסד נתונים במכשירים ניידים, אפליקציות למחשבים ודפדפני אינטרנט.

אחת התכונות העיקריות של SQLite היא שמסד הנתונים הוא ללא שרת (serverless), כלומר, לא נדרש תהליך נפרד לשרת כדי לפעול. במקום זאת, מסד הנתונים מאוחסן בקובץ יחיד במכשיר של המשתמש, וכך קל לשלב אותו באפליקציות.

SQLite שמבוסס על Web Assembly

קיימות מספר גרסאות SQLite לא רשמיות המבוססות על Web Assembly (Wasm), כדי לאפשר שימוש בו בדפדפני אינטרנט, לדוגמה, sql.js. הפרויקט המשני sqlite3 WASM/JS הוא שקשורה באופן רשמי פרויקט SQLite שיוצר את גרסאות ה-build של הספרייה ב-Wasm חברים רבים במשפחת פריטי התוכן הנתמכים של SQLite. הבטון אלה המטרות של הפרויקט:

• קישור של ממשק API של sqlite3 ברמה נמוכה שקרוב ככל האפשר ל-C אחד תנאים והגבלות.
• API ממוקד-אובייקטים ברמה גבוהה יותר, דומה יותר ל- sql.js ו- הטמעות בסגנון Node.js, מפנה ישירות ל-API ברמה הנמוכה. חובה להשתמש ב-API הזה מאותו בתור ה-API ברמה הנמוכה.
• ממשק API מבוסס-עובדים שמדבר לממשקי ה-API הקודמים באמצעות הודעות של Worker. הזה אחד מיועד לשימוש ב-thread הראשי, באמצעות ממשקי ה-API ברמה נמוכה יותר מותקנים בשרשור של עובדים, וכדי לדבר איתם באמצעות הודעות של Worker.
• וריאנט מבוסס-הבטחה של Worker API שמסתיר לגמרי את היבטי תקשורת בין שרשורים מהמשתמש.
• תמיכה באחסון מתמיד בצד הלקוח באמצעות ממשקי API זמינים של JavaScript, כולל מערכת Origin Private File System (OPFS).

שימוש ב-SQLite Wasm עם הקצה העורפי של Origin Private File System

התקנת הספרייה מ-NPM

להתקין את @sqlite.org/sqlite-wasm חבילה מ-npm באמצעות הפקודה הבאה:

npm install @sqlite.org/sqlite-wasm

מערכת המקור של הקבצים הפרטיים

Origin Private File System (OPFS), חלק מ File System Access API) מורחב באמצעות פלטפורמה מיוחדת שמאפשרת גישה בעלת ביצועים טובים מאוד לנתונים. הפלטפורמה החדשה הזו שונה מהמודעות הקיימות בכך שהיא מציעה גישת כתיבה במקום ובלעדית תוכן הקובץ. השינוי הזה, לצד היכולת לקרוא באופן עקבי וזמינות של וריאנט סינכרוני עובדים ייעודיים, שיפור משמעותי של הביצועים וביטול החסימה של שימוש חדש במקרים שונים.

כמו שאפשר לדמיין, הנקודה האחרונה של יעדי הפרויקט, תמיכה אחסון מתמיד בצד הלקוח באמצעות ממשקי API זמינים של JavaScript, מגיע עם דרישות ביצועים מחמירות בנוגע לשמירת נתונים בקובץ מסד הנתונים. כאן, ב-Origin, מערכת הקבצים הפרטיים, ובפרט createSyncAccessHandle() אמצעי תשלום אחד FileSystemFileHandle אובייקטים נכנסים למשחק. השיטה הזו מחזירה 'הבטחה' שמסתיימת FileSystemSyncAccessHandle שאפשר להשתמש בו כדי לקרוא באופן סינכרוני מקובץ ולכתוב בו. האופי הסינכרוני של השיטה הזו מפיק יתרונות בביצועים, אפשר להשתמש בו רק Web Workers עבור קבצים בתוך מערכת הקבצים הפרטית המקורית, כך שאי אפשר לחסום את ה-thread הראשי.

הגדרת הכותרות הנדרשות

אזהרה: הגדרת הכותרות האלה היא שלב חובה עבור המקור הקצה העורפי של Private File System to work.

בין הקבצים האחרים, ארכיון SQLite Wasm שהורדתם מכיל את sqlite3.js ו-sqlite3.wasm, שמרכיבים את גרסת ה-build של sqlite3 WASM/JS. jswasm מכילה את פריטי הליבה של sqlite3 ואת הספרייה ברמה העליונה. מכיל אפליקציות להדגמה ולבדיקה. דפדפנים לא יציגו קובצי Wasm מ- file:// כתובות URL, כך שלכל אפליקציה שיוצרים עם הכתובת הזו נדרש שרת אינטרנט השרת חייב לכלול את הכותרות הבאות בתגובתו כאשר הוא מגיש את קבצים:

• Cross-Origin-Opener-Policy מוגדר לערך הוראת same-origin, שמבודד את הקשר הגלישה רק למסמכים מאותו מקור. מסמכים ממקורות שונים לא נטענים באותו הקשר גלישה.
• Cross-Origin-Embedder-Policy מוגדר לערך הוראת require-corp, כך שמסמך יכול לטעון משאבים רק מאותו מקור או אותו משאבים סומן במפורש כניתנת לטעינה ממקור אחר.

הסיבה לכותרות האלה היא ש-SQLite Wasm תלוי SharedArrayBuffer והגדרת הכותרות האלה היא חלק דרישות אבטחה.

אם בודקים את התנועה באמצעות כלי פיתוח, אמורים לראות את הדברים הבאים מידע:

בדיקת מהירות

חברי צוות SQLite הפעילו כמה בנצ'מרקים לגבי ההטמעה של WebAssembly בהשוואה ל-Web SQL שהוצא משימוש. נקודות ההשוואה האלה מראות ש-SQLite Wasm יחסית מהר כמו Web 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);
  }
})();

הדגמה (דמו)

אפשר לראות את הקוד שלמעלה בפעולה בהדגמה. חשוב לעיין קוד מקור ב-Glitch. שימו לב שהגרסה המוטמעת שבהמשך לא משתמשת בקצה העורפי של OPFS. אבל כשפותחים את ההדגמה כרטיסייה נפרדת כן.

ניפוי באגים במערכת הקבצים הפרטית המקורית

כדי לנפות באגים בפלט Origin Private File System של SQLite Wasm, משתמשים OPFS Explorer תוסף ל-Chrome.

לאחר התקנת התוסף, פותחים את כלי הפיתוח ל-Chrome ובוחרים באפשרות OPFS. Explorer, ואז תוכלו לבדוק את מה ש-SQLite Wasm כותבת מערכת הקבצים הפרטיים המקורית.

אם תלחצו על אחד מהקבצים בחלון OPFS Explorer ב-כלי הפיתוח, יכול לשמור אותו בדיסק המקומי. לאחר מכן תוכלו להשתמש באפליקציה כמו SQLite Viewer: לבדוק את מסד הנתונים, תוכלו להיות בטוחים ש-SQLite Wasm באמת פועלת כמו שהובטח.

קבלת עזרה ושליחת משוב

קהילת SQLite פותחה ומתוחזקת על ידי קהילת SQLite. קבלת עזרה ולספק משוב על ידי חיפוש ופרסום פורום התמיכה. המלא מסמכי התיעוד זמינים באתר SQLite.

אישורים

התמונה הראשית (Hero) של Tobias Fischer על ביטול הפתיחה.