Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

درباره وب و Firebase بیشتر بیاموزید

همانطور که در حال توسعه یک برنامه وب با استفاده از Firebase هستید ، ممکن است با مفاهیم ناآشنا یا مناطقی مواجه شوید که در آنها برای تصمیم گیری مناسب برای پروژه خود به اطلاعات بیشتری نیاز دارید. هدف این صفحه پاسخ به این سوالات یا اشاره به منابع برای کسب اطلاعات بیشتر است.

اگر سوالی دارید در مورد یک موضوع در این صفحه تحت پوشش نیست، یکی از ما بازدید جوامع آنلاین . ما همچنین این صفحه را با موضوعات جدید به صورت دوره ای به روز می کنیم ، بنابراین دوباره بررسی کنید تا ببینید آیا موضوعی را که می خواهید درباره آن بیاموزید اضافه کرده ایم یا خیر.

SDK نسخه 8 و 9

Firebase دو نسخه SDK برای برنامه های وب ارائه می دهد:

  • نسخه 8. این رابط جاوا اسکریپت است که فایربیس برای چند سال حفظ و توسعه دهندگان وب با برنامه های فایربیس موجود آشنا است. از آنجا که Firebase پشتیبانی از این نسخه را پس از یک چرخه انتشار عمده حذف می کند ، برنامه های جدید باید نسخه 9 را به کار گیرند.
  • نسخه مدولار 9. این SDK یک روش مدولار فراهم می کند که اندازه SDK و بهره وری بیشتر کاهش می یابد با جاوا اسکریپت ابزار ساخت مدرن مانند معرفی webpack یا عرضه به .

نسخه 9 به خوبی با ابزارهای ساختنی که کد مورد استفاده در برنامه شما را حذف نمی کند ، ادغام می شود ، فرآیندی که به عنوان "لرزش درخت" شناخته می شود. برنامه های ساخته شده با این SDK از اندازه بسیار زیادی از رد پا استفاده می کنند. نسخه 8 ، اگرچه به عنوان ماژول موجود است ، اما ساختار کاملاً ماژولار ندارد و میزان کاهش اندازه یکسانی را ارائه نمی دهد.

اگرچه اکثر SDK نسخه 9 از الگوهای مشابه نسخه 8 پیروی می کند ، اما سازماندهی کد متفاوت است. به طور کلی ، نسخه 8 به سمت فضای نام و الگوی سرویس ، در حالی که نسخه 9 به سمت توابع مجزا متمرکز است. به عنوان مثال، نسخه 8 نقطه زنجیری، مانند firebaseApp.auth() ، در نسخه 9 توسط یک جایگزین getAuth() تابع است که طول می کشد firebaseApp و بازده یک نمونه تایید.

این بدان معناست که برنامه های وب ایجاد شده با نسخه 8 یا قبلی به منظور استفاده از رویکرد ماژولار نسخه 9 نیاز به تغییر شکل دارند. Firebase کتابخانه های سازگار را برای سهولت در انتقال فراهم می کند. را ببینید راهنمای ارتقاء برای اطلاعات بیشتر.

چه چیزی پشتیبانی می شود؟

در حالی که نسخه 8 و نسخه 9 دارای سبک های مختلف کد هستند ، از ویژگی ها و گزینه های Firebase پشتیبانی بسیار مشابهی را ارائه می دهند. همانطور که در این راهنما به تفصیل توضیح خواهیم داد ، هر دو نسخه SDK از انواع JavaScript و Node.js به همراه چندین گزینه برای افزودن/نصب SDK پشتیبانی می کنند.

SDK ها را با اضافه کنید 8.0 (نامگذاری شده) 9.0 (مدولار)
npm
  • برای جاوا اسکریپت
  • برای Node.js
  • برای جاوا اسکریپت
  • برای Node.js
CDN (شبکه تحویل محتوا)
  • برای جاوا اسکریپت
  • برای جاوا اسکریپت
آدرس های میزبانی وب
  • برای جاوا اسکریپت
  • برای Node.js

برای اطلاعات بیشتر، نگاه کنید به راه برای اضافه کردن SDK ها وب به برنامه شما و فایربیس وب SDK انواع بعد در این صفحه.

نسخه 9 برای برنامه های جدید

اگر شما با شروع در یکپارچه سازی جدید با Firebase، شما می توانید به نسخه 9 SDK انتخاب زمانی که شما اضافه کردن و مقداردهی اولیه SDK .

به عنوان برنامه خود را توسعه می، در نظر داشته باشید که کد خود را خواهد شد اساسا حول توابع سازمان یافته است. در نسخه 9 ، سرویسها به عنوان اولین آرگومان منتقل می شوند و سپس تابع از جزئیات سرویس برای انجام بقیه استفاده می کند. مثلا:

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

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

