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

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

अगर आपके पास इस पृष्ठ पर शामिल नहीं किए गए किसी विषय के बारे में प्रश्न हैं, तो हमारे किसी ऑनलाइन समुदाय पर जाएं. हम इस पेज पर समय-समय पर नए विषय भी जोड़ते रहेंगे. इसलिए, यह देखने के लिए कि हमने वह विषय जोड़ा है या नहीं जिसके बारे में आपको जानना है, इस पेज पर वापस आएं.

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

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

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

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

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

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

जावास्क्रिप्ट - नए ऐप्स के लिए मॉड्यूलर API

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

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

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

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

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

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

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

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

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

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

NPM

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

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

सारांश में:

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

CDN (सामग्री वितरण नेटवर्क)

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

सारांश में:

  • परिचित और सरल
  • जब ऐप का आकार कोई बड़ी चिंता का विषय न हो, तब उपयुक्त
  • यह तब उपयुक्त है जब आपकी वेबसाइट बिल्ड टूल्स का उपयोग नहीं करती है.

फ़ायरबेस वेब SDK के प्रकार

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

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

बंडलर्स और फ्रेमवर्क के साथ पर्यावरण का पता लगाना

जब आप npm का उपयोग करके Firebase वेब SDK स्थापित करते हैं, तो JavaScript और Node.js दोनों संस्करण स्थापित हो जाते हैं. यह पैकेज आपके अनुप्रयोग के लिए सही बंडलों को सक्षम करने के लिए विस्तृत पर्यावरण पहचान प्रदान करता है.

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

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

अपने ऐप्लिकेशन में 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"> के साथ मॉड्यूलर API CDN स्क्रिप्ट का इस्तेमाल कर रहे हैं, तो यह डिफ़ॉल्ट व्यवहार है. अगर मॉड्यूल के तौर पर नेमस्पेस वाली सीडीएन स्क्रिप्ट का इस्तेमाल किया जा रहा है, तो लोड होने में देरी करने के लिए यह तरीका अपनाएं:

  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 CLI का इस्तेमाल कर सकते हैं.

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

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

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

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

    firebase init

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

    firebase serve

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

फायरबेस ओपन सोर्स विकास का समर्थन करता है, और हम समुदाय के योगदान और प्रतिक्रिया को प्रोत्साहित करते हैं.

Firebase JavaScript SDK

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

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

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