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

Firebase JavaScript SDK ব্যবহার করার সময় এই পৃষ্ঠাটি জাভাস্ক্রিপ্ট সমস্যাগুলির জন্য টিপস এবং সমস্যা সমাধানের প্রস্তাব দেয়।

অন্য চ্যালেঞ্জ আছে বা আপনার সমস্যা দেখতে পাচ্ছেন না? আরও প্যান-ফায়ারবেস বা পণ্য-নির্দিষ্ট প্রায়শই জিজ্ঞাসিত প্রশ্নগুলির জন্য প্রধান ফায়ারবেস FAQ পরীক্ষা করে দেখুন৷

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

Node.js কনস্ট্রাক্টের জন্য Admin SDK Firebase JavaScript SDK এর সাথে সামঞ্জস্যপূর্ণ নয়

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

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

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

এটি সম্পূর্ণ Firebase JavaScript SDK API পৃষ্ঠের জন্য সত্য, শুধু Realtime Database নয়। এটি বিপরীত দিকে ব্যবহারের জন্যও সত্য। Node.js-এর জন্য Firebase Admin SDK সাথে Cloud Firestore JS SDK-এর Timestamp টাইপ ব্যবহার করার চেষ্টা করা একই ধরনের ত্রুটি তৈরি করে৷

Firebase JavaScript SDK-এর পরস্পরবিরোধী সংস্করণ ব্যবহার করা এড়িয়ে চলুন

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

Error: Component data-connect has not been registered yet

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

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

ত্রুটি থেকে গেলে, npm ls কমান্ড দিয়ে সমস্যাটিকে আরও ডিবাগ করুন। এটি আপনার প্রকল্পের নির্ভরতাগুলিকে লগ করবে যাতে আপনি firebase মডিউলের বিরোধপূর্ণ সংস্করণগুলি সনাক্ত করতে পারেন৷

উদাহরণ স্বরূপ, নিম্নলিখিত লগ দেখায় package-using-older-firebase Firebase JavaScript SDK-এর একটি বিরোধপূর্ণ সংস্করণ আমদানি করছে:

$ 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 আন্তঃকার্যক্ষমতাকে ভেঙে দেয়। এই দৃশ্যকল্প ডিবাগ করতে আপনার পছন্দের বান্ডলারের ভারবোসিটি বাড়ান। উদাহরণস্বরূপ, আপনি এই উদ্দেশ্যে esbuild বিশ্লেষণ পতাকা ব্যবহার করতে পারেন।

নিশ্চিত করুন যে পরিষেবা কর্মীদের বান্ডিল করা হয়

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

আপনি যদি আপনার পরিষেবা কর্মীর মধ্যে Firebase JavaScript SDK-এর মডুলার সংস্করণ ব্যবহার করেন, তাহলে নিশ্চিত করুন যে আপনি পরিষেবা কর্মী সোর্স ফাইল অন্তর্ভুক্ত করার জন্য আপনার অ্যাপ বান্ডলার কনফিগার করেছেন। নিম্নলিখিত উদাহরণটি প্রকল্পের 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-এর মডুলার সংস্করণ বান্ডলিং সম্পর্কে আরও তথ্যের জন্য 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 SDK মূলত ব্রাউজার পরিবেশে চালানোর উদ্দেশ্যে ছিল। সার্ভার-সাইড রেন্ডারিং (SSR) ফ্রেমওয়ার্কের প্রবর্তন SDK ব্যবহারকে নতুন রানটাইম পরিবেশে ঠেলে দেয়। এই রানটাইমগুলি ওয়েব ব্রাউজারগুলি সরবরাহ করে এমন সরঞ্জাম এবং APIগুলির একটি উপসেট প্রদান করে।

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

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

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

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

Next.js-এ FirebaseServerApp এর ব্যবহার উদাহরণের জন্য FirebaseServerApp-এর সাথে স্ট্রীমলাইন SSR অ্যাপ ডেভেলপমেন্ট দেখুন।