Cloud Firestore

यह कोडलैब, प्रोग्रेसिव वेब ऐप्लिकेशन ट्रेनिंग कोर्स का हिस्सा है. इसे Google Developers की ट्रेनिंग टीम ने बनाया है. अगर आप कोडलैब के क्रम में काम करते हैं, तो आपको इस कोर्स का ज़्यादा से ज़्यादा फ़ायदा मिलेगा.

कोर्स के बारे में पूरी जानकारी के लिए, प्रोग्रेसिव वेब ऐप्लिकेशन की खास जानकारी डेवलप करना देखें.

आप इन चीज़ों के बारे में जानेंगे

  • Firebase पर Cloud Firestore प्रोजेक्ट सेट अप करने का तरीका
  • Firestore के साथ पढ़ने और लिखने की बुनियादी सुविधा
  • (ज़रूरी नहीं) Cloud Firestore को ऑफ़लाइन इस्तेमाल करने का तरीका

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

  • बेसिक एचटीएमएल, सीएसएस, और JavaScript
  • ES2015 के वादे
  • कमांड लाइन से कमांड चलाने का तरीका
  • (वैकल्पिक सेक्शन के लिए) सर्विस वर्कर और वर्कबॉक्स की जानकारी

आपको यह चाहिए हाेगा

  • टर्मिनल/शेल ऐक्सेस वाला कंप्यूटर
  • इंटरनेट कनेक्शन
  • टेक्स्ट एडिटर
  • नोड और एनपीएम

github से, pwa-training-labs डेटा स्टोर करने की जगह को डाउनलोड या क्लोन करें. अगर ज़रूरत हो, तो NodeS.js का LTS वर्शन इंस्टॉल करें.

firestore-lab/project/ फ़ोल्डर को अपने पसंदीदा टेक्स्ट एडिटर में खोलें. project/ फ़ोल्डर में आप लैब बनाने जा रहे हैं.

एक नया Cloud Firestore प्रोजेक्ट बनाएं:

  1. Firebase कंसोल खोलें और नया प्रोजेक्ट बनाएं.
  2. डेटाबेस सेक्शन में, Firestore बीटा आज़माएं पर क्लिक करें.
  3. &टेस्ट मोड में शुरू करें&कोटेशन चुनें
  4. चालू करें पर क्लिक करें

ध्यान दें: आप एक ही प्रोजेक्ट में Cloud Firestore और Cloud Datastore दोनों का इस्तेमाल नहीं कर सकते हैं. इससे App Engine का इस्तेमाल करने वाले ऐप्लिकेशन पर असर पड़ सकता है. अगर आपका प्रोजेक्ट पहले से Cloud Datastore का उपयोग कर रहा है, तो किसी दूसरे प्रोजेक्ट के साथ Cloud Firestore का उपयोग करके देखें.

इसके बाद, क्लोज़िंग </body> टैग से ठीक पहले, index.html में ये स्क्रिप्ट जोड़ें:

index.html

<script src="/__/firebase/4.9.0/firebase-app.js"></script>
<script src="/__/firebase/4.9.0/firebase-auth.js"></script>
<script src="/__/firebase/4.9.0/firebase-firestore.js"></script>
<script src="/__/firebase/init.js"></script>

यह कोड, Firebase लाइब्रेरी का इस्तेमाल करके ऐप्लिकेशन को होस्ट करने पर ज़रूरी लाइब्रेरी इंपोर्ट करता है.

आपको #39 Firebase क्लाउड सीएलआई का चालू वर्शन चाहिए.

कमांड लाइन विंडो खोलें और project/ फ़ोल्डर में डायरेक्ट्री बदलें.

इसके बाद, यह निर्देश चलाएं:

npm install -g firebase-tools

टूल इंस्टॉल होने के बाद, Firebase सीएलआई को अपने Firebase प्रोजेक्ट से इंटरैक्ट करने की अनुमति देने के लिए लॉग इन करें.

firebase login

इसके बाद, कॉन्फ़िगरेशन फ़ाइलें बनाने और Firebase ऐप्लिकेशन को शुरू करने के लिए, project/ डायरेक्ट्री में यह निर्देश चलाएं:

firebase init

