Cloud Firestore

এই কোডল্যাবটি ডেভেলপিং প্রগ্রেসিভ ওয়েব অ্যাপস প্রশিক্ষণ কোর্সের অংশ, যা Google বিকাশকারী প্রশিক্ষণ দল দ্বারা তৈরি করা হয়েছে। আপনি যদি ক্রমানুসারে কোডল্যাবগুলির মাধ্যমে কাজ করেন তবে আপনি এই কোর্সের সর্বাধিক মূল্য পাবেন।

কোর্স সম্পর্কে সম্পূর্ণ বিশদ বিবরণের জন্য, ডেভেলপিং প্রগ্রেসিভ ওয়েব অ্যাপস ওভারভিউ দেখুন ।

দ্রষ্টব্য: এই কোর্সটি "কোডল্যাব" এবং "ল্যাব" শব্দগুলিকে বিনিময়যোগ্যভাবে ব্যবহার করে৷

আপনি কি শিখবেন

• ফায়ারবেসে একটি ক্লাউড ফায়ারস্টোর প্রকল্প কীভাবে সেট আপ করবেন
• ফায়ারস্টোরের সাথে বেসিক পড়া এবং লেখা
• (ঐচ্ছিক) ক্লাউড ফায়ারস্টোর অফলাইনে কীভাবে ব্যবহার করবেন

আপনি ইতিমধ্যে কি জানা উচিত

• বেসিক HTML, CSS, এবং JavaScript
• ES2015 প্রতিশ্রুতি
• কমান্ড লাইন থেকে কিভাবে কমান্ড চালাতে হয়
• (একটি ঐচ্ছিক বিভাগের জন্য) পরিষেবা কর্মীদের এবং ওয়ার্কবক্সের সাথে পরিচিতি

আপনার যা দরকার

• টার্মিনাল/শেল অ্যাক্সেস সহ কম্পিউটার
• ইন্টারনেটের সাথে সংযোগ
• একজন টেক্সট এডিটর
• নোড এবং npm

github থেকে pwa-training-labs সংগ্রহস্থল ডাউনলোড বা ক্লোন করুন এবং প্রয়োজনে Node.js-এর LTS সংস্করণ ইনস্টল করুন।

আপনার পছন্দের টেক্সট এডিটরে firestore-lab/project/ ফোল্ডারটি খুলুন। project/ ফোল্ডারটি হল যেখানে আপনি ল্যাব তৈরি করবেন।

একটি নতুন ক্লাউড ফায়ারস্টোর প্রকল্প তৈরি করুন:

1. ফায়ারবেস কনসোল খুলুন এবং একটি নতুন প্রকল্প তৈরি করুন।
2. ডেটাবেস বিভাগে, ফায়ারস্টোর বিটা চেষ্টা করুন ক্লিক করুন।
3. " পরীক্ষা মোডে শুরু করুন" বিকল্পটি চেক করুন
4. সক্রিয় ক্লিক করুন

দ্রষ্টব্য: আপনি একই প্রকল্পে ক্লাউড ফায়ারস্টোর এবং ক্লাউড ডেটাস্টোর উভয়ই ব্যবহার করতে পারবেন না, যা অ্যাপ ইঞ্জিন ব্যবহার করে অ্যাপগুলিকে প্রভাবিত করতে পারে৷ যদি আপনার প্রোজেক্ট ইতিমধ্যেই ক্লাউড ডেটাস্টোর ব্যবহার করে, তাহলে অন্য কোনও প্রোজেক্টের সাথে ক্লাউড ফায়ারস্টোর ব্যবহার করার চেষ্টা করুন।

তারপর ক্লোজিং </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 CLI-এর একটি ক্লাউড ফায়ারস্টোর সক্ষম সংস্করণ পেতে হবে।

একটি কমান্ড লাইন উইন্ডো খুলুন এবং project/ ফোল্ডারে ডিরেক্টরি পরিবর্তন করুন।

তারপর, নিম্নলিখিত কমান্ড চালান:

npm install -g firebase-tools

সরঞ্জামগুলি ইনস্টল করা শেষ হওয়ার পরে, Firebase CLI কে আপনার Firebase প্রকল্পের সাথে ইন্টারঅ্যাক্ট করার অনুমতি দিতে লগ ইন করুন৷

firebase login

তারপরে কনফিগারেশন ফাইলগুলি তৈরি করতে এবং ফায়ারবেস অ্যাপ শুরু করতে project/ ডিরেক্টরিতে নিম্নলিখিত কমান্ডটি চালান:

firebase init

উপরের কমান্ডটি চালানোর পরে, টার্মিনালে একটি প্রম্পট উপস্থিত হওয়া উচিত। নীচে বর্ণিত প্রম্পটগুলি অনুসরণ করুন:

