वेब के लिए Firebase के बारे में जानकारी

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

अगर आपका कोई ऐसा सवाल है जिसके बारे में इस पेज पर जानकारी नहीं दी गई है, तो हमारी किसी ऑनलाइन कम्यूनिटी पर जाएं. हम इस पेज को समय-समय पर नए विषयों के साथ अपडेट करते रहेंगे. इसलिए, यह देखने के लिए कि हमने वह विषय जोड़ा है या नहीं जिसके बारे में आपको जानना है, इस पेज पर वापस आएं.

SDK टूल के वर्शन: नेमस्पेस और मॉड्यूलर

Firebase, वेब ऐप्लिकेशन के लिए दो एपीआई उपलब्ध कराता है:

  • JavaScript - namespaced. यह JavaScript इंटरफ़ेस है, जिसे Firebase ने कई सालों तक बनाए रखा है. साथ ही, यह उन वेब डेवलपर को भी पता है जिनके पास पुराने Firebase ऐप्लिकेशन हैं. नेमस्पेस वाले एपीआई को नई सुविधाओं का फ़ायदा नहीं मिलता. इसलिए, ज़्यादातर नए ऐप्लिकेशन को मॉड्यूलर एपीआई का इस्तेमाल करना चाहिए.
  • JavaScript - मॉड्यूलर. यह एसडीके, मॉड्यूलर अप्रोच पर आधारित है. इससे एसडीके का साइज़ कम हो जाता है और यह webpack या Rollup जैसे मॉडर्न JavaScript बिल्ड टूल के साथ बेहतर तरीके से काम करता है.

मॉड्यूलर एपीआई, बिल्ड टूल के साथ अच्छी तरह से इंटिग्रेट हो जाता है. ये टूल, आपके ऐप्लिकेशन में इस्तेमाल नहीं किए जा रहे कोड को हटा देते हैं. इस प्रोसेस को "ट्री-शेकिंग" कहा जाता है. इस एसडीके की मदद से बनाए गए ऐप्लिकेशन का साइज़ काफ़ी कम होता है. नेमस्पेस वाला एपीआई, मॉड्यूल के तौर पर उपलब्ध है. हालांकि, इसका स्ट्रक्चर पूरी तरह से मॉड्यूलर नहीं है. साथ ही, यह साइज़ को उतना कम नहीं करता जितना कि मॉड्यूलर एपीआई करता है.

मॉड्यूलर एपीआई का ज़्यादातर हिस्सा, नेमस्पेस वाले एपीआई के पैटर्न को फ़ॉलो करता है. हालांकि, कोड का संगठन अलग होता है. आम तौर पर, नेमस्पेस किए गए एपीआई का इस्तेमाल नेमस्पेस और सेवा पैटर्न के लिए किया जाता है. वहीं, मॉड्यूलर एपीआई का इस्तेमाल अलग-अलग फ़ंक्शन के लिए किया जाता है. उदाहरण के लिए, नेमस्पेस किए गए एपीआई की डॉट-चेनिंग, जैसे कि firebaseApp.auth(), को मॉड्यूलर एपीआई में एक ही getAuth() फ़ंक्शन से बदल दिया जाता है. यह firebaseApp लेता है और Authentication इंस्टेंस दिखाता है.

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

JavaScript - नए ऐप्लिकेशन के लिए मॉड्यूलर एपीआई

अगर आपको Firebase के साथ नया इंटिग्रेशन शुरू करना है, तो SDK टूल को जोड़ते और शुरू करते समय, मॉड्यूलर एपीआई का इस्तेमाल किया जा सकता है.

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

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

ज़्यादा उदाहरण और जानकारी के लिए, हर प्रॉडक्ट एरिया की गाइड के साथ-साथ मॉड्यूलर एपीआई के रेफ़रंस के लिए दस्तावेज़ देखें.

अपने ऐप्लिकेशन में वेब SDK टूल जोड़ने के तरीके

Firebase, ज़्यादातर Firebase प्रॉडक्ट के लिए JavaScript लाइब्रेरी उपलब्ध कराता है. इनमें Remote Config, FCM वगैरह शामिल हैं. अपने वेब ऐप्लिकेशन में Firebase SDK टूल जोड़ने का तरीका इस बात पर निर्भर करता है कि ऐप्लिकेशन के साथ कौनसे टूल का इस्तेमाल किया जा रहा है. जैसे, मॉड्यूल बंडलर.

