वेब के लिए Firebase को समझना

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

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

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

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

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

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

हालांकि, ज़्यादातर मॉड्यूलर एपीआई, नेमस्पेस वाले एपीआई के जैसे ही पैटर्न का पालन करते हैं, लेकिन कोड का व्यवस्थित तरीका अलग होता है. आम तौर पर, नेमस्पेस वाला एपीआई, नेमस्पेस और सेवा पैटर्न पर आधारित होता है. वहीं, मॉड्यूलर एपीआई, अलग-अलग फ़ंक्शन पर आधारित होता है. उदाहरण के लिए, नेमस्पेस किए गए एपीआई की डॉट चेन, जैसे कि 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 पैकेज (जिसमें ब्राउज़र और Node.js बंडल दोनों शामिल होते हैं) डाउनलोड करने से आपको Firebase SDK की एक स्थानीय कॉपी मिलती है, जिसकी ज़रूरत बिना ब्राउज़र वाले ऐप्लिकेशन, जैसे कि Node.js ऐप्लिकेशन, React Native या Electron के लिए हो सकती है. डाउनलोड में, कुछ पैकेज के लिए Node.js और React Native बंडल शामिल होते हैं. Node.js बंडल, एसएसआर फ़्रेमवर्क के सर्वर साइड रेंडरिंग (एसएसआर) चरण के लिए ज़रूरी हैं.

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

सारांश में:

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

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

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

सारांश में:

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

Firebase वेब SDK टूल के वैरिएंट

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

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

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

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

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

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",
  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 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 project 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 टूल का इस्तेमाल करने के लिए, इन क्विकस्टार्ट को उदाहरण के तौर पर दिए गए कोड के तौर पर इस्तेमाल किया जा सकता है.