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

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

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

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

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

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

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

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

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

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

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

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

नए ऐप्स के लिए संस्करण 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 होस्टिंग का उपयोग करने वाले ऐप्स के लिए सुविधाजनक

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

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

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

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

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

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

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

उपलब्ध पुस्तकालय

<script src="/__/firebase/8.6.7/firebase-app.js"></script>

<script src="/__/firebase/8.6.7/firebase-analytics.js"></script>

<script src="/__/firebase/8.6.7/firebase-auth.js"></script>

<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>

<script src="/__/firebase/8.6.7/firebase-functions.js"></script>

<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>

<script src="/__/firebase/8.6.7/firebase-storage.js"></script>

<script src="/__/firebase/8.6.7/firebase-database.js"></script>

<script src="/__/firebase/8.6.7/firebase-remote-config.js"></script>

<script src="/__/firebase/8.6.7/firebase.js"></script>

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

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-analytics.js"></script>

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

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

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-functions.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-messaging.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-storage.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-performance.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-database.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-remote-config.js"></script>

अतिरिक्त सेटअप विकल्प

Firebase SDK के लोड होने में देरी (CDN से)

आप Firebase SDK को शामिल करने में तब तक देरी कर सकते हैं जब तक कि संपूर्ण पृष्ठ लोड न हो जाए।

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

   <script defer src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
   
   <script defer src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
   <script defer src="https://www.gstatic.com/firebasejs/8.6.7/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 तक पहुंच सकते हैं:

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

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

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

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

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

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

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

// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

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

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

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

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

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

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

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

   firebase init

   यह इनिशियलाइज़ेशन कमांड क्या करता है?

   • अपनी स्थानीय ऐप निर्देशिका को Firebase से लिंक करता है

   • एक firebase.json फ़ाइल उत्पन्न करता है (Firebase होस्टिंग के लिए एक आवश्यक फ़ाइल)

   • आपको एक सार्वजनिक रूट निर्देशिका निर्दिष्ट करने के लिए प्रेरित करता है जिसमें आपकी सार्वजनिक स्थिर फ़ाइलें (HTML, CSS, JS, आदि) शामिल हैं।

     Firebase जिस निर्देशिका को खोजता है उसका डिफ़ॉल्ट नाम "सार्वजनिक" है। आप अपनी firebase.json फ़ाइल को सीधे संशोधित करके सार्वजनिक निर्देशिका को बाद में भी सेट कर सकते हैं।

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

   firebase serve

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

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

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

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

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

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