למידע נוסף על Web ו-Firebase

בזמן שאתה מפתח אפליקציית אינטרנט באמצעות Firebase, אתה עלול להיתקל במושגים לא מוכרים, או תחומים שבהם אתה צריך מידע נוסף כדי לקבל את ההחלטות הנכונות עבור הפרויקט שלך. עמוד זה נועד לענות על שאלות אלו או להפנות אותך למשאבים למידע נוסף.

אם יש לך שאלות לגבי נושא שאינו מכוסה בדף זה, בקר באחת מהקהילות המקוונות שלנו. אנו גם נעדכן את הדף הזה עם נושאים חדשים מעת לעת, אז בדוק שוב כדי לראות אם הוספנו את הנושא שאתה רוצה ללמוד עליו.

גרסאות SDK: מרווחות שמות ומודולריות

Firebase מספקת שני משטחי API עבור אפליקציות אינטרנט:

  • JavaScript - מרווח שמות. זהו ממשק ה-JavaScript ש-Firebase שמרה עליו במשך שנים רבות ומוכר למפתחי אינטרנט עם אפליקציות Firebase ישנות יותר. מכיוון שה-API ברווח השמות אינו נהנה מתמיכה מתמשכת בתכונות חדשות, רוב האפליקציות החדשות צריכות במקום זאת לאמץ את ה-API המודולרי.
  • JavaScript - מודולרי . SDK זה מבוסס על גישה מודולרית המספקת גודל SDK מופחת ויעילות רבה יותר עם כלי בניית JavaScript מודרניים כגון webpack או Rollup .

ה-API המודולרי משתלב היטב עם כלי בנייה שמסירים קוד שאינו בשימוש באפליקציה שלך, תהליך המכונה "טלטול עצים". אפליקציות שנבנו עם SDK זה נהנות מטביעות רגל מופחתות מאוד. ה-API עם רווח שמות, למרות שהוא זמין כמודול, אין לו מבנה מודולרי לחלוטין ואינו מספק את אותה מידה של הפחתת גודל.

למרות שרוב ה-API המודולרי עוקב אחר אותם דפוסים כמו ה-API עם רווח שמות, הארגון של הקוד שונה. בדרך כלל, ה-API עם מרחב שמות מכוון לתבנית מרחב שמות ושירות, בעוד שה-API המודולרי מכוון לפונקציות בדידות. לדוגמה, שרשרת הנקודות של ממשק ה-API עם רווחי שמות, כגון firebaseApp.auth() , מוחלף ב-API המודולרי בפונקציה getAuth() יחידה שלוקחת את firebaseApp ומחזירה מופע Authentication.

משמעות הדבר היא שיישומי אינטרנט שנוצרו עם ה-API עם רווח שמות דורשים עיבוד מחדש על מנת לנצל את היתרונות של עיצוב אפליקציות מודולרי. עיין במדריך השדרוג לפרטים נוספים.

JavaScript - API מודולרי לאפליקציות חדשות

אם אתה מתחיל בשילוב חדש עם Firebase, אתה יכול להצטרף ל-API המודולרי כאשר אתה מוסיף ומאתחל את ה-SDK .

כשאתה מפתח את האפליקציה שלך, זכור שהקוד שלך יהיה מאורגן בעיקר סביב פונקציות . ב-API המודולרי, השירותים מועברים כארגומנט הראשון, ולאחר מכן הפונקציה משתמשת בפרטי השירות כדי לעשות את השאר. לדוגמה:

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

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

לדוגמאות ופרטים נוספים, עיין במדריכים לכל תחום מוצר וכן בתיעוד העזר המודולרי של API .

דרכים להוסיף את ערכות ה-SDK של האינטרנט לאפליקציה שלך

Firebase מספקת ספריות JavaScript עבור רוב מוצרי Firebase, כולל Config מרחוק, FCM ועוד. האופן שבו אתה מוסיף Firebase SDK לאפליקציית האינטרנט שלך תלוי באיזה כלי אתה משתמש עם האפליקציה שלך (כמו מאגד מודולים).