ऊपर दिए गए निर्देश को चलाने के बाद, टर्मिनल में एक अनुरोध दिखेगा. नीचे बताए गए निर्देशों का पालन करें:

  1. Firestore चुनें (जैसे, कर्सर को Firestore विकल्प में ले जाएं और स्पेस दबाएं) और return दबाएं
  2. अभी-अभी बनाए गए Firebase प्रोजेक्ट को चुनें और return दबाएं
  3. Firestore के नियमों के लिए डिफ़ॉल्ट फ़ाइल का इस्तेमाल करने के लिए, return दबाएं
  4. Firestore इंडेक्स के लिए डिफ़ॉल्ट फ़ाइल का इस्तेमाल करने के लिए, return दबाएं

अब अगर हम अपना वेब ऐप्लिकेशन चलाते हैं, तो वह अपने-आप पता लगा लेता है कि Firebase (और Firestore) का कौनसा प्रोजेक्ट इस्तेमाल करना है. हालांकि, ऐप्लिकेशन उपलब्ध कराने से पहले हमें कुछ और चरण पूरे करने होंगे.

firebase.json फ़ाइल खोलें और hosting कॉन्फ़िगरेशन में जोड़ें. पूरी फ़ाइल कुछ इस तरह दिखनी चाहिए:

firebase.json

{
  "hosting": {
    "public": "./",
    "ignore": [
      "firebase.json",
      "database-rules.json",
      "storage.rules",
      "functions"
    ],
    "headers": [
      {
        "source": "**/*.@(js|html)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=0"
          }
        ]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

इसका मतलब है

hosting कॉन्फ़िगरेशन आपको यह तय करने की सुविधा देता है कि Firebase आपके ऐप्लिकेशन को कैसे होस्ट करेगा. हमें Firebase डेवलपमेंट सर्वर का इस्तेमाल करने के लिए यह विकल्प तय करना होगा, जिसे हम बाद के चरण में करते हैं. ज़्यादा जानकारी के लिए डिप्लॉयमेंट कॉन्फ़िगरेशन देखें.

हालांकि, पुष्टि करना कोडलैब के दायरे में नहीं है, लेकिन हमारे ऐप्लिकेशन में किसी न किसी तरह की पुष्टि करना ज़रूरी है. हम बिना पहचान वाले लॉगिन का इस्तेमाल करेंगे. इसका मतलब है कि उपयोगकर्ता बिना पूछे सूचना दिए बिना लॉग इन कर सकता है.

'Firebase कंसोल' का इस्तेमाल करके, आप अपने ऐप्लिकेशन में पहचान छिपाने की सुविधा चालू कर सकते हैं. साइन इन करने वाली कंपनी के कॉन्फ़िगरेशन पेज पर, अपने-आप जाने के लिए यह निर्देश दें.

firebase open auth

इसके अलावा, आपके प्रोजेक्ट के लिए 'Firebase कंसोल' में डेवलप करें > पुष्टि करना > साइन इन करने का तरीका पर जाएं.

इस पेज पर आने के बाद, पहचान छिपाकर पर क्लिक करें. इसके बाद, चालू करें पर क्लिक करें और सेव करें पर क्लिक करें:

हम अपने ऐप्लिकेशन पर काम शुरू करने के लिए तैयार हैं! आइए इसे firebase निर्देश के ज़रिए स्थानीय रूप से चलाते हैं:

firebase serve

अब अपना ब्राउज़र खोलें और localhost:5000 देखें. आपको अपनी स्पेस रेस! की कॉपी दिखेगी, जिसे आपके Firebase प्रोजेक्ट से कनेक्ट कर दिया गया है.

ऐप्लिकेशन हमारे प्रोजेक्ट से अपने-आप कनेक्ट हो गया है और हमने हमें पहचान छिपाकर उपयोगकर्ता के तौर पर लॉग इन कर दिया है.

इस सेक्शन में हम' Firestore में कुछ डेटा लिखेंगे ताकि हम ऐप्लिकेशन&#39 के यूज़र इंटरफ़ेस (यूआई) को पॉप्युलेट कर सकें. आप 'Firebase कंसोल' का इस्तेमाल करके, इसे मैन्युअल तरीके से कर सकते हैं. हालांकि, हम ऐप्लिकेशन में इसे #39;बुनियादी तौर पर Firestore के लिए लिखेंगे.

हमारे ऐप्लिकेशन में मुख्य मॉडल ऑब्जेक्ट एक स्पेसशिप है. Firestore डेटा को दस्तावेज़ों के ज़रिए दिखाया जाता है. डेटा को कलेक्शन और सब-कलेक्शन में व्यवस्थित किया जाता है. इस ऐप्लिकेशन में, हम हर शिप को एक दस्तावेज़ के तौर पर स्टोर करते हैं. इसे टॉप लेवल के संग्रह में रखा जाता है, जिसे &kot;ships". आप दस्तावेज़ में Firestore डेटा मॉडल के बारे में ज़्यादा जान सकते हैं.

फ़िलहाल, हमारे ऐप्लिकेशन के Cloud Firestore डेटाबेस में कोई डेटा नहीं है. अपने प्रोजेक्ट के लिए 'Firebase कंसोल' में, डेवलप करें; डेटाबेस पर जाएं और देखें कि डेटाबेस खाली है.

अपने ऐप्लिकेशन में डेटा जोड़ने के लिए, फ़ंक्शन को लागू करें.

scripts/SpaceRace.Data.js खोलें और SpaceRace.prototype.addShip फ़ंक्शन ढूंढें. नीचे दिए गए कोड से पूरे फ़ंक्शन को बदलें:

SpaceRace.Data.js

SpaceRace.prototype.addShip = function(data) {
  const collection = firebase.firestore().collection('ships');
  return collection.add(data);
};

ऊपर दिया गया कोड ships Firestore कलेक्शन में एक नया दस्तावेज़ जोड़ता है. फ़ंक्शन को पहले ships कलेक्शन के लिए रेफ़रंस मिलता है. इसके बाद, add' data का रेफ़रंस मिलता है. दस्तावेज़ data एक सादे JavaScript ऑब्जेक्ट से मिला है.

सुरक्षा के नियम

हम करीब #39 मिनट तक काम कर रहे हैं - इससे पहले कि हम Cloud Firestore में दस्तावेज़ लिखें, हमें Firestore' के सुरक्षा नियमों को कॉन्फ़िगर करने की ज़रूरत है. इन नियमों से पता चलता है कि हमारे डेटाबेस के किन हिस्सों को पढ़ने लायक और लिखने लायक होना चाहिए. साथ ही, किन उपयोगकर्ताओं को इन्हें लिखना चाहिए. अभी के लिए, हम सभी प्रमाणित उपयोगकर्ताओं को पूरे डेटाबेस को पढ़ने और उसमें लिखने की अनुमति देंगे. यह किसी प्रोडक्शन ऐप्लिकेशन के लिए थोड़ा अनुमति देता है. हालांकि, डेवलपमेंट की प्रोसेस के दौरान हम कुछ हद तक आरामदेह होना चाहते हैं, ताकि प्रयोग के दौरान हम पुष्टि करने से जुड़ी समस्याओं का सामना न करें.

firestore.rules नाम की फ़ाइल खोलें और पूरी फ़ाइल को नीचे दिए गए कोड से बदलें:

Firestore.नियम

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      // Only authenticated users can read or write data
      allow read, write: if request.auth != null;
    }
  }
}

इसके बाद, कमांड लाइन में इन्हें चलाएं:

firebase deploy --only firestore:rules

ऐसा करने से firestore.rules फ़ाइल, हमारे Firebase प्रोजेक्ट में डिप्लॉय हो जाएगी.

इसके अलावा, आप Firebase कंसोल खोल सकते हैं और > डेटाबेस > नियम पर जा सकते हैं. साथ ही, डिफ़ॉल्ट नियमों को हमारे नए नियमों से बदल सकते हैं.

ध्यान दें: अगर आप सुरक्षा के नियमों के बारे में ज़्यादा जानना चाहते हैं, तो सुरक्षा के नियमों वाला दस्तावेज़ देखें.

पेज को रीफ़्रेश करें और &"मॉक डेटा जोड़ें" बटन पर टैप करें. यह बटन, SpaceRace.Mock.js में बताए गए addMockShips फ़ंक्शन को कॉल करता है. यह फ़ंक्शन, पहले बताए गए addShip फ़ंक्शन का इस्तेमाल करता है. addMockShips शिप के दस्तावेज़ों का एक बैच बनाता है, हालांकि, आपको यह ऐप्लिकेशन में अभी नहीं दिखेगा. हमें अब भी डेटा वापस पाने की प्रोसेस लागू करनी होगी.

इसके बाद, 'Firebase कंसोल' में डेटाबेस टैब पर जाएं. अब आपको ships संग्रह में नई एंट्री दिखेगी (शायद आपको पेज रीफ़्रेश करना पड़े):

बधाई हो, आपने अभी-अभी किसी वेब ऐप्लिकेशन से Cloud Firestore में डेटा लिखा है! अगले सेक्शन में, आप Firestore से डेटा वापस पाने और उसे ऐप्लिकेशन में दिखाने का तरीका जानेंगे.

इस सेक्शन में, आप Firestore से डेटा पाने और उसे ऐप्लिकेशन में दिखाने का तरीका जानेंगे. दो मुख्य चरण हैं, क्वेरी बनाना और स्नैपशॉट लिसनर जोड़ना. इस लिसनर को उन सभी मौजूदा डेटा के बारे में सूचना दी जाएगी जो क्वेरी से मेल खाते हैं और जिन्हें रीयल टाइम में अपडेट मिलेंगे.

आइए ऐसी क्वेरी बनाएं जो जहाज़ों की सूची दिखाए. SpaceRace.prototype.getAllShips() तरीके को इस कोड से बदलें:

SpaceRace.Data.js

SpaceRace.prototype.getAllShips = function(render) {
  const query = firebase.firestore()
    .collection('ships')
    .limit(50);
  this.getDocumentsInQuery(query, render);
};

इस स्निपेट में, हम एक क्वेरी बनाते हैं, जिसमें ऊपर के लेवल के 50 जहाज़ों को हासिल किया जाएगा. इस संग्रह का नाम &kot;ships&कोटेशन; है. जब हम यह क्वेरी #39; एलान करते हैं, तब हम इसे getDocumentsInQuery() तरीके को भेज देते हैं, जो डेटा लोड और रेंडर करने के लिए ज़िम्मेदार होता है. इस तरीके में स्नैपशॉट लिसनर का इस्तेमाल किया जाएगा. SpaceRace.prototype.getDocumentsInQuery() तरीके को इस कोड से बदलें:

SpaceRace.Data.js

SpaceRace.prototype.getDocumentsInQuery = function(query, render) {
  query.onSnapshot(snapshot => {
    if (!snapshot.size) return render();
    snapshot.docChanges.forEach(change => {
      if (change.type === 'added') {
        render(change.doc);
      }
      else if (change.type === 'removed') {
        document.getElementById(change.doc.id).remove();
      }
    });
  });
};

हर बार क्वेरी के नतीजे में बदलाव होने पर, ऊपर दिए गए कोड का query.onSnapshot, अपना कॉलबैक आर्ग्युमेंट ट्रिगर करता है. पहली बार, कॉलबैक, क्वेरी के पूरे नतीजों के सेट से ट्रिगर होता है. यह Firestore से ships पूरा संग्रह होता है. दस्तावेज़ के अलग-अलग बदलावों में, type प्रॉपर्टी दिखती है. इससे पता चलता है कि इन बदलावों में क्या बदलाव किया गया है. अगर कोई दस्तावेज़ added है, तो दस्तावेज़ को render फ़ंक्शन पर पास किया जाता है. अगर दस्तावेज़ removed था, तो संबंधित शिप कार्ड को डीओएम से हटा दिया जाता है.

हमने डेटा वापस पाने के दोनों तरीकों को लागू किया है, इसलिए ऐप्लिकेशन को रीफ़्रेश करें. साथ ही, पुष्टि करें कि हमने Cloud Firestore में जोड़े गए जहाज़ (और Firestore कंसोल में दिख रहे हैं) अब ऐप्लिकेशन में दिख रहे हैं. अगर आपने इस सेक्शन को पूरा कर लिया है, तो अब आपका ऐप्लिकेशन Cloud Firestore के साथ डेटा पढ़ रहा है और लिख रहा है!

ऐप्लिकेशन का फ़ॉर्म भरकर अपनी पसंद के मुताबिक शिप करने की कोशिश करें. शिप करने की आपकी सूची में बदलाव होने पर, यह लिसनर अपने-आप अपडेट होता रहेगा. अब 'Firebase कंसोल' पर जाएं और हाथ से एक जहाज़ जोड़ें - यह आपको अपनी साइट पर तुरंत दिखेगा!

ध्यान दें: Query.get() तरीके का इस्तेमाल करके रीयल टाइम अपडेट सुनने के बजाय, Firestore से एक बार दस्तावेज़ फ़ेच किए जा सकते हैं.

संग्रह में से खास जहाज़ों को मिटाने के लिए, एक फ़ंक्शन लिखें.

SpaceRace.Data.js में SpaceRace.prototype.deleteShip() तरीके को इस कोड से बदलें:

SpaceRace.Data.js

SpaceRace.prototype.deleteShip = function(id) {
  const collection = firebase.firestore().collection('ships');
  return collection.doc(id).delete()
    .catch(function(error) {
      console.error('Error removing document: ', error);
    });
};

एक बार यह लागू हो जाने के बाद, आप शिप's के कार्ड के ऊपरी दाएं कोने में जाकर, खास शिप को मिटा सकते हैं. फ़ाइल सेव करें, ऐप्लिकेशन रीफ़्रेश करें, और शिप को मिटाने की कोशिश करें.

Cloud Firestore ऑफ़लाइन डेटा का भी इस्तेमाल करता है, जो आपके ऐप्लिकेशन के स्थानीय कॉपी के डेटा को कैश मेमोरी में सेव करता है. उपयोगकर्ता के ऑफ़लाइन रहने के दौरान इन बदलावों में बदलाव किया जा सकता है. साथ ही, कनेक्टिविटी बहाल होने के बाद इसे सिंक किया जा सकता है. सेवा वर्कर के साथ मिलकर, हम अपने ऐप्लिकेशन को ऑफ़लाइन काम करने के लिए अपडेट कर सकते हैं.

project/ डायरेक्ट्री के रूट में sw.js फ़ाइल बनाकर, इस कोड का इस्तेमाल करें:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');

if (workbox) {

  // Pre-cache HTML, CSS, and image assets
  workbox.precaching.precacheAndRoute([
    {
      "url": "index.html",
      "revision": "a7a5b45e7a48ecf2cb10fd8bddf70342"
    },
    {
      "url": "style/main.css",
      "revision": "7ca18ea2f5608b3c3f67339a57a4fc8e"
    },
    {
      "url": "images/delete.svg",
      "revision": "840ae217e9fe8c73c6d76286aefef63f"
    },
    {
      "url": "images/rocket-form.svg",
      "revision": "6bcd12b01e14547c1f9e0069c3da5f0d"
    },
    {
      "url": "images/rocket-icon.png",
      "revision": "f61c19851368484e8cb7efebf4d26a77"
    },
    {
      "url": "images/rocket.svg",
      "revision": "19df337059a0d6420869bcd20bdc6fab"
    },
    {
      "url": "images/ship_0.jpg",
      "revision": "58bb2ed6c80b6ca362c18515f07f2aee"
    },
    {
      "url": "images/ship_1.jpg",
      "revision": "94895878d03c00fae4f19583efb53ad2"
    },
    {
      "url": "images/ship_2.jpg",
      "revision": "992f720b3d4d3d21c83a7e71057effc9"
    },
    {
      "url": "images/ship_3.jpg",
      "revision": "06c2a683898186f728c564c9e518d16c"
    },
    {
      "url": "images/ship_4.jpg",
      "revision": "04673dcead6d46a65fdfb7c78984afd8"
    },
    {
      "url": "images/ship_5.jpg",
      "revision": "d08b0352c8971af5f881dcde0542ed97"
    },
    {
      "url": "images/ship_6.jpg",
      "revision": "0ccd8c0c257264e0496eed72d4beb936"
    },
    {
      "url": "images/ship_7.jpg",
      "revision": "af52e423fd57b2205c95bd308d50663e"
    },
    {
      "url": "images/ship_8.jpg",
      "revision": "00a5102cdfac3dbc041fb5b286e6b0e7"
    },
    {
      "url": "images/ship_9.jpg",
      "revision": "4b57c477216cb8c106b0c09ee9376249"
    }
  ]);

  // Force update of newest service worker
  workbox.skipWaiting();
  workbox.clientsClaim();

  // Google Fonts
  workbox.routing.registerRoute(
    new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
    workbox.strategies.staleWhileRevalidate()
  );

  // Material Design & navigation library
  workbox.routing.registerRoute(
    new RegExp('https://unpkg.com/(.*)'),
    workbox.strategies.staleWhileRevalidate()
  );

  // App scripts
  workbox.routing.registerRoute(
    new RegExp('/scripts/(.*)'),
    workbox.strategies.staleWhileRevalidate()
  );

  // Firebase libraries
  workbox.routing.registerRoute(
    new RegExp('http://localhost:5000/__/firebase'),
    workbox.strategies.staleWhileRevalidate()
  );

} else {
  console.log(`Workbox didn't load 😬`);
}

इसके बाद, हमारे अभी बनाए गए सर्विस वर्कर को रजिस्टर करने के लिए, index.html में क्लोज़िंग body टैग के ठीक पहले एक स्क्रिप्ट जोड़ें:

index.html

  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
          .then(reg => {
            console.log('Service worker registered! 😎', reg);
          })
          .catch(err => {
            console.log('😥 Registration failed: ', err);
          });
      });
    }
  </script>

आखिर में, SpaceRace.js में SpaceRace फ़ंक्शन को नीचे दिए गए कोड के साथ बदलें, जो enablePersistence तरीके को कॉल करता है:

स्क्रिप्ट/SpaceRace.js

function SpaceRace() {
  firebase.auth().signInAnonymously().then(() => {
    firebase.firestore().enablePersistence()
      .then(() => {
        this.initTemplates();
        this.initRouter();
      });
  }).catch(err => {
    console.log(err);
  });
}

ब्राउज़र में ऐप्लिकेशन को दो बार रीफ़्रेश करें (एक बार सर्विस वर्कर को इंस्टॉल करने के बाद और एक बार साइट एसेट को कैश करने के लिए). इसके बाद, Ctrl + c के साथ Firebase लोकल सर्वर को बंद करें और अपने कंप्यूटर का वाई-फ़ाई बंद करें. वेब ऐप्लिकेशन को फिर से लोड करें और देखें कि यह ऑफ़लाइन लोड हो रहा है. नए जहाज़ जोड़ने और मौजूदा शिप मिटाने की कोशिश करें. अपने वाई-फ़ाई कनेक्शन को पहले जैसा करें और firebase serve की मदद से सर्वर को रीस्टार्ट करें. इसके बाद, पेज को फिर से लोड करें और देखें कि सभी ऑफ़लाइन बदलाव लागू हो गए हैं!

ध्यान दें: हो सकता है कि एक से ज़्यादा टैब खुले होने पर, ऑफ़लाइन की सुविधा वाला Firestore ठीक से काम न करे. पक्का करें कि ऐप्लिकेशन की जांच एक टैब में हो. ज़्यादा जानकारी के लिए दस्तावेज़ देखें.

इसका मतलब है

सप्लाई करने वाला सर्विस वर्कर, डिवाइस की साइट और #39; की एसेट - जैसे कि एचटीएमएल, सीएसएस, और JavaScript को कैश मेमोरी में सेव करने के लिए, वर्कबॉक्स का इस्तेमाल करता है. इससे हमारे ऐप्लिकेशन तेज़ी से लोड होते हैं! भले ही इन रिसॉर्स को नेटवर्क से फ़ेच न किया जा सका हो.

ऑफ़लाइन संसाधनों के लिए सर्विस वर्कर एपीआई का इस्तेमाल करने के अलावा, हमने उस फ़ंक्शन में enablePersistence तरीके को भी जोड़ा है जो हमारे ऐप्लिकेशन, SpaceRace को शुरू करता है. इससे, हमारा Firestore डेटा इंस्टेंस कैश मेमोरी में सेव की गई डेटा की कॉपी की कैश मेमोरी में सेव हो जाता है. स्थानीय डेटा का इस्तेमाल करने के दो मुख्य फ़ायदे हैं:

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

Firestore में ऑफ़लाइन परफ़ॉर्मेंस के बारे में ज़्यादा जानने के लिए, दस्तावेज़ देखें. इसमें सुरक्षा से जुड़ी अहम बारीकियां भी शामिल हैं.

इस कोडलैब में, आपने Firestore की मदद से मूल लेख को पढ़ने और लिखने का तरीका सीखा. साथ ही, सुरक्षा के नियमों की मदद से, डेटा ऐक्सेस को सुरक्षित करने का तरीका भी सीखा. आपने ऑफ़लाइन सुविधा चालू करने के लिए, Cloud Firestore और सेवा वर्कर को इस्तेमाल करने का तरीका भी सीखा है.

Firestore के बारे में ज़्यादा जानने के लिए, नीचे दिए गए संसाधनों पर जाएं:

PWA ट्रेनिंग कोर्स में सभी कोडलैब देखने के लिए, आपका स्वागत है