अगर आपके ऐप्लिकेशन में, नेमस्पेस वाले Firebase वेब एपीआई का इस्तेमाल किया जा रहा है, तो आपको मॉड्यूलर एपीआई पर माइग्रेट करना चाहिए. इसके लिए, इस गाइड में दिए गए निर्देशों का पालन करें. नेमस्पेस वाले एपीआई, compat लाइब्रेरी के वर्शन 8 या उससे पहले के वर्शन में भी उपलब्ध थे.
इस गाइड में यह मानकर चला जाता है कि आपको नेमस्पेस वाले एपीआई के बारे में जानकारी है. साथ ही, यह भी मानकर चला जाता है कि अपग्रेड करने और मॉड्यूलर ऐप्लिकेशन डेवलपमेंट को जारी रखने के लिए, webpack या Rollup जैसे मॉड्यूल बंडलर का इस्तेमाल किया जाएगा.
हमारा सुझाव है कि आप अपने डेवलपमेंट एनवायरमेंट में मॉड्यूल बंडलर का इस्तेमाल करें. अगर आप इसका इस्तेमाल नहीं करते हैं, तो आपको मॉड्यूलर एपीआई के मुख्य फ़ायदों का लाभ नहीं मिल पाएगा. जैसे, ऐप्लिकेशन का साइज़ कम होना. एसडीके टूल इंस्टॉल करने के लिए, आपको npm या yarn की ज़रूरत होगी.
इस गाइड में अपग्रेड करने के लिए दिए गए चरण, एक काल्पनिक वेब ऐप्लिकेशन पर आधारित होंगे. यह ऐप्लिकेशन, Authentication और Cloud Firestore SDK टूल का इस्तेमाल करता है. उदाहरणों की मदद से, Firebase वेब SDK टूल के सभी काम करने वाले वर्शन को अपग्रेड करने के लिए ज़रूरी कॉन्सेप्ट और व्यावहारिक चरणों के बारे में जाना जा सकता है.
नेमस्पेस वाली (compat) लाइब्रेरी के बारे में जानकारी
Firebase वेब SDK टूल के लिए, दो तरह की लाइब्रेरी उपलब्ध हैं:
- मॉड्यूलर - यह एक नया एपीआई है. इसे ट्री-शेकिंग (इस्तेमाल न किए गए कोड को हटाने) की सुविधा देने के लिए डिज़ाइन किया गया है. इससे आपके वेब ऐप्लिकेशन का साइज़ कम किया जा सकता है और उसकी स्पीड बढ़ाई जा सकती है.
- नेमस्पेस वाली (
compat) - यह एक जाना-पहचाना एपीआई है, जो एसडीके के पुराने वर्शन के साथ पूरी तरह से काम करता है. इससे, Firebase के पूरे कोड को एक साथ बदले बिना अपग्रेड किया जा सकता है. नेमस्पेस वाली लाइब्रेरी के मुकाबले, compat लाइब्रेरी के साइज़ या परफ़ॉर्मेंस में कोई खास फ़ायदा नहीं मिलता.
इस गाइड में यह मानकर चला जाता है कि अपग्रेड करने के लिए, compat लाइब्रेरी का इस्तेमाल किया जाएगा. इन लाइब्रेरी की मदद से, नेमस्पेस वाले कोड के साथ-साथ, मॉड्यूलर एपीआई के लिए रीफ़ैक्टर किए गए कोड का इस्तेमाल जारी रखा जा सकता है. इसका मतलब है कि अपग्रेड की प्रोसेस के दौरान, अपने ऐप्लिकेशन को आसानी से कंपाइल और डीबग किया जा सकता है.
जिन ऐप्लिकेशन में Firebase वेब SDK टूल का इस्तेमाल बहुत कम किया जाता है उनके लिए, compat लाइब्रेरी का इस्तेमाल किए बिना, नेमस्पेस वाले पुराने कोड को रीफ़ैक्टर करना सही हो सकता है. उदाहरण के लिए, ऐसा ऐप्लिकेशन जो Authentication API को सिर्फ़ एक आसान कॉल करता है. अगर आपको ऐसा कोई ऐप्लिकेशन अपग्रेड करना है, तो compat लाइब्रेरी का इस्तेमाल किए बिना, "मॉड्यूलर एपीआई" के लिए इस गाइड में दिए गए निर्देशों का पालन किया जा सकता है.
अपग्रेड की प्रोसेस के बारे में जानकारी
अपग्रेड की प्रोसेस का हर चरण, इस तरह से तय किया जाता है कि आपके ऐप्लिकेशन के सोर्स में बदलाव करने के बाद, उसे कंपाइल और रन किया जा सके. साथ ही, इसमें कोई गड़बड़ी न हो. किसी ऐप्लिकेशन को अपग्रेड करने के लिए, आपको यह करना होगा:
- अपने ऐप्लिकेशन में मॉड्यूलर लाइब्रेरी और compat लाइब्रेरी जोड़ें.
- अपने कोड में, इंपोर्ट स्टेटमेंट को compat पर अपडेट करें.
- किसी एक प्रॉडक्ट (उदाहरण के लिए, Authentication) के कोड को मॉड्यूलर स्टाइल में रीफ़ैक्टर करें.
- ज़रूरी नहीं: इस चरण पर, Authentication के लिए compat लाइब्रेरी और compat कोड हटाएं, ताकि आगे बढ़ने से पहले, Authentication के लिए ऐप्लिकेशन के साइज़ में होने वाले फ़ायदे को समझा जा सके.Authentication
- हर प्रॉडक्ट (उदाहरण के लिए, Cloud Firestore, FCM, वगैरह) के फ़ंक्शन को मॉड्यूलर स्टाइल में रीफ़ैक्टर करें. साथ ही, सभी क्षेत्रों के पूरा होने तक, कंपाइल और टेस्ट करें.
- इनीशियलाइज़ेशन कोड को मॉड्यूलर स्टाइल में अपडेट करें.
- अपने ऐप्लिकेशन से, बाकी बचे सभी compat स्टेटमेंट और compat कोड हटाएं.
एसडीके का नया वर्शन पाना
शुरू करने के लिए, npm का इस्तेमाल करके मॉड्यूलर लाइब्रेरी और compat लाइब्रेरी पाएं:
npm i firebase@12.15.0 # OR yarn add firebase@12.15.0
इंपोर्ट को compat पर अपडेट करना
डिपेंडेंसी अपडेट करने के बाद, अपने कोड को काम करता रखने के लिए, हर इंपोर्ट के "compat" वर्शन का इस्तेमाल करने के लिए, अपने इंपोर्ट स्टेटमेंट में बदलाव करें. उदाहरण के लिए:
पहले: वर्शन 8 या उससे पहले का वर्शन
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
बाद में: compat
// compat packages are API compatible with namespaced code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
मॉड्यूलर स्टाइल में रीफ़ैक्टर करना
नेमस्पेस वाले एपीआई, डॉट-चेन्ड नेमस्पेस और सर्विस पैटर्न पर आधारित होते हैं. वहीं, मॉड्यूलर तरीके का मतलब है कि आपका कोड मुख्य रूप से फ़ंक्शन के हिसाब से व्यवस्थित होगा. मॉड्यूलर एपीआई में, firebase/app पैकेज और अन्य पैकेज, ऐसा व्यापक एक्सपोर्ट नहीं देते जिसमें पैकेज के सभी तरीके शामिल हों. इसके बजाय, पैकेज अलग-अलग फ़ंक्शन एक्सपोर्ट करते हैं.
मॉड्यूलर एपीआई में, सेवाओं को पहले आर्ग्युमेंट के तौर पर पास किया जाता है. इसके बाद, फ़ंक्शन बाकी काम करने के लिए, सेवा की जानकारी का इस्तेमाल करता है. आइए, दो उदाहरणों की मदद से समझते हैं कि यह कैसे काम करता है. इन उदाहरणों में, Authentication और Cloud Firestore API को कॉल करने के तरीके को रीफ़ैक्टर किया गया है.
पहला उदाहरण: Authentication फ़ंक्शन को रीफ़ैक्टर करना
पहले: compat
compat कोड, नेमस्पेस वाले कोड जैसा ही होता है, लेकिन इंपोर्ट बदल गए हैं.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
const auth = firebase.auth();
auth.onAuthStateChanged(user => {
// Check for user status
});
बाद में: मॉड्यूलर
getAuth फ़ंक्शन, firebaseApp को पहले पैरामीटर के तौर पर लेता है.
onAuthStateChanged
फ़ंक्शन को auth इंस्टेंस से चेन नहीं किया जाता, जैसा कि नेमस्पेस वाले एपीआई में किया जाता है.
इसके बजाय, यह एक फ़्री
फ़ंक्शन है, जो auth को पहले पैरामीटर के तौर पर लेता है.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Auth के getRedirectResult तरीके को हैंडल करने के तरीके को अपडेट करना
मॉड्यूलर एपीआई में, getRedirectResult में एक ऐसा बदलाव किया गया है जिससे पुराने वर्शन के साथ काम करने की सुविधा खत्म हो गई है. जब कोई रीडायरेक्ट ऑपरेशन कॉल नहीं किया जाता है, तो मॉड्यूलर एपीआई null दिखाता है. वहीं, नेमस्पेस वाला एपीआई, UserCredential दिखाता था जिसमें null उपयोगकर्ता होता था.
पहले: compat
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
बाद में: मॉड्यूलर
const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
return null;
}
return result;
दूसरा उदाहरण: Cloud Firestore फ़ंक्शन को रीफ़ैक्टर करना
पहले: compat
import "firebase/compat/firestore"
const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
बाद में: मॉड्यूलर
getFirestore फ़ंक्शन, firebaseApp को पहले पैरामीटर के तौर पर लेता है. इसे पिछले उदाहरण में initializeApp से दिखाया गया था. ध्यान दें कि क्वेरी बनाने का कोड, मॉड्यूलर एपीआई में बहुत अलग है. इसमें कोई चेनिंग नहीं है. साथ ही, query या where जैसे तरीके अब फ़्री फ़ंक्शन के तौर पर दिखाए जाते हैं.
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
const db = getFirestore(firebaseApp);
const q = query(collection(db, "cities"), where("capital", "==", true));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
Firestore के DocumentSnapshot.exists के रेफ़रंस अपडेट करना
मॉड्यूलर एपीआई में, एक ऐसा बदलाव किया गया है जिससे पुराने वर्शन के साथ काम करने की सुविधा खत्म हो गई है. इसमें, firestore.DocumentSnapshot.exists प्रॉपर्टी को तरीके में बदल दिया गया है. यह सुविधा, पहले की तरह ही काम करती है. इससे यह टेस्ट किया जाता है कि कोई दस्तावेज़ मौजूद है या नहीं. हालांकि, आपको अपने कोड को नए तरीके का इस्तेमाल करने के लिए रीफ़ैक्टर करना होगा. जैसे:
पहले:compat
if (snapshot.exists) {
console.log("the document exists");
}
बाद में: मॉड्यूलर
if (snapshot.exists()) {
console.log("the document exists");
}
तीसरा उदाहरण: नेमस्पेस और मॉड्यूलर कोड स्टाइल को एक साथ इस्तेमाल करना
अपग्रेड के दौरान, compat लाइब्रेरी का इस्तेमाल करने से, नेमस्पेस वाले कोड के साथ-साथ, मॉड्यूलर एपीआई के लिए रीफ़ैक्टर किए गए कोड का इस्तेमाल जारी रखा जा सकता है. इसका मतलब है कि Cloud Firestore के लिए नेमस्पेस वाले मौजूदा कोड को रखा जा सकता है. साथ ही, Authentication या Firebase SDK के अन्य कोड को मॉड्यूलर स्टाइल में रीफ़ैक्टर करते समय, दोनों कोड स्टाइल के साथ अपने ऐप्लिकेशन को कंपाइल किया जा सकता है. यही बात, Cloud Firestore जैसे किसी प्रॉडक्ट में, नेमस्पेस और मॉड्यूलर एपीआई कोड पर भी लागू होती है. जब तक compat पैकेज इंपोर्ट किए जा रहे हैं, तब तक कोड की नई और पुरानी स्टाइल एक साथ इस्तेमाल की जा सकती हैं:Cloud Firestore
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'
const docRef = firebase.firestore().doc();
getDoc(docRef);
ध्यान रखें कि आपका ऐप्लिकेशन कंपाइल हो जाएगा. हालांकि, जब तक अपने ऐप्लिकेशन से compat स्टेटमेंट और कोड पूरी तरह से नहीं हटाए जाते, तब तक आपको मॉड्यूलर कोड के फ़ायदे नहीं मिलेंगे. जैसे, ऐप्लिकेशन का साइज़ कम होना.
इनीशियलाइज़ेशन कोड अपडेट करना
मॉड्यूलर सिंटैक्स का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन का इनीशियलाइज़ेशन कोड अपडेट करें. इस कोड को
अपडेट करना ज़रूरी है, जब आपने अपने ऐप्लिकेशन के सभी
कोड को रीफ़ैक्टर कर लिया हो. ऐसा इसलिए, क्योंकि firebase.initializeApp() compat और मॉड्यूलर एपीआई, दोनों के लिए ग्लोबल
स्टेट को इनीशियलाइज़ करता है. वहीं, मॉड्यूलर
initializeApp() फ़ंक्शन, सिर्फ़ मॉड्यूलर के लिए स्टेट को इनीशियलाइज़ करता है.
पहले: compat
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
बाद में: मॉड्यूलर
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
compat कोड हटाना
मॉड्यूलर एपीआई के साइज़ से जुड़े फ़ायदों को पाने के लिए, आपको सभी इन्वोकेशन को ऊपर दिखाई गई मॉड्यूलर स्टाइल में बदलना होगा. साथ ही, अपने कोड से
import "firebase/compat/* के सभी स्टेटमेंट हटाने होंगे. इसके बाद, firebase.* ग्लोबल नेमस्पेस या नेमस्पेस वाले एपीआई स्टाइल में मौजूद किसी अन्य कोड के रेफ़रंस नहीं होने चाहिए.
विंडो से compat लाइब्रेरी का इस्तेमाल करना
मॉड्यूलर एपीआई को, ब्राउज़र के window ऑब्जेक्ट के बजाय, मॉड्यूल के साथ काम करने के लिए ऑप्टिमाइज़ किया गया है. लाइब्रेरी के पिछले वर्शन में, window.firebase नेमस्पेस का इस्तेमाल करके, Firebase को लोड और मैनेज किया जा सकता था. आने वाले समय में, इसका इस्तेमाल करने का सुझाव नहीं दिया जाता, क्योंकि इससे इस्तेमाल न किए गए कोड को हटाया नहीं जा सकता.
हालांकि, JavaScript SDK का compat वर्शन, उन डेवलपर के लिए window के साथ काम करता है जो मॉड्यूलर अपग्रेड पाथ को तुरंत शुरू नहीं करना चाहते.
<script src="https://www.gstatic.com/firebasejs/12.15.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/12.15.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/12.15.0/firebase-auth-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
कंपैटिबिलिटी लाइब्रेरी, बैकग्राउंड में मॉड्यूलर कोड का इस्तेमाल करती है और इसे नेमस्पेस वाले एपीआई के तौर पर ही उपलब्ध कराती है. इसका मतलब है कि जानकारी के लिए, नेमस्पेस वाले एपीआई का संदर्भ और नेमस्पेस वाले कोड स्निपेट देखे जा सकते हैं. लंबे समय तक इसका इस्तेमाल करने का सुझाव नहीं दिया जाता. हालांकि, पूरी तरह से मॉड्यूलर लाइब्रेरी पर अपग्रेड करने के लिए, इसका इस्तेमाल किया जा सकता है.
मॉड्यूलर एसडीके के फ़ायदे और सीमाएं
पूरी तरह से मॉड्यूलर एसडीके के, पुराने वर्शन के मुकाबले ये फ़ायदे हैं:
- मॉड्यूलर एसडीके की मदद से, ऐप्लिकेशन का साइज़ काफ़ी कम किया जा सकता है. यह JavaScript मॉड्यूल के नए फ़ॉर्मैट को अपनाता है. इससे "ट्री शेकिंग" की सुविधा मिलती है. इसमें, सिर्फ़ उन आर्टफ़ैक्ट को इंपोर्ट किया जाता है जिनकी आपके ऐप्लिकेशन को ज़रूरत होती है. आपके ऐप्लिकेशन के हिसाब से, मॉड्यूलर एसडीके के साथ ट्री-शेकिंग करने पर, नेमस्पेस वाले एपीआई का इस्तेमाल करके बनाए गए किसी मिलते-जुलते ऐप्लिकेशन के मुकाबले, 80% कम किलोबाइट का इस्तेमाल हो सकता है.
- मॉड्यूलर एसडीके को, फ़ीचर डेवलपमेंट से लगातार फ़ायदा मिलता रहेगा. वहीं, नेमस्पेस वाले एपीआई को नहीं.