Firebase JavaScript SDK সেরা অনুশীলন

এই পৃষ্ঠায় Firebase JavaScript এসডিকে ব্যবহার করার সময় আপনার সম্মুখীন হতে পারে এমন জাভাস্ক্রিপ্ট সংক্রান্ত সমস্যার জন্য পরামর্শ ও সমাধান দেওয়া হয়েছে।

আপনার কি অন্য কোনো সমস্যা হচ্ছে অথবা আপনার সমস্যাটি খুঁজে পাচ্ছেন না? আরও সার্বিক ফায়ারবেস বা পণ্য-নির্দিষ্ট প্রশ্নোত্তরের জন্য মূল ফায়ারবেস প্রশ্নোত্তর বিভাগটি দেখে নিন।

রিপোর্ট করা সমস্যা এবং তার সমাধান সংক্রান্ত তথ্যের হালনাগাদ তালিকার জন্য আপনি Firebase JavaScript SDK-এর GitHub রিপোজিটরিটিও দেখতে পারেন এবং সেখানে আপনার নিজের সমস্যাগুলোও ফাইল করতে পারেন।

Admin SDK ফর নোড.জেএস-এর গঠনগুলো Firebase JavaScript এসডিকে-এর সাথে সামঞ্জস্যপূর্ণ নয়।

Node.js-এর জন্য Firebase Admin SDK এবং Firebase JavaScript SDK হলো দুটি স্বতন্ত্র বাস্তবায়ন, যাদের মধ্যে কোনো ইন্টারফেস, ক্লাস বা ফাংশন সংজ্ঞা এক নয়। Admin SDK অবজেক্টের ইনস্ট্যান্সগুলো Firebase JavaScript SDK ফাংশনগুলোর সাথে সামঞ্জস্যপূর্ণ নয়।

উদাহরণস্বরূপ, Admin SDK -এর FirebaseApp এর একটি ইনস্ট্যান্সকে Firebase JavaScript SDK-এর getDatabase ফাংশনে পাস করলে নিম্নলিখিত ত্রুটিটি দেখা দেয়:

TypeError: Cannot read properties of undefined (reading 'getProvider')
 at _getProvider
 at getDatabase

এটি শুধু Realtime Database ক্ষেত্রেই নয়, বরং সম্পূর্ণ Firebase JavaScript এসডিকে এপিআই সারফেসের ক্ষেত্রেই প্রযোজ্য। এর বিপরীত ব্যবহারের ক্ষেত্রেও এটি সত্যি। নোড.জেএস-এর জন্য Firebase Admin SDK সাথে Cloud Firestore জেএস এসডিকে-র Timestamp টাইপ ব্যবহার করার চেষ্টা করলে একই ধরনের ত্রুটি দেখা দেয়।

Firebase JavaScript SDK-এর পরস্পরবিরোধী সংস্করণ ব্যবহার করা থেকে বিরত থাকুন।

একটি প্রোজেক্টে ডিপেন্ডেন্সি হিসেবে কনফিগার করা Firebase JavaScript SDK-এর একাধিক পরস্পরবিরোধী সংস্করণ থাকলে, SDK প্যাকেজগুলোর মধ্যে SDK ইনস্ট্যান্স পাস করার সময় রানটাইম এরর দেখা দেয়। উদাহরণস্বরূপ, FirebaseApp এর একটি বেমানান সংস্করণের সাথে Data Connect লাইব্রেরি ব্যবহার করলে নিম্নলিখিত এররটি ঘটে:

Error: Component data-connect has not been registered yet

এই সমস্যাটি সাধারণত ফায়ারবেস এসডিকে প্যাকেজগুলোর মধ্যে সবগুলোর নয়, বরং একটির ডিপেন্ডেন্সি আপডেটের কারণে হয়ে থাকে। এই পরিস্থিতি প্রায়শই তখন ঘটে যখন কোনো স্বয়ংক্রিয় ডিপেন্ডেন্সি আপডেট টুল প্রজেক্টের yarn.lock বা package-lock.json ফাইলের মধ্যে ফায়ারবেস এসডিকে ডিপেন্ডেন্সিগুলোর একটি উপসেট পরিবর্তন করে। যেহেতু অনেকগুলো Firebase JavaScript এসডিকে একে অপরের সাথে ইন্টারঅপারেট করে, তাই এসডিকে-গুলোর বিভিন্ন সংস্করণ ব্যবহারের ফলে রানটাইম ইনকম্প্যাটিবিলিটি দেখা দেয়।

এই সমস্যাটি সমাধান করতে, আপনার প্রজেক্ট থেকে node_modules /` ডিরেক্টরি এবং ` yarn.lock ( yarn এর জন্য) অথবা package-lock.json ( npm এর জন্য) ফাইল দুটি ডিলিট করে দিন এবং আপনার ডিপেন্ডেন্সিগুলো পুনরায় ইনস্টল করুন।

যদি ত্রুটি থেকে যায়, তাহলে npm ls কমান্ড ব্যবহার করে সমস্যাটি আরও ডিবাগ করুন। এটি আপনার প্রোজেক্টের ডিপেন্ডেন্সিগুলো লগ করবে, যার ফলে আপনি firebase মডিউলের সাংঘর্ষিক সংস্করণগুলো শনাক্ত করতে পারবেন।

উদাহরণস্বরূপ, নিম্নলিখিত লগটি দেখাচ্ছে যে package-using-older-firebase Firebase JavaScript এসডিকে-র একটি সাংঘর্ষিক সংস্করণ ইম্পোর্ট করছে:

