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

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

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

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

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

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

संस्करण 9 बिल्ड टूल के साथ अच्छी तरह से एकीकृत है जो आपके ऐप में उपयोग नहीं किए जा रहे कोड को हटा देता है, एक प्रक्रिया जिसे "ट्री-शेकिंग" कहा जाता है। इस SDK के साथ निर्मित ऐप्स बहुत कम आकार के फ़ुटप्रिंट से लाभान्वित होते हैं। संस्करण 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 . के लिए

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

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

आप Firebase के साथ एक नया एकीकरण पर शुरू कर रहे हैं, तो आप संस्करण 9 एसडीके करने का विकल्प चुन सकते हैं जब आप जोड़ सकते हैं और एसडीके प्रारंभ ।

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

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

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

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

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

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

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

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

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

NPM

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

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

सारांश:

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

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

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

सारांश:

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

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

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

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

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

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

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

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

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

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

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

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

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

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

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

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

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

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

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

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

<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.0/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 प्रोजेक्ट का इस्तेमाल करें

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

वेब संस्करण 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();
app_default_init_options.js

वेब संस्करण 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();
firebaseapp.js

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

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

वेब संस्करण 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);
app_multi_project_init_options.js

वेब संस्करण 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();
firebaseapp.js

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

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

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

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

  1. सीखने के लिए Firebase CLI दस्तावेज़ पर जाएं CLI स्थापित या अपने नवीनतम संस्करण में अपडेट ।

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

    firebase init

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

    firebase serve

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

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

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

अधिकांश Firebase जावास्क्रिप्ट SDKs हमारे सार्वजनिक रूप से खुले स्रोत संग्रहालय के रूप में विकसित कर रहे हैं Firebase GitHub भंडार ।

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

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