इनमें से किसी भी उपलब्ध लाइब्रेरी को अपने ऐप्लिकेशन में जोड़ा जा सकता है. इसके लिए, इनमें से कोई एक तरीका इस्तेमाल करें:

  • npm (मॉड्यूल बंडलर के लिए)
  • सीडीएन (कॉन्टेंट डिलीवरी नेटवर्क)

सेटअप से जुड़े ज़्यादा निर्देशों के लिए, अपने JavaScript ऐप्लिकेशन में Firebase जोड़ना लेख पढ़ें. इस सेक्शन में, उपलब्ध विकल्पों में से कोई एक चुनने में आपकी मदद करने के लिए जानकारी दी गई है.

npm

Firebase npm पैकेज डाउनलोड करने पर, आपको Firebase SDK की एक लोकल कॉपी मिलती है. इसमें ब्राउज़र और Node.js, दोनों के बंडल शामिल होते हैं. इसकी ज़रूरत Node.js ऐप्लिकेशन, React Native या Electron जैसे नॉन-ब्राउज़र ऐप्लिकेशन के लिए पड़ सकती है. डाउनलोड में, कुछ पैकेज के लिए Node.js और React Native बंडल शामिल होते हैं. एसएसआर फ़्रेमवर्क के सर्वर-साइड रेंडरिंग (एसएसआर) चरण के लिए, Node.js बंडल ज़रूरी होते हैं.

npm का इस्तेमाल, webpack या Rollup जैसे मॉड्यूल बंडलर के साथ किया जा सकता है. इससे आपको ऑप्टिमाइज़ेशन के विकल्प मिलते हैं. इनकी मदद से, इस्तेमाल न किए गए कोड को "ट्री-शेक" किया जा सकता है और टारगेट किए गए पॉलीफ़िल लागू किए जा सकते हैं. इससे आपके ऐप्लिकेशन का साइज़ काफ़ी कम हो सकता है. इन सुविधाओं को लागू करने से, आपके कॉन्फ़िगरेशन और बिल्ड चेन में कुछ समस्याएं आ सकती हैं. हालांकि, कई मुख्य सीएलआई टूल इन समस्याओं को कम करने में मदद कर सकते हैं. इन टूल में Angular, React, Vue, Next वगैरह शामिल हैं.

सारांश में:

  • ऐप्लिकेशन के साइज़ को ऑप्टिमाइज़ करने में मदद करता है
  • मॉड्यूल मैनेज करने के लिए, मज़बूत टूलिंग उपलब्ध है
  • Node.js के साथ SSR के लिए ज़रूरी है

सीडीएन (कॉन्टेंट डिलीवरी नेटवर्क)

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

सारांश में:

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

Firebase web SDK के वैरिएंट

Firebase के वेब SDK टूल का इस्तेमाल, ब्राउज़र और नोड, दोनों तरह के ऐप्लिकेशन में किया जा सकता है. हालांकि, कई प्रॉडक्ट Node एनवायरमेंट में उपलब्ध नहीं हैं. उन एनवायरमेंट की सूची देखें जिनमें यह सुविधा काम करती है.

कुछ प्रॉडक्ट SDK, ब्राउज़र और नोड के अलग-अलग वैरिएंट उपलब्ध कराते हैं. इनमें से हर एक, ESM और CJS, दोनों फ़ॉर्मैट में उपलब्ध होता है. साथ ही, कुछ प्रॉडक्ट SDK, Cordova या React Native वैरिएंट भी उपलब्ध कराते हैं. वेब एसडीके को इस तरह कॉन्फ़िगर किया जाता है कि यह आपके टूलिंग कॉन्फ़िगरेशन या एनवायरमेंट के आधार पर सही वैरिएंट उपलब्ध कराता है. साथ ही, ज़्यादातर मामलों में इसे मैन्युअल तरीके से चुनने की ज़रूरत नहीं होती. एसडीके के सभी वर्शन को इस तरह से डिज़ाइन किया गया है कि वे असली उपयोगकर्ताओं के लिए वेब ऐप्लिकेशन या क्लाइंट ऐप्लिकेशन बनाने में मदद कर सकें. जैसे, Node.js डेस्कटॉप या IoT ऐप्लिकेशन में. अगर आपका मकसद, खास अधिकारों वाले एनवायरमेंट (जैसे कि सर्वर) से एडमिन ऐक्सेस सेट अप करना है, तो Firebase Admin SDK का इस्तेमाल करें.

बंडलर और फ़्रेमवर्क की मदद से एनवायरमेंट का पता लगाना

