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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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

एसडीके संस्करण 8 और 9

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

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

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

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

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

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

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

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

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

नए ऐप्स के लिए संस्करण 9

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

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

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

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

अधिक उदाहरणों और विवरणों के लिए, प्रत्येक उत्पाद क्षेत्र के साथ-साथ संस्करण 9 संदर्भ दस्तावेज़ीकरण के लिए मार्गदर्शिकाएँ देखें।

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

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

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

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

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

NPM

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

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

सारांश:

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

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

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

सारांश:

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

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

वर्तमान में, फायरबेस दो वेब एसडीके वेरिएंट प्रदान करता है:

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

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

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

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

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

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

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

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

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

  • अगर आप अपना फायरबेस वेब ऐप बनाने के बाद Google Analytics या रीयलटाइम डेटाबेस को सक्षम करते हैं, तो सुनिश्चित करें कि आपके द्वारा अपने ऐप में उपयोग की जाने वाली फ़ायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट संबंधित कॉन्फ़िगरेशन मानों (क्रमशः 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 SDK के लोड होने में देरी (CDN से)

आप Firebase SDK को शामिल करने में तब तक देरी कर सकते हैं जब तक कि संपूर्ण पृष्ठ लोड न हो जाए। यदि आप संस्करण 9 सीडीएन स्क्रिप्ट का उपयोग कर रहे हैं <script type="module"> , तो यह डिफ़ॉल्ट व्यवहार है। यदि आप मॉड्यूल के रूप में संस्करण 8 सीडीएन स्क्रिप्ट का उपयोग कर रहे हैं, तो लोडिंग को स्थगित करने के लिए इन चरणों को पूरा करें:

  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 तक पहुंच सकते हैं:

Web version 9

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 version 8

// 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 version 9

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 version 8

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

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

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

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

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

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

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

    firebase init

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

    firebase serve

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

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

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

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

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

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