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

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

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

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

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

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

ה-API המודולרי משתלב היטב עם כלי build שמסירים קוד שלא נמצא בשימוש באפליקציה שלכם. התהליך הזה נקרא 'tree-shaking'. אפליקציות שפותחו באמצעות ה-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, כולל Remote 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 מספק אפשרויות אופטימיזציה לביצוע tree-shake (הסרת קוד שלא בשימוש) ולהחלת polyfills ממוקדים, שיכולים להקטין באופן משמעותי את גודל האפליקציה. הטמעה של התכונות האלה עשויה להוסיף מורכבות מסוימת לשרשרת ההגדרות והבנייה, אבל יש מגוון כלים פופולריים לממשק שורת פקודה שיכולים לעזור לצמצם את המורכבות. הכלים האלה כוללים את Angular,‏ React,‏ Vue,‏ Next ועוד.

בקצרה:

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

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

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

בקצרה:

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

וריאציות של Firebase web SDK

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

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

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

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

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

מידע על אובייקט ההגדרה של 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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  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)

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

  1. מוסיפים תג defer לכל תג script של Firebase SDK, ואז דוחים את ההפעלה של 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 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();
app_default_init_options.js

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();
firebaseapp.js

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

‫Firebase JavaScript SDK מאפשר לכם לאתחל ולהשתמש בכמה פרויקטים של 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);
app_multi_project_init_options.js

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();
firebaseapp.js

הפעלת שרת אינטרנט מקומי לצורך פיתוח

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

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

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

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

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

    firebase init

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

    firebase serve

מקורות מידע בקוד פתוח ל-Firebase JavaScript SDKs

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

Firebase JavaScript SDKs

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

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

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