npm का इस्तेमाल करके Firebase वेब SDK टूल इंस्टॉल करने पर, JavaScript और Node.js, दोनों वर्शन इंस्टॉल हो जाते हैं. यह पैकेज, एनवायरमेंट का पता लगाने की सुविधा देता है. इससे आपके ऐप्लिकेशन के लिए सही बंडल उपलब्ध कराए जा सकते हैं.

अगर आपके कोड में Node.js require स्टेटमेंट का इस्तेमाल किया जाता है, तो SDK टूल, Node के लिए खास बंडल ढूंढता है. इसके अलावा, आपके बंडलर की सेटिंग सही तरीके से कॉन्फ़िगर की जानी चाहिए, ताकि आपकी package.json फ़ाइल में सही एंट्री पॉइंट फ़ील्ड का पता लगाया जा सके. उदाहरण के लिए, main, browser या module. अगर आपको एसडीके टूल के साथ रनटाइम से जुड़ी गड़बड़ियां दिखती हैं, तो जांच करें कि आपका बंडलर, आपके एनवायरमेंट के लिए सही तरह के बंडल को प्राथमिकता देने के लिए कॉन्फ़िगर किया गया हो.

Firebase कॉन्फ़िगरेशन ऑब्जेक्ट के बारे में जानकारी

अपने ऐप्लिकेशन में Firebase को शुरू करने के लिए, आपको अपने ऐप्लिकेशन का Firebase कॉन्फ़िगरेशन देना होगा. आपके पास Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को कभी भी पाने का विकल्प होता है.

  • हमारा सुझाव है कि आप अपने कॉन्फ़िगरेशन ऑब्जेक्ट में मैन्युअल तरीके से बदलाव न करें. खास तौर पर, यहां दिए गए "Firebase के विकल्प" में बदलाव न करें. ये विकल्प ज़रूरी हैं: apiKey, projectId, और appID. अगर आपने अपने ऐप्लिकेशन को "Firebase के विकल्प" के लिए ज़रूरी वैल्यू के साथ शुरू नहीं किया है या अमान्य वैल्यू के साथ शुरू किया है, तो आपके ऐप्लिकेशन के उपयोगकर्ताओं को गंभीर समस्याएं आ सकती हैं. हालांकि, authDomain को अपडेट किया जा सकता है. इसके लिए, signInWithRedirect इस्तेमाल करने के सबसे सही तरीके अपनाएं.

  • अगर आपने अपने Firebase प्रोजेक्ट में Google Analytics चालू किया है, तो आपके कॉन्फ़िगरेशन ऑब्जेक्ट में measurementId फ़ील्ड शामिल होगा. Analytics इस्तेमाल शुरू करने के पेज पर जाकर, इस फ़ील्ड के बारे में ज़्यादा जानें.

  • अगर आपने Firebase वेब ऐप्लिकेशन बनाने के बाद Google Analytics या Realtime Database को चालू किया है, तो पक्का करें कि आपके ऐप्लिकेशन में इस्तेमाल किया गया Firebase कॉन्फ़िगरेशन ऑब्जेक्ट, उससे जुड़ी कॉन्फ़िगरेशन वैल्यू (क्रमशः measurementId और databaseURL) के साथ अपडेट हो गया हो. आपके पास Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को किसी भी समय पाने का विकल्प होता है.

यहां सभी सेवाओं के चालू होने पर, कॉन्फ़िगरेशन ऑब्जेक्ट का फ़ॉर्मैट दिया गया है. इन वैल्यू को अपने-आप भरा जाता है:

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

उपलब्ध लाइब्रेरी

सेटअप के अन्य विकल्प

सीडीएन से Firebase SDK टूल को लोड करने में देरी करना

पूरा पेज लोड होने तक, Firebase SDK टूल को शामिल करने में देरी की जा सकती है. अगर <script type="module"> के साथ मॉड्यूलर एपीआई सीडीएन स्क्रिप्ट का इस्तेमाल किया जा रहा है, तो यह डिफ़ॉल्ट व्यवहार है. अगर मॉड्यूल के तौर पर नेमस्पेस वाली सीडीएन स्क्रिप्ट का इस्तेमाल किया जा रहा है, तो लोड होने में देरी करने के लिए यह तरीका अपनाएं:

  1. Firebase SDK टूल के लिए, हर script टैग में defer फ़्लैग जोड़ें. इसके बाद, दूसरी स्क्रिप्ट का इस्तेमाल करके Firebase को शुरू करने में देरी करें. उदाहरण के लिए:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. एक init-firebase.js फ़ाइल बनाएं. इसके बाद, फ़ाइल में यह जानकारी शामिल करें:

    // TODO: Replace the following with your app's Firebase configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

