הסבר על Firebase לאתרים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ב-Firebase יש ספריות JavaScript לרוב מוצרי Firebase, כולל Remote Config,‏ FCM ועוד. הדרך שבה אתם מוסיפים ערכות SDK של Firebase לאפליקציית האינטרנט תלויה בכלי שבו אתם משתמשים באפליקציה (כמו bundler למודולים).

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

  • npm (לחבילות מודולים)
  • CDN (רשת להעברת תוכן)

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

npm

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

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

בקצרה:

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

CDN (רשת להעברת תוכן)

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

בקצרה:

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

וריאנטים של 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.

זיהוי סביבה באמצעות Bundleers ו-frameworks

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

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

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

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

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

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

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

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

  1. מוסיפים דגל defer לכל תג script של ערכות ה-SDK של Firebase, ואז מעכבים את האינטראקציה הראשונית של 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

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

// 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.

Web

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

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

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

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

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

  2. מפעילים את פרויקט Firebase. מריצים את הפקודה הבאה מהרמה הבסיסית (root) של ספריית האפליקציות המקומית:

    firebase init

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

    firebase serve

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

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

ערכות Firebase JavaScript SDK

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

דוגמאות למתחילים

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