1. ফায়ারস্টোর নির্বাচন করুন (কার্সারটিকে ফায়ারস্টোর বিকল্পে সরিয়ে এবং স্পেস টিপে) এবং return টিপুন
2. আমরা এইমাত্র তৈরি করা Firebase প্রকল্পটি নির্বাচন করুন এবং return টিপুন
3. Firestore নিয়মের জন্য ডিফল্ট ফাইল ব্যবহার করতে return টিপুন
4. Firestore ইনডেক্সের জন্য ডিফল্ট ফাইল ব্যবহার করতে return টিপুন

এখন যদি আমরা আমাদের ওয়েব অ্যাপটি চালায় তাহলে এটি স্বয়ংক্রিয়ভাবে জানতে পারবে যে ফায়ারবেস (এবং ফায়ারস্টোর) কোন প্রকল্প ব্যবহার করতে হবে, তবে আমাদের অ্যাপটি পরিবেশন করার আগে আমাদের আরও কয়েকটি ধাপ বাকি আছে।

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 কনসোলে বিকাশ > প্রমাণীকরণ > সাইন-ইন পদ্ধতিতে যান।

একবার এই পৃষ্ঠায়, Anonymous এ ক্লিক করুন, তারপর Enable এ ক্লিক করুন এবং Save এ ক্লিক করুন:

আমরা আসলে আমাদের অ্যাপে কাজ শুরু করতে প্রস্তুত! firebase কমান্ড দিয়ে স্থানীয়ভাবে এটি চালানো যাক:

firebase serve

এখন আপনার ব্রাউজার খুলুন এবং দেখুন localhost:5000 । আপনি স্পেস রেসের আপনার অনুলিপি দেখতে পাবেন! যা আপনার ফায়ারবেস প্রকল্পের সাথে সংযুক্ত করা হয়েছে।

অ্যাপটি স্বয়ংক্রিয়ভাবে আমাদের প্রকল্পের সাথে সংযুক্ত হয়েছে এবং একটি বেনামী ব্যবহারকারী হিসাবে নীরবে আমাদের লগ ইন করেছে।

এই বিভাগে আমরা Firestore-এ কিছু ডেটা লিখব যাতে আমরা অ্যাপের UI পূরণ করতে পারি। এটি Firebase কনসোলের মাধ্যমে ম্যানুয়ালি করা যেতে পারে, কিন্তু আমরা একটি মৌলিক Firestore লেখা প্রদর্শন করতে অ্যাপেই এটি করব।

আমাদের অ্যাপের প্রাথমিক মডেল অবজেক্ট হল একটি স্পেসশিপ। ফায়ারস্টোর ডেটা নথি দ্বারা উপস্থাপন করা হয়, যা সংগ্রহ এবং উপ-সংগ্রহের মধ্যে সংগঠিত হয়। এই অ্যাপে, আমরা প্রতিটি জাহাজকে "জাহাজ" নামক শীর্ষ-স্তরের সংগ্রহে একটি নথি হিসাবে সংরক্ষণ করব। আপনি ডকুমেন্টেশনে Firestore ডেটা মডেল সম্পর্কে আরও জানতে পারবেন।

আমাদের অ্যাপের ক্লাউড ফায়ারস্টোর ডাটাবেসে বর্তমানে কোনো ডেটা নেই। আপনার প্রোজেক্টের জন্য ফায়ারবেস কনসোলে ডেভেলপ > ডেটাবেসে যান এবং পর্যবেক্ষণ করুন যে ডাটাবেসটি খালি রয়েছে।

আমাদের অ্যাপে ডেটা যোগ করার ফাংশনটি বাস্তবায়ন করা যাক।

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 সংগ্রহের একটি রেফারেন্স পায় এবং তারপরে data add করে। নথির data একটি প্লেইন জাভাস্ক্রিপ্ট অবজেক্ট থেকে আসে।

নিরাপত্তা নিয়ম

আমরা প্রায় সেখানেই আছি - ক্লাউড ফায়ারস্টোরে নথি লিখতে পারার আগে আমাদের ফায়ারস্টোরের নিরাপত্তা নিয়মগুলি কনফিগার করতে হবে। এই নিয়মগুলি বর্ণনা করে যে আমাদের ডাটাবেসের কোন অংশগুলি পাঠযোগ্য এবং লেখার যোগ্য হওয়া উচিত এবং কোন ব্যবহারকারীদের দ্বারা। আপাতত, আমরা সমস্ত প্রমাণীকৃত ব্যবহারকারীদের সমগ্র ডাটাবেস পড়তে এবং লিখতে অনুমতি দেব। এটি একটি প্রোডাকশন অ্যাপের জন্য একটু বেশিই অনুমোদনযোগ্য, কিন্তু ডেভেলপমেন্ট প্রক্রিয়া চলাকালীন আমরা যথেষ্ট শিথিল কিছু চাই তাই পরীক্ষা করার সময় আমরা ক্রমাগত প্রমাণীকরণের সমস্যায় পড়ব না।