אתה יכול להוסיף כל אחת מהספריות הזמינות לאפליקציה שלך באמצעות אחת מהשיטות הנתמכות:

  • npm (עבור חבילות מודולים)
  • CDN (רשת אספקת תוכן)

להוראות הגדרה מפורטות, ראה הוסף Firebase לאפליקציית JavaScript שלך . שאר החלק הזה מכיל מידע שיעזור לך לבחור מבין האפשרויות הזמינות.

npm

הורדת חבילת Firebase npm (הכוללת חבילות דפדפן וגם חבילות Node.js) מספקת לך עותק מקומי של Firebase SDK, שעשוי להיות נחוץ עבור יישומים שאינם דפדפנים כגון אפליקציות Node.js, React Native או Electron. ההורדה כוללת חבילות Node.js ו-React Native כאופציה עבור חלק מהחבילות. החבילות של Node.js נחוצות לשלב הרינדור בצד השרת (SSR) של מסגרות SSR.

שימוש ב-npm עם מאגד מודולים כגון webpack או Rollup מספק אפשרויות אופטימיזציה כדי "לנער" קוד שאינו בשימוש ולהחיל מילוי ממוקד, מה שיכול להקטין מאוד את טביעת הרגל של האפליקציה שלך. הטמעת תכונות אלה עשויה להוסיף קצת מורכבות לתצורה ולשרשרת הבנייה שלך, אבל כלים שונים של CLI מיינסטרים יכולים לעזור להפחית זאת. כלים אלה כוללים את Angular , React , Vue , Next ואחרים.

לסיכום:

  • מספק אופטימיזציה של גודל אפליקציה חשובה
  • כלי עבודה חזקים זמין לניהול מודולים
  • נדרש עבור SSR עם Node.js

CDN (רשת אספקת תוכן)

הוספת ספריות המאוחסנות ב-CDN של Firebase היא שיטת הגדרת SDK פשוטה שעשויה להיות מוכרת למפתחים רבים. שימוש ב-CDN כדי להוסיף את ה-SDKs, לא תזדקק לכלי בנייה, ושרשרת הבנייה שלך עשויה להיות פשוטה וקלה יותר לעבודה בהשוואה לאונדלר מודולים. אם אינך מודאג במיוחד מהגודל המותקן של האפליקציה שלך ואין לך דרישות מיוחדות כגון תעבורה מ-TypeScript, אז CDN יכול להיות בחירה טובה.

לסיכום:

  • מוכר ופשוט
  • מתאים כאשר גודל האפליקציה אינו מהווה דאגה גדולה
  • מתאים כאשר האתר שלך אינו משתמש בכלי בנייה.

גרסאות Firebase Web SDK

ניתן להשתמש ב-Web SDK של Firebase גם ביישומי דפדפן וגם ב-Node. עם זאת, מספר מוצרים אינם זמינים בסביבות Node. עיין ברשימת הסביבות הנתמכות .

חלק מ-SDK של מוצרים מספקים גרסאות נפרדות של דפדפן ו-Node, שכל אחת מהן מסופקת בפורמטים של ESM וגם ב-CJS, וחלק מה-SDK של מוצרים אפילו מספקות גרסאות של Cordova או React Native. Web SDK מוגדר לספק את הגרסה הנכונה בהתבסס על תצורת הכלים או הסביבה שלך ולא אמורה לדרוש בחירה ידנית ברוב המקרים. כל גרסאות ה-SDK נועדו לסייע בבניית אפליקציות אינטרנט או אפליקציות לקוח לגישה של משתמש קצה, כגון ביישום Node.js שולחני או IoT. אם המטרה שלך היא להגדיר גישה מנהלתית מסביבות מורשות (כגון שרתים), השתמש במקום זאת ב- Firebase Admin SDK .

איתור סביבה עם חבילות ומסגרות

כאשר אתה מתקין את Firebase Web SDK באמצעות npm, גרסאות JavaScript ו-Node.js מותקנות שתיהן. החבילה מספקת זיהוי סביבה מפורט כדי לאפשר את החבילות הנכונות עבור היישום שלך.