برای نمونه و اطلاعات بیشتر، راهنماهای برای هر منطقه محصول و همچنین ببینید اسناد و مدارک نسخه 9 مرجع .

راه هایی برای افزودن SDK های وب به برنامه خود

Firebase کتابخانه های جاوا اسکریپت را برای اکثر محصولات Firebase از جمله Remote Config ، FCM و موارد دیگر ارائه می دهد. نحوه افزودن SDK های Firebase به برنامه وب شما بستگی به این دارد که از چه ابزاری با برنامه خود استفاده می کنید (مانند جمع کننده ماژول) ، یا اینکه برنامه شما در محیطی غیر از مرورگر مانند Node.js. اجرا می شود.

شما می توانید هر یک از اضافه کتابخانه ها در دسترس به برنامه خود را از طریق یکی از روش های پشتیبانی شده:

  • npm (برای بسته های ماژول و Node.js)
  • CDN (شبکه تحویل محتوا)

برای دستورالعمل تنظیم دقیق، و اضافه کردن فایربیس به برنامه جاوا اسکریپت خود را . بقیه این بخش شامل اطلاعاتی است که به شما در انتخاب گزینه های موجود کمک می کند.

npm

بارگیری بسته Firebase npm (که شامل هر دو بسته مرورگر و Node.js است) یک نسخه محلی از SDK Firebase را در اختیار شما قرار می دهد ، که ممکن است برای برنامه های غیر مرورگر مانند برنامه های Node.js ، React Native یا Electron مورد نیاز باشد. بارگیری شامل بسته های نرم افزاری Node.js و React Native به عنوان گزینه ای برای برخی از بسته ها است. بسته های Node.js برای مرحله ارائه سرور (SSR) چارچوب های SSR ضروری هستند.

با استفاده از NPM با یک ماژول bundler مانند webpack یا عرضه به فراهم می کند گزینه های بهینه سازی به "درخت لرزش" کد استفاده نشده و اعمال polyfills هدفمند، که تا حد زیادی می تواند به کاهش اثرات اندازه از برنامه خود را. پیاده سازی این ویژگی ها ممکن است پیچیدگی را به پیکربندی و ایجاد زنجیره شما اضافه کند ، اما ابزارهای مختلف اصلی CLI می تواند به کاهش آن کمک کند. این ابزارها شامل زاویه ، واکنش نشان می دهند ، لانگ وو ، بعد ، و دیگران.

به طور خلاصه:

  • بهینه سازی اندازه برنامه ارزشمند را ارائه می دهد
  • ابزارهای قوی برای مدیریت ماژول ها در دسترس است
  • مورد نیاز برای SSR با Node.js

CDN (شبکه تحویل محتوا)

افزودن کتابخانه هایی که در CDN Firebase ذخیره می شوند ، یک روش راه اندازی ساده SDK است که ممکن است برای بسیاری از توسعه دهندگان آشنا باشد. با استفاده از CDN برای افزودن SDK ها ، نیازی به ابزار ساخت ندارید و ممکن است زنجیره ساخت شما در مقایسه با بسته بندی ماژول ها ساده تر و آسان تر باشد. اگر نگران اندازه نصب شده برنامه خود نیستید و شرایط خاصی مانند ترجمه از TypeScript ندارید ، CDN می تواند انتخاب خوبی باشد.

به طور خلاصه:

  • آشنا و ساده
  • مناسب زمانی که اندازه برنامه نگران کننده نباشد
  • مناسب هنگامی که وب سایت شما از ابزارهای ساخت استفاده نمی کند.

انواع Firebase Web SDK

در حال حاضر ، Firebase دو نوع SDK وب ارائه می دهد:

  • یک بسته جاوا اسکریپت که از همه ویژگی های Firebase برای استفاده در مرورگر پشتیبانی می کند.
  • بسته نرم افزاری Node.js سمت سرویس گیرنده که از بسیاری-اما نه همه-ویژگی های Firebase پشتیبانی می کند. لیست مشاهده محیط های پشتیبانی .

هر دوی این انواع SDK برای کمک به ایجاد برنامه های وب یا برنامه های سرویس گیرنده برای دسترسی کاربر نهایی ، مانند در دسکتاپ Node.js یا برنامه اینترنت اشیا طراحی شده اند. اگر هدف شما این است برای تنظیم دسترسی اداری از محیط ممتاز (مانند سرور) استفاده از فایربیس محیط مدیریت SDK به جای.

تشخیص محیط با بسته بندی و چارچوب

وقتی Firebase Web SDK را با استفاده از npm نصب می کنید ، نسخه های JavaScript و Node.js هر دو نصب شده است. این بسته تشخیص دقیق محیط را برای فعال کردن بسته های مناسب برای برنامه شما فراهم می کند.