firestore.rules নামক ফাইলটি খুলুন এবং নিম্নলিখিত কোড দিয়ে পুরো ফাইলটি প্রতিস্থাপন করুন:

firestore.rules

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 সংগ্রহে নতুন এন্ট্রি দেখতে পাবেন (আপনাকে পৃষ্ঠাটি রিফ্রেশ করতে হতে পারে):

অভিনন্দন, আপনি এইমাত্র একটি ওয়েব অ্যাপ থেকে ক্লাউড ফায়ারস্টোরে ডেটা লিখেছেন! পরবর্তী বিভাগে আপনি শিখবেন কীভাবে ফায়ারস্টোর থেকে ডেটা পুনরুদ্ধার করতে হয় এবং এটি অ্যাপে প্রদর্শন করতে হয়।

এই বিভাগে আপনি শিখবেন কিভাবে ফায়ারস্টোর থেকে ডেটা পুনরুদ্ধার করতে হয় এবং অ্যাপে এটি প্রদর্শন করতে হয়। দুটি মূল ধাপ হল একটি ক্যোয়ারী তৈরি করা এবং একটি স্ন্যাপশট লিসেনার যোগ করা। এই শ্রোতাকে কোয়েরির সাথে মেলে এমন সমস্ত বিদ্যমান ডেটা সম্পর্কে অবহিত করা হবে এবং রিয়েল টাইমে আপডেটগুলি পাবেন৷

জাহাজের তালিকা পরিবেশন করা হবে যে কোয়েরি নির্মাণ করা যাক. নিম্নলিখিত কোড দিয়ে SpaceRace.prototype.getAllShips() পদ্ধতি প্রতিস্থাপন করুন:

SpaceRace.Data.js

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

এই স্নিপেটে আমরা একটি প্রশ্ন তৈরি করি যা "জাহাজ" নামে শীর্ষ-স্তরের সংগ্রহের 50টি জাহাজ পর্যন্ত পুনরুদ্ধার করবে। একবার আমরা এই প্রশ্নটি ঘোষণা করার পরে, আমরা এটিকে 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 হলে, সংশ্লিষ্ট শিপ কার্ডটি DOM থেকে সরানো হয়।

এখন যেহেতু আমরা উভয় ডেটা পুনরুদ্ধার পদ্ধতি প্রয়োগ করেছি, অ্যাপটি রিফ্রেশ করুন এবং যাচাই করুন যে ক্লাউড ফায়ারস্টোরে আমরা যে জাহাজগুলি যোগ করেছি (এবং Firestore কনসোলে দেখুন) এখন অ্যাপটিতে দৃশ্যমান৷ আপনি যদি এই বিভাগটি সফলভাবে সম্পন্ন করেন, তাহলে আপনার অ্যাপ এখন ক্লাউড ফায়ারস্টোরের সাথে ডেটা পড়ছে এবং লিখছে!

অ্যাপের ফর্মটি পূরণ করে এবং "যোগ করুন" এ ক্লিক করে আপনার নিজস্ব কাস্টম জাহাজ যোগ করার চেষ্টা করুন। আপনার জাহাজের তালিকা পরিবর্তন হওয়ার সাথে সাথে এই শ্রোতা স্বয়ংক্রিয়ভাবে আপডেট হতে থাকবে। এখন Firebase কনসোলে গিয়ে হাত দিয়ে একটি জাহাজ যোগ করার চেষ্টা করুন - আপনি দেখতে পাবেন এটি আপনার সাইটে অবিলম্বে প্রদর্শিত হবে!

দ্রষ্টব্য: Query.get() পদ্ধতি ব্যবহার করে রিয়েল টাইম আপডেট শোনার পরিবর্তে Firestore থেকে একবার ডকুমেন্ট আনাও সম্ভব।

সংগ্রহ থেকে নির্দিষ্ট জাহাজ মুছে ফেলার জন্য একটি ফাংশন লিখুন.

SpaceRace.Data.js-এ 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);
    });
};

একবার আপনি এটি প্রয়োগ করার পরে, আপনি জাহাজের কার্ডের উপরের ডানদিকে কোণায় "X" এ ক্লিক করে নির্দিষ্ট জাহাজগুলি মুছে ফেলতে সক্ষম হবেন৷ ফাইলটি সংরক্ষণ করুন, অ্যাপটি রিফ্রেশ করুন এবং একটি জাহাজ মুছে ফেলার চেষ্টা করুন৷