$ npm ls firebase --all
your-app@0.0.0
├── firebase@11.2.0
├─┬ @angular/fire@19.0.0
│ ├── firebase@11.2.0 deduped
│ └─┬ rxfire@6.1.0
│   └── firebase@10.14.1 deduped
└─┬ package-using-older-firebase@0.1.0
  └─── firebase@10.14.1

আপনার অ্যাপে CJS এবং ESM-এর require ও import স্টেটমেন্ট একসাথে ব্যবহার করার কারণেও ত্রুটি দেখা দিতে পারে। এর ফলে Firebase JavaScript SDK-এর একাধিক ইনস্ট্যান্স তৈরি হয়, যার প্রতিটি অন্যটি থেকে আলাদা, যা Firebase JavaScript SDK-এর আন্তঃকার্যক্ষমতা নষ্ট করে দেয়। এই পরিস্থিতি ডিবাগ করার জন্য আপনার পছন্দের বান্ডলারের ভার্বোসিটি (verbosity) বাড়িয়ে দিন। উদাহরণস্বরূপ, এই উদ্দেশ্যে আপনি esbuild analyze ফ্ল্যাগটি ব্যবহার করতে পারেন।

পরিষেবা কর্মীদের একত্রিত করা নিশ্চিত করুন।

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

আপনি যদি আপনার সার্ভিস ওয়ার্কারের মধ্যে Firebase JavaScript এসডিকে-র মডিউলার সংস্করণ ব্যবহার করেন, তাহলে সার্ভিস ওয়ার্কার সোর্স ফাইলটি অন্তর্ভুক্ত করার জন্য আপনার অ্যাপ বান্ডলারটি কনফিগার করা নিশ্চিত করুন। নিম্নলিখিত উদাহরণটি প্রজেক্টের src ডিরেক্টরিতে firebase-sw.js সার্ভিস ওয়ার্কারটি বান্ডল করতে npx ব্যবহার করে:

npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js

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

আপনার অ্যাপে Firebase JavaScript SDK-এর মডিউলার সংস্করণ বান্ডল করার বিষয়ে আরও তথ্যের জন্য, “Using module bundlers with Firebase” দেখুন।

বিকল্পভাবে, আপনি CDN থেকে compat Firebase JavaScript SDK বান্ডেলগুলো ইম্পোর্ট করে বান্ডেল করার প্রয়োজনীয়তা দূর করতে পারেন:

// Give the service worker access to Firebase Messaging.
// Replace 10.13.2 with the version of the Firebase JS SDK you're using
// in your app.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  ...
});

// Retrieve an instance of Firebase Messaging so that it can handle
// background messages.
const messaging = firebase.messaging();

সার্ভার সাইড রেন্ডারিং নিয়ে কাজ করার সময় FirebaseServerApp ব্যবহার করুন

Firebase JavaScript এসডিকে মূলত ব্রাউজার পরিবেশে চালানোর জন্য তৈরি করা হয়েছিল। সার্ভার-সাইড রেন্ডারিং (এসএসআর) ফ্রেমওয়ার্কের আবির্ভাব এসডিকে-র ব্যবহারকে নতুন রানটাইম পরিবেশে নিয়ে গেছে। এই রানটাইমগুলো ওয়েব ব্রাউজার দ্বারা প্রদত্ত টুলস এবং এপিআই-এর একটি উপসেট সরবরাহ করে।

উদাহরণস্বরূপ, কিছু Firebase SDK-এর জন্য IndexedDB-এর মাধ্যমে ডেটা ক্যাশিং প্রয়োজন হয়, যা একটি শুধুমাত্র ব্রাউজার-ভিত্তিক API। Firebase Auth-এর নির্দিষ্ট কিছু সাইন-ইন ফ্লো-তে ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রয়োজন হতে পারে, যা হেডলেস সার্ভার পরিবেশে অসম্ভব। App Check টোকেন তৈরি করার আগে ব্যবহারকারীকে যাচাই করার জন্য App App Check ব্রাউজার হিউরিস্টিকসের উপর নির্ভর করে।

এই নতুন পরিবেশে SDK নিয়ে কাজ করার সময়, FirebaseServerApp ব্যবহার করুন, যা FirebaseApp এর একটি নতুন সংস্করণ এবং ক্লায়েন্ট সাইড থেকে সংগৃহীত ডেটা দিয়ে SSR Firebase ইনস্ট্যান্সটি প্রি-লোড করার সুবিধা প্রদান করে।

FirebaseServerApp দুটি প্যারামিটার সমর্থন করে:

• অথোরাইজেশন আইডি টোকেন : এটি প্রদান করা হলে, Firebase Auth স্বয়ংক্রিয়ভাবে পূর্বে প্রমাণীকৃত একজন ব্যবহারকারীকে সাইন ইন করে, যা সম্ভাব্যভাবে CSR / SSR বিভাজন অতিক্রম করে একটি সেশন তৈরি করতে পারে।
• অ্যাপ চেক টোকেন : যদি এটি প্রদান করা হয়, তবে App Check ক্লায়েন্টের কোনো ইনস্ট্যান্স ইনিশিয়ালাইজ করার প্রয়োজন ছাড়াই অন্যান্য ফায়ারবেস SDK-গুলো এই টোকেনটি ব্যবহার করে (যা ব্রাউজার পরিবেশের বাইরে সমর্থিত নয়)। এটি সেইসব প্রোডাক্টের জন্য SSR সাপোর্ট আনব্লক করে, যেগুলোতে App Check সক্রিয় করা আছে, যেমন Cloud Functions , Data Connect , Cloud Firestore , Realtime Database এবং ভার্টেক্স এআই।

Next.js-এ FirebaseServerApp এর উদাহরণমূলক ব্যবহারের জন্য “Streamline SSR app development with FirebaseServerApp” দেখুন।