برنامه های وب پیشرو: IndexedDB

1. خوش آمدید

در این آزمایشگاه، از داده های مشتری در IndexedDB نسخه پشتیبان تهیه و بازیابی می کنید. این سومین مورد از مجموعه کدهای همراه برای کارگاه برنامه کاربردی وب پیشرو است. آزمایشگاه کد قبلی Working with Workbox بود. پنج کد دیگر در این سری وجود دارد.

چیزی که یاد خواهید گرفت

• یک پایگاه داده IndexedDB و ذخیره شی با استفاده از idb ایجاد کنید
• اضافه کردن و بازیابی آیتم ها به یک فروشگاه شی

آنچه شما باید بدانید

• جاوا اسکریپت و وعده ها

آنچه شما نیاز خواهید داشت

• مرورگری که از IndexedDB پشتیبانی می کند

2. راه اندازی کنید

با شبیه‌سازی یا دانلود کد شروع مورد نیاز برای تکمیل این لبه کد شروع کنید:

Repo را شبیه سازی کنید

دانلود فایل فشرده

اگر مخزن را شبیه سازی می کنید، مطمئن شوید که در شاخه pwa03--indexeddb هستید. فایل فشرده حاوی کد آن شاخه نیز می باشد.

این پایگاه کد به Node.js 14 یا بالاتر نیاز دارد. هنگامی که کد را در دسترس دارید، npm ci از خط فرمان موجود در پوشه کد اجرا کنید تا تمام وابستگی های مورد نیاز خود را نصب کنید. سپس، npm start اجرا کنید تا سرور توسعه برای Codelab راه اندازی شود.

فایل README.md کد منبع توضیحی برای همه فایل های توزیع شده ارائه می دهد. علاوه بر این، فایل‌های موجود کلیدی که در سرتاسر این Codelab با آنها کار خواهید کرد، به شرح زیر است:

فایل های کلیدی

• js/main.js - فایل جاوا اسکریپت برنامه اصلی

3. پایگاه داده را راه اندازی کنید

قبل از اینکه بتوان از پایگاه داده IndexedDB استفاده کرد، باید آن را باز و راه اندازی کرد. در حالی که می توانید مستقیماً این کار را انجام دهید، زیرا IndexedDB قبل از برجسته شدن Promises استاندارد شده بود، استفاده از رابط مبتنی بر callback می تواند دشوار باشد. در عوض، ما از idb استفاده خواهیم کرد، یک بسته بسیار کوچک Promise برای IndexedDB. برای شروع، ابتدا آن را به js/main.js وارد کنید:

import { openDB } from 'idb';

سپس، کد راه اندازی زیر را به بالای شنونده رویداد DOMContentLoaded اضافه کنید:

// 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 ذخیره و بارگذاری کنید.

کد بعدی این سری از تب به نوار وظیفه است