ক্লাউড ফায়ারস্টোর অফলাইন ডেটা অধ্যবসায়কেও সমর্থন করে, যা আপনার অ্যাপের ডেটার একটি স্থানীয় অনুলিপি ক্যাশে করে যা ব্যবহারকারীরা অফলাইনে থাকাকালীন সংশোধন করা যেতে পারে এবং সংযোগ পুনরুদ্ধার হয়ে গেলে সিঙ্ক করা হয়। পরিষেবা কর্মীদের সাথে একত্রিত হয়ে, আমরা অফলাইনে কাজ করার জন্য আমাদের অ্যাপ আপডেট করতে পারি।

নিম্নলিখিত কোড সহ 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 পদ্ধতিকে কল করে:

scripts/SpaceRace.js

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

ব্রাউজারে অ্যাপটি দুবার রিফ্রেশ করুন (একবার পরিষেবা কর্মী ইনস্টল করতে এবং একবার সাইট সম্পদ ক্যাশে করতে)। তারপর Ctrl + c দিয়ে ফায়ারবেস লোকাল সার্ভারটিকে ডি-অ্যাক্টিভ করুন এবং আপনার কম্পিউটারের ওয়াইফাই বন্ধ করুন। ওয়েব অ্যাপটি পুনরায় লোড করুন এবং দেখুন যে এটি অফলাইনে লোড হচ্ছে। নতুন জাহাজ যোগ করার এবং বিদ্যমান জাহাজ মুছে ফেলার চেষ্টা করুন। আপনার ওয়াইফাই সংযোগ পুনরুদ্ধার করুন এবং firebase serve সার্ভার দিয়ে সার্ভারটি পুনরায় চালু করুন। তারপর পৃষ্ঠাটি পুনরায় লোড করুন এবং দেখুন যে সমস্ত অফলাইন পরিবর্তন টিকে আছে!

দ্রষ্টব্য: একাধিক ট্যাব খোলা থাকলে অফলাইন-সক্ষম Firestore আশানুরূপ আচরণ নাও করতে পারে। একটি একক ট্যাবে অ্যাপটি পরীক্ষা করতে ভুলবেন না। আরো জন্য ডকুমেন্টেশন দেখুন.

ব্যাখ্যা

সরবরাহকৃত পরিষেবা কর্মী ডিভাইসে স্থানীয়ভাবে সাইটের সম্পদ - যেমন HTML, CSS, এবং JavaScript - ক্যাশে করার জন্য Workbox ব্যবহার করে৷ এই সংস্থানগুলি নেটওয়ার্ক থেকে আনা না গেলেও এটি আমাদের অ্যাপকে (খুব দ্রুত!) লোড করার অনুমতি দেয়৷

অফলাইন সংস্থানগুলির জন্য পরিষেবা কর্মী API ব্যবহার করার পাশাপাশি, আমরা ফাংশনে enablePersistence পদ্ধতি যুক্ত করেছি যা আমাদের অ্যাপ, SpaceRace আরম্ভ করে। এটি স্থানীয়ভাবে আমাদের Firestore ডেটার একটি অনুলিপি ক্যাশে করার জন্য আমাদের ক্লাউড ফায়ারস্টোরের উদাহরণ কনফিগার করে। স্থানীয় ডেটা ব্যবহার করার দুটি প্রধান সুবিধা রয়েছে:

1. আমাদের অ্যাপের ডেটা খুব দ্রুত লোড হয়, কারণ এটির জন্য নেটওয়ার্কের জন্য অপেক্ষা করতে হয় না।
2. অ্যাপটি অফলাইনে থাকা অবস্থায়ও ডেটা অ্যাক্সেস এবং পরিবর্তন করতে পারে এবং সংযোগ ফিরে আসার পরে পরিবর্তনগুলি সিঙ্ক করতে পারে৷

নিরাপত্তা সম্পর্কে গুরুত্বপূর্ণ সূক্ষ্মতা সহ Firestore-এ অফলাইন স্থিরতা সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

এই কোডল্যাবে, আপনি শিখেছেন কিভাবে ফায়ারস্টোরের সাথে প্রাথমিক পঠন এবং লেখাগুলি সম্পাদন করতে হয়, সেইসাথে কীভাবে সুরক্ষা নিয়মের সাথে ডেটা অ্যাক্সেস সুরক্ষিত করতে হয়। আপনি অফলাইন কার্যকারিতা সক্ষম করতে ক্লাউড ফায়ারস্টোর এবং পরিষেবা কর্মীদের কীভাবে ব্যবহার করবেন তাও শিখেছেন।

Firestore সম্পর্কে আরও জানতে, নিম্নলিখিত সংস্থানগুলিতে যান:

• ক্লাউড ফায়ারস্টোরের পরিচিতি
• একটি ডেটা স্ট্রাকচার নির্বাচন করা
• ক্লাউড ফায়ারস্টোর ওয়েব কোডল্যাব

PWA প্রশিক্ষণ কোর্সের সমস্ত কোডল্যাব দেখতে, কোর্সের জন্য স্বাগতম কোডল্যাব দেখুন/