एक ऐप्लिकेशन में कई Firebase प्रोजेक्ट इस्तेमाल करना

ज़्यादातर मामलों में, आपको सिर्फ़ एक डिफ़ॉल्ट ऐप्लिकेशन में Firebase को शुरू करना होता है. उस ऐप्लिकेशन से Firebase को दो तरीकों से ऐक्सेस किया जा सकता है:

Web

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

Web

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

हालांकि, कभी-कभी आपको एक ही समय में कई Firebase प्रोजेक्ट ऐक्सेस करने पड़ सकते हैं. उदाहरण के लिए, हो सकता है कि आपको एक Firebase प्रोजेक्ट के डेटाबेस से डेटा पढ़ना हो, लेकिन फ़ाइलों को किसी दूसरे Firebase प्रोजेक्ट में सेव करना हो. इसके अलावा, ऐसा भी हो सकता है कि आपको एक प्रोजेक्ट की पुष्टि करनी हो, जबकि दूसरे प्रोजेक्ट की पुष्टि न करनी हो.

Firebase JavaScript SDK टूल की मदद से, एक ही ऐप्लिकेशन में एक साथ कई Firebase प्रोजेक्ट शुरू किए जा सकते हैं और उनका इस्तेमाल किया जा सकता है. हर प्रोजेक्ट, Firebase कॉन्फ़िगरेशन की अपनी जानकारी का इस्तेमाल करता है.

Web

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

Web

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();
firebaseapp.js

डेवलपमेंट के लिए लोकल वेब सर्वर चलाना

अगर आपको कोई वेब ऐप्लिकेशन बनाना है, तो Firebase JavaScript SDK टूल के कुछ हिस्सों के लिए यह ज़रूरी है कि आप अपने वेब ऐप्लिकेशन को लोकल फ़ाइल सिस्टम के बजाय किसी सर्वर से उपलब्ध कराएं. लोकल सर्वर चलाने के लिए, Firebase सीएलआई का इस्तेमाल किया जा सकता है.

अगर आपने अपने ऐप्लिकेशन के लिए Firebase Hosting पहले ही सेट अप कर लिया है, तो हो सकता है कि आपने नीचे दिए गए कई चरण पहले ही पूरे कर लिए हों.

अपने वेब ऐप्लिकेशन को चलाने के लिए, आपको Firebase सीएलआई का इस्तेमाल करना होगा. यह एक कमांड-लाइन टूल है.

  1. Firebase सीएलआई के दस्तावेज़ पर जाएं. यहां आपको सीएलआई इंस्टॉल करने या इसे नए वर्शन पर अपडेट करने का तरीका मिलेगा.

  2. अपने Firebase प्रोजेक्ट को शुरू करें. अपने ऐप्लिकेशन की स्थानीय डायरेक्ट्री के रूट से यह कमांड चलाएं:

    firebase init

  3. डेवलपमेंट के लिए, लोकल सर्वर शुरू करें. अपने ऐप्लिकेशन की लोकल डायरेक्ट्री के रूट से, यह कमांड चलाएं:

    firebase serve

Firebase JavaScript SDK के लिए ओपन सोर्स संसाधन

Firebase, ओपन सोर्स डेवलपमेंट के साथ काम करता है. हम कम्यूनिटी के योगदान और सुझाव/राय देने या शिकायत करने को बढ़ावा देते हैं.

Firebase JavaScript SDK

ज़्यादातर Firebase JavaScript SDK, हमारी सार्वजनिक Firebase GitHub रिपॉज़िटरी में ओपन सोर्स लाइब्रेरी के तौर पर डेवलप किए जाते हैं.

क्विकस्टार्ट के सैंपल

Firebase, वेब पर मौजूद ज़्यादातर Firebase API के लिए, क्विकस्टार्ट सैंपल का कलेक्शन बनाए रखता है. इन क्विकस्टार्ट को हमारे सार्वजनिक Firebase GitHub क्विकस्टार्ट रिपॉज़िटरी में देखें. इन क्विकस्टार्ट का इस्तेमाल, Firebase SDK टूल का इस्तेमाल करने के लिए उदाहरण के तौर पर दिए गए कोड के तौर पर किया जा सकता है.