वेब और फायरबेस के बारे में और जानें

जैसा कि आप फायरबेस का उपयोग करके एक वेब ऐप विकसित कर रहे हैं, आप अपरिचित अवधारणाओं, या ऐसे क्षेत्रों का सामना कर सकते हैं जहाँ आपको अपने प्रोजेक्ट के लिए सही निर्णय लेने के लिए अधिक जानकारी की आवश्यकता होती है। इस पेज का उद्देश्य उन सवालों के जवाब देना है या अधिक जानने के लिए आपको संसाधनों की ओर इशारा करना है।

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

एसडीके संस्करण: नामांकित और मॉड्यूलर

फायरबेस वेब ऐप्स के लिए दो एपीआई सतह प्रदान करता है:

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

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

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

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

क्या समर्थित है?

जबकि नेमस्पेस्ड एपीआई और मॉड्यूलर एपीआई की अलग-अलग कोड शैलियाँ हैं, वे फायरबेस सुविधाओं और विकल्पों के लिए बहुत समान समर्थन प्रदान करते हैं। जैसा कि हम इस गाइड में विस्तार से वर्णन करेंगे, दोनों SDK संस्करण SDK को जोड़ने/स्थापित करने के लिए कई विकल्पों के साथ JavaScript और Node.js वेरिएंट का समर्थन करते हैं।

एसडीके के साथ जोड़ें नामांकित मॉड्यूलर
NPM
  • जावास्क्रिप्ट के लिए
  • Node.js के लिए
  • जावास्क्रिप्ट के लिए
  • Node.js के लिए
सीडीएन (सामग्री वितरण नेटवर्क)
  • जावास्क्रिप्ट के लिए
  • जावास्क्रिप्ट के लिए
होस्टिंग यूआरएल
  • जावास्क्रिप्ट के लिए
  • Node.js के लिए

अधिक जानकारी के लिए, इस पृष्ठ पर बाद में अपने ऐप में वेब एसडीके और फायरबेस वेब एसडीके वेरिएंट को जोड़ने के तरीके देखें।

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

यदि आप Firebase के साथ एक नया एकीकरण शुरू कर रहे हैं, तो आप SDK जोड़ते और प्रारंभ करते समय मॉड्यूलर API में ऑप्ट इन कर सकते हैं।

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

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

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

अधिक उदाहरणों और विवरणों के लिए, प्रत्येक उत्पाद क्षेत्र के साथ-साथ मॉड्यूलर एपीआई संदर्भ दस्तावेज के लिए गाइड देखें।

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

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

आप समर्थित विधियों में से किसी एक के माध्यम से अपने ऐप में उपलब्ध किसी भी लाइब्रेरी को जोड़ सकते हैं:

  • एनपीएम (मॉड्यूल बंडलर्स और नोड.जेएस के लिए)
  • सीडीएन (सामग्री वितरण नेटवर्क)

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

NPM

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

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

सारांश:

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

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

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

सारांश:

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

फायरबेस वेब एसडीके वेरिएंट

वर्तमान में, Firebase दो वेब SDK प्रकार प्रदान करता है:

  • ब्राउज़र में उपयोग के लिए सभी फायरबेस सुविधाओं का समर्थन करने वाला जावास्क्रिप्ट बंडल।
  • एक क्लाइंट-साइड Node.js बंडल जो कई—लेकिन सभी नहीं— Firebase सुविधाओं का समर्थन करता है। समर्थित परिवेशों की सूची देखें.

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

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

जब आप एनपीएम का उपयोग करके फायरबेस वेब एसडीके स्थापित करते हैं, तो जावास्क्रिप्ट और नोड.जेएस संस्करण दोनों स्थापित होते हैं। पैकेज आपके आवेदन के लिए सही बंडलों को सक्षम करने के लिए विस्तृत पर्यावरण पहचान प्रदान करता है।

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

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

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

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

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

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

यहां सभी सेवाओं को सक्षम करने के साथ कॉन्फिग ऑब्जेक्ट का प्रारूप है (ये मान स्वचालित रूप से पॉप्युलेट हो जाते हैं):

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",
  storageBucket: "PROJECT_ID.appspot.com",
  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 SDKs को शामिल करने में देरी कर सकते हैं। यदि आप <script type="module"> के साथ संस्करण 9 सीडीएन स्क्रिप्ट का उपयोग कर रहे हैं, तो यह डिफ़ॉल्ट व्यवहार है। यदि आप मॉड्यूल के रूप में संस्करण 8 सीडीएन स्क्रिप्ट का उपयोग कर रहे हैं, तो लोडिंग को स्थगित करने के लिए इन चरणों को पूरा करें:

  1. Firebase SDKs के लिए प्रत्येक 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 project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

एक ही ऐप में कई फायरबेस प्रोजेक्ट का उपयोग करें

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

Web modular API

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();

Web namespaced API

// 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();

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

फायरबेस जावास्क्रिप्ट एसडीके आपको एक ही ऐप में एक ही समय में कई फायरबेस प्रोजेक्ट को आरंभ करने और उपयोग करने की अनुमति देता है, जिसमें प्रत्येक प्रोजेक्ट अपनी स्वयं की फायरबेस कॉन्फ़िगरेशन जानकारी का उपयोग करता है।

Web modular API

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);

Web namespaced API

// 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();

विकास के लिए एक स्थानीय वेब सर्वर चलाएं

यदि आप एक वेब ऐप बना रहे हैं, तो फायरबेस जावास्क्रिप्ट एसडीके के कुछ हिस्सों के लिए आवश्यक है कि आप अपने वेब ऐप को स्थानीय फाइल सिस्टम के बजाय सर्वर से सर्व करें। आप स्थानीय सर्वर चलाने के लिए फायरबेस सीएलआई का उपयोग कर सकते हैं।

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

अपने वेब ऐप को सर्व करने के लिए, आप फायरबेस सीएलआई, एक कमांड-लाइन टूल का उपयोग करेंगे।

  1. सीएलआई को स्थापित करने या इसके नवीनतम संस्करण में अपडेट करने के बारे में जानने के लिए फायरबेस सीएलआई दस्तावेज पर जाएं।

  2. अपने फायरबेस प्रोजेक्ट को इनिशियलाइज़ करें। अपनी स्थानीय ऐप निर्देशिका की जड़ से निम्न कमांड चलाएँ:

    firebase init

  3. विकास के लिए स्थानीय सर्वर प्रारंभ करें । अपनी स्थानीय ऐप निर्देशिका की जड़ से निम्न कमांड चलाएँ:

    firebase serve

फायरबेस जावास्क्रिप्ट एसडीके के लिए ओपन सोर्स संसाधन

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

फायरबेस जावास्क्रिप्ट एसडीके

अधिकांश Firebase JavaScript SDK को हमारे सार्वजनिक Firebase GitHub रिपॉजिटरी में ओपन सोर्स लाइब्रेरी के रूप में विकसित किया गया है।

त्वरित प्रारंभ नमूने

फायरबेस वेब पर अधिकांश फायरबेस एपीआई के लिए क्विकस्टार्ट नमूनों का संग्रह रखता है। इन क्विकस्टार्ट को हमारे सार्वजनिक फायरबेस गिटहब क्विकस्टार्ट रिपॉजिटरी में खोजें। आप फायरबेस एसडीके का उपयोग करने के लिए इन क्विकस्टार्ट्स को उदाहरण कोड के रूप में उपयोग कर सकते हैं।