אם הקוד שלך משתמש require Node.js, ה-SDK מוצא את החבילה הספציפית לצומת. אחרת, ההגדרות של ה-bunler שלך חייבות להיות מוגדרות כהלכה כדי לזהות את שדה נקודת הכניסה הנכון בקובץ package.json שלך (לדוגמה, main , browser או module ). אם אתה נתקל בשגיאות זמן ריצה עם ה-SDK, בדוק כדי לוודא שה-Bundler שלך מוגדר לתעדוף סוג החבילה הנכון עבור הסביבה שלך.

למד על אובייקט התצורה של Firebase

כדי לאתחל את Firebase באפליקציה שלך, עליך לספק את תצורת פרויקט Firebase של האפליקציה שלך. אתה יכול להשיג את אובייקט התצורה שלך ב-Firebase בכל עת.

  • אנו לא ממליצים לערוך ידנית את אובייקט התצורה שלך, במיוחד את "אפשרויות Firebase" הנדרשות הבאות: apiKey , projectId ו- appID . אם אתה מאתחל את האפליקציה שלך עם ערכים לא חוקיים או חסרים עבור "אפשרויות Firebase" הנדרשות האלה, המשתמשים באפליקציה שלך עלולים להיתקל בבעיות חמורות.

  • אם הפעלת את Google Analytics בפרויקט Firebase שלך, אובייקט התצורה שלך מכיל את השדה measurementId . למד עוד על שדה זה בדף תחילת העבודה של Analytics .

  • אם תפעיל את Google Analytics או Realtime Database לאחר יצירת Firebase Web App, ודא שאובייקט התצורה של 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 (מ-CDN)

אתה יכול לדחות את הכללת ערכות ה-SDK של Firebase עד שהדף כולו ייטען. אם אתה משתמש בסקריפטים מודולריים של CDN של API עם <script type="module"> , זוהי התנהגות ברירת המחדל. אם אתה משתמש בסקריפטים עם רווחי CDN כמודול, השלם את השלבים הבאים כדי לדחות את הטעינה:

  1. הוסף דגל defer לכל תג script עבור Firebase SDKs, ולאחר מכן דחה את האתחול של 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 modular API

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 namespaced API

// 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 אחר. לחלופין, ייתכן שתרצה לאמת פרויקט אחד תוך שמירה על אימות של פרויקט שני.

ה-SDK של Firebase JavaScript מאפשר לך לאתחל ולהשתמש בפרוייקטים מרובים של Firebase באפליקציה אחת בו-זמנית, כאשר כל פרויקט משתמש במידע התצורה של Firebase משלו.

Web modular API

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 namespaced API

// 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 CLI כדי להפעיל שרת מקומי.

אם כבר הגדרת Firebase Hosting עבור האפליקציה שלך, ייתכן שכבר השלמת כמה מהשלבים הבאים.

כדי לשרת את אפליקציית האינטרנט שלך, תשתמש ב-Firebase CLI, כלי שורת פקודה.

  1. בקר בתיעוד של Firebase CLI כדי ללמוד כיצד להתקין את ה-CLI או לעדכן לגרסה העדכנית ביותר שלו .

  2. אתחל את פרויקט Firebase שלך. הפעל את הפקודה הבאה מהשורש של ספריית האפליקציה המקומית שלך:

    firebase init

  3. הפעל את השרת המקומי לפיתוח. הפעל את הפקודה הבאה מהשורש של ספריית האפליקציה המקומית שלך:

    firebase serve

משאבי קוד פתוח עבור Firebase JavaScript SDK

Firebase תומך בפיתוח קוד פתוח, ואנו מעודדים תרומות ומשוב מהקהילה.

Firebase JavaScript SDK

רוב ערכות Firebase JavaScript SDK מפותחות כספריות קוד פתוח במאגר Firebase GitHub הציבורי שלנו.

דוגמאות להתחלה מהירה

Firebase שומרת על אוסף של דוגמאות התחלה מהירה עבור רוב ממשקי ה-API של Firebase באינטרנט. מצא את ההתחלה המהירה האלה במאגר ההתחלה המהיר הציבורי שלנו Firebase GitHub . אתה יכול להשתמש בהתחלות מהירות אלה כקוד לדוגמה לשימוש ב-Firebase SDK.