اگر کد خود را با استفاده از Node.js و require اظهارات، SDK بسته نرم افزاری گره خاص می یابد. در غیر این صورت، تنظیمات bundler شما باید به درستی تشخیص داده برای تشخیص میدان نقطه ورود در سمت راست خود را package.json فایل (برای مثال، main ، browser ، و یا module ). اگر با SDK خطاهای زمان اجرا را تجربه می کنید ، مطمئن شوید که بسته نرم افزاری شما پیکربندی شده است تا نوع بسته نرم افزاری مناسب را برای محیط خود اولویت بندی کند.

با شیء پیکربندی Firebase آشنا شوید

برای راه اندازی اولیه Firebase در برنامه خود ، باید پیکربندی پروژه Firebase برنامه خود را ارائه دهید. شما می توانید فایربیس شی پیکربندی خود را به دست آوردن در هر زمان.

  • ما توصیه نمی دستی ویرایش شیء پیکربندی خود را، به ویژه در بر داشت زیر مورد نیاز "گزینه فایربیس": apiKey ، projectId و appID . اگر برنامه خود را با مقادیر نامعتبر یا مفقود شده برای این "گزینه های Firebase" اولیه تنظیم کنید ، ممکن است کاربران برنامه شما با مشکلات جدی روبرو شوند.

  • اگر شما از گوگل آنالیز در پروژه Firebase خود را فعال کنید، شی پیکربندی خود را شامل زمینه 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",
};

کتابخانه های موجود

گزینه های اضافی راه اندازی

بارگذاری SDK های Firebase (از CDN)

می توانید گنجاندن SDK های Firebase را تا زمانی که کل صفحه بارگیری شود به تأخیر بیندازید. اگر شما به استفاده از نسخه 9 اسکریپت CDN را با <script type="module"> ، این رفتار پیش فرض است. اگر از اسکریپت های CDN نسخه 8 به عنوان ماژول استفاده می کنید ، این مراحل را برای به تعویق انداختن بارگذاری کامل کنید:

  1. اضافه کردن یک defer پرچم به هر script تگ برای فایربیس SDK ها، پس از آن تسلیم دهی اولیه از فایربیس استفاده از یک اسکریپت دوم، برای مثال:

    <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 در یک برنامه واحد استفاده کنید

در بیشتر موارد ، فقط باید Firebase را در یک برنامه واحد و پیش فرض راه اندازی کنید. می توانید از آن برنامه به دو روش معادل به 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();

نسخه وب 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 دیگری ذخیره کنید. یا ممکن است بخواهید یک پروژه را احراز هویت کنید در حالی که پروژه دوم احراز هویت نشده است.

SDK Firebase JavaScript به شما امکان می دهد چندین پروژه 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);

نسخه وب 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();

برای توسعه یک وب سرور محلی را اجرا کنید

اگر در حال ایجاد یک برنامه وب هستید ، برخی از قسمت های SDK Firebase JavaScript مستلزم این است که برنامه وب خود را از سرور و نه از سیستم فایل محلی ارائه دهید. شما می توانید با استفاده از فایربیس CLI برای اجرای یک سرور محلی است.

اگر قبلاً Firebase Hosting را برای برنامه خود راه اندازی کرده اید ، ممکن است چندین مرحله زیر را قبلاً انجام داده باشید.

برای ارائه برنامه وب خود ، از Firebase CLI ، یک ابزار خط فرمان استفاده می کنید.

  1. مشاهده اسناد فایربیس CLI به یاد بگیرند که چگونه به نصب CLI یا به روز رسانی به آخرین نسخه آن .

  2. پروژه Firebase خود را اولیه کنید دستور زیر را از ریشه فهرست برنامه محلی خود اجرا کنید:

    firebase init

  3. شروع سرور محلی برای توسعه است. دستور زیر را از ریشه فهرست برنامه محلی خود اجرا کنید:

    firebase serve

منابع منبع باز برای SDK های جاوا اسکریپت Firebase

Firebase از توسعه منبع باز پشتیبانی می کند و ما مشارکت و بازخورد جامعه را تشویق می کنیم.

SDK های جاوا اسکریپت Firebase

ترین فایربیس جاوا اسکریپت SDK ها به عنوان کتابخانه های منبع باز در ملاء عام ما را توسعه مخزن فایربیس گیتهاب .

نمونه های شروع سریع

Firebase مجموعه ای از نمونه های شروع سریع را برای اکثر API های Firebase در وب نگهداری می کند. پیدا کردن این quickstarts در عمومی ما فایربیس گیتهاب مخزن شروع سریع . برای استفاده از SDK های Firebase می توانید از این شروع سریع به عنوان کد نمونه استفاده کنید.