אפליקציות Progressive Web App‏: IndexedDB

1. שלום

בשיעור ה-Lab הזה תגבו ותשחזרו נתוני לקוחות ל-IndexedDB. זוהי הסדנה השלישית בסדרת סדנאות קוד שנועדו ללוות את סדנת Progressive Web App. ה-codelab הקודם היה Working with Workbox. יש עוד חמישה codelab בסדרה הזו.

מה תלמדו

  • יצירת מסד נתונים של IndexedDB ומאגר אובייקטים באמצעות idb
  • הוספה ואחזור של פריטים בחנות אובייקטים

מה חשוב לדעת

  • ‫JavaScript ו-Promises

מה צריך

2. טיפים להגדרה

כדי להתחיל, משכפלים או מורידים את הקוד לתחילת הדרך שנדרש להשלמת ה-Codelab הזה:

אם משכפלים את המאגר, חשוב לוודא שנמצאים בהסתעפות pwa03--indexeddb. קובץ ה-ZIP מכיל גם את הקוד של הענף הזה.

בסיס הקוד הזה דורש Node.js בגרסה 14 ומעלה. אחרי שהקוד זמין, מריצים את הפקודה npm ci משורת הפקודה בתיקיית הקוד כדי להתקין את כל התלויות שצריך. לאחר מכן, מריצים את הפקודה npm start כדי להפעיל את שרת הפיתוח של ה-codelab.

קובץ README.md של קוד המקור מספק הסבר לכל הקבצים המופצים. בנוסף, אלה הקבצים הקיימים העיקריים שתעבדו איתם במהלך ה-codelab הזה:

קבצים חשובים

  • ‫js/main.js – קובץ JavaScript של האפליקציה הראשית

3. הגדרת מסד נתונים

כדי להשתמש במסד נתונים של IndexedDB, צריך לפתוח אותו ולהגדיר אותו. אפשר לעשות את זה ישירות, אבל מכיוון ש-IndexedDB עבר סטנדרטיזציה לפני ש-Promises הפכו לשיטה בולטת, הממשק מבוסס הקריאה החוזרת שלו יכול להיות מסורבל לשימוש. במקום זאת, נשתמש ב-idb, עטיפת Promise קטנה מאוד ל-IndexedDB. כדי להתחיל, קודם מייבאים אותו אל js/main.js:

import { openDB } from 'idb';

לאחר מכן, מוסיפים את קוד ההגדרה הבא לחלק העליון של DOMContentLoaded event listener:

// Set up the database
const db = await openDB('settings-store', 1, {
  upgrade(db) {
    db.createObjectStore('settings');
  },
});

הסבר

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

4. שמירת מצב העריכה בעדכון

אחרי שמאתחלים את מסד הנתונים, אפשר לשמור בו תוכן. הכלי לעריכה חושף את השיטה onUpdate שמאפשרת להעביר פונקציה שתופעל בכל פעם שהתוכן מתעדכן בכלי לעריכה. זה המקום המושלם להקיש בו ולהוסיף את השינויים למסד הנתונים. כדי לעשות את זה, מוסיפים את הקוד הבא ממש לפני ההצהרה defaultText ב-js/main.js:

// Save content to database on edit
editor.onUpdate(async (content) => {
  await db.put('settings', content, 'content');
});

הסבר

‫db הוא מסד הנתונים של IndexedDB שנפתח קודם לכן. השיטה put מאפשרת ליצור או לעדכן רשומות בחנות אובייקטים במסד הנתונים הזה. הארגומנט הראשון הוא מאגר האובייקטים במסד הנתונים שבו רוצים להשתמש, הארגומנט השני הוא הערך שרוצים לאחסן, והארגומנט השלישי הוא המפתח שרוצים לשמור את הערך בו אם הוא לא ברור מהערך (במקרה הזה הוא לא ברור כי מסד הנתונים שלנו לא כולל מפתחות ספציפיים). מכיוון שהיא אסינכרונית, היא עטופה ב-async/await.

5. אחזור מצב בטעינה

לבסוף, כדי לשחזר את העבודה של המשתמש שנמצאת בתהליך, צריך לטעון אותה כשהכלי לעריכה נטען. הכלי לעריכה מספק שיטה setContent לעשות בדיוק את זה – להגדיר את התוכן שלו. הוא משמש כרגע להגדרת הערך defaultText. כדי לטעון במקומה את העבודה הקודמת של המשתמש, מעדכנים אותה כך:

editor.setContent((await db.get('settings', 'content')) || defaultText);

הסבר

במקום להגדיר את העורך לערך defaultText, הוא מנסה עכשיו לקבל את המפתח content מחנות האובייקטים settings במסד הנתונים settings-store IndexedDB. אם הערך הזה קיים, המערכת תשתמש בו. אם לא, המערכת תשתמש בטקסט ברירת המחדל.

6. הגדרה ואחזור של מצב לילה

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

// Set up night mode toggle
const { NightMode } = await import('./app/night-mode.js');
new NightMode(
  document.querySelector('#mode'),
  async (mode) => {
    editor.setTheme(mode);
    // Save the night mode setting when changed
  },
  // Retrieve the night mode setting on initialization
);

7. מעולה!

למדתם איך לשמור ולטעון נתונים ממאגר אובייקטים ב-IndexedDB.

ה-codelab הבא בסדרה הוא From Tab to Taskbar