प्रोग्रेसिव वेब ऐप्लिकेशन: IndexedDB

1. आपका स्वागत है

इस लैब में, आपको IndexedDB में क्लाइंट के डेटा का बैक अप लेने और उसे वापस पाने का तरीका बताया जाएगा. यह प्रोग्रेसिव वेब ऐप्लिकेशन वर्कशॉप के लिए, साथ में इस्तेमाल किए जाने वाले कोडलैब की सीरीज़ का तीसरा कोडलैब है. पिछला कोडलैब, Workbox के साथ काम करना था. इस सीरीज़ में पांच और कोडलब हैं.

आपको क्या सीखने को मिलेगा

• idb का इस्तेमाल करके, IndexedDB डेटाबेस और ऑब्जेक्ट स्टोर बनाना
• किसी ऑब्जेक्ट स्टोर में आइटम जोड़ना और उन्हें वापस पाना

आपको क्या पता होना चाहिए

• JavaScript और प्रॉमिस

आपको इन चीज़ों की ज़रूरत होगी

• ऐसा ब्राउज़र जो IndexedDB के साथ काम करता हो

2. सेट अप करना

इस कोडलैब को पूरा करने के लिए, ज़रूरी स्टार्टर कोड को क्लोन करें या डाउनलोड करें:

Repo को क्लोन करना

ज़िप फ़ाइल डाउनलोड करें

अगर आपको रेपो को क्लोन करना है, तो पक्का करें कि आप pwa03--indexeddb ब्रांच पर हों. ZIP फ़ाइल में उस ब्रांच का कोड भी होता है.

इस कोडबेस के लिए, Node.js 14 या उसके बाद का वर्शन ज़रूरी है. कोड उपलब्ध होने के बाद, कोड के फ़ोल्डर में कमांड लाइन से npm ci चलाएं. इससे, आपको ज़रूरी सभी डिपेंडेंसी इंस्टॉल करने में मदद मिलेगी. इसके बाद, कोडलैब के लिए डेवलपमेंट सर्वर शुरू करने के लिए, npm start चलाएं.

सोर्स कोड की README.md फ़ाइल में, डिस्ट्रिब्यूट की गई सभी फ़ाइलों के बारे में जानकारी दी गई है. इसके अलावा, यहां कुछ ऐसी मुख्य फ़ाइलें दी गई हैं जिन पर आपको इस कोडलैब के दौरान काम करना होगा:

मुख्य फ़ाइलें

• js/main.js - मुख्य ऐप्लिकेशन की JavaScript फ़ाइल

3. डेटाबेस सेट अप करना

IndexedDB डेटाबेस का इस्तेमाल करने से पहले, इसे खोलना और सेट अप करना ज़रूरी है. इसे सीधे तौर पर किया जा सकता है. हालांकि, IndexedDB को Promises के लोकप्रिय होने से पहले स्टैंडर्ड बनाया गया था. इसलिए, इसके कॉलबैक आधारित इंटरफ़ेस का इस्तेमाल करना मुश्किल हो सकता है. इसके बजाय, हम idb का इस्तेमाल करेंगे. यह IndexedDB के लिए बहुत छोटा Promise रैपर है. शुरू करने के लिए, सबसे पहले इसे js/main.js में इंपोर्ट करें:

import { openDB } from 'idb';

इसके बाद, DOMContentLoaded इवेंट लिसनर के सबसे ऊपर, यह सेटअप कोड जोड़ें:

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

जानकारी

यहां settings-store नाम का IndexedDB डेटाबेस बनाया गया है. इसका वर्शन 1 पर सेट किया गया है और इसे settings नाम के ऑब्जेक्ट स्टोर के साथ शुरू किया गया है. यह सबसे बुनियादी तरह का ऑब्जेक्ट स्टोर है. इसमें सिर्फ़ कुंजी-वैल्यू के जोड़े होते हैं. हालांकि, ज़रूरत के हिसाब से ज़्यादा जटिल ऑब्जेक्ट स्टोर बनाए जा सकते हैं. ऑब्जेक्ट स्टोर को शुरू किए बिना, डेटा को कहीं भी नहीं रखा जा सकेगा. इसलिए, इसे यहां से हटाने का मतलब है कि बिना टेबल वाला डेटाबेस बनाना.

4. अपडेट होने पर एडिटर की स्थिति सेव करें

डेटाबेस को शुरू करने के बाद, अब इसमें कॉन्टेंट सेव करने का समय है! एडिटर, onUpdate नाम का एक तरीका उपलब्ध कराता है. इसकी मदद से, एडिटर में कॉन्टेंट अपडेट होने पर कॉल किए जाने वाले फ़ंक्शन को पास किया जा सकता है. यह डेटाबेस में बदलाव करने के लिए सबसे सही जगह है. इसके लिए, js/main.js में defaultText के ठीक पहले यह कोड जोड़ें:

// 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 की वैल्यू को सेट करने के बजाय, settings-store IndexedDB डेटाबेस में मौजूद settings ऑब्जेक्ट स्टोर से content कुंजी को पाने की कोशिश करता है. अगर वह वैल्यू मौजूद है, तो उसका इस्तेमाल किया जाता है. अगर ऐसा नहीं है, तो डिफ़ॉल्ट टेक्स्ट का इस्तेमाल किया जाता है.

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 में ऑब्जेक्ट स्टोर से डेटा सेव करने और लोड करने का तरीका जान लिया है.

इस सीरीज़ का अगला कोडलैब, टैब से टास्कबार पर ले जाना है