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

בקצרה:

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

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

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

בקצרה:

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

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

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

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

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

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

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

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

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

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

    firebase init

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

    firebase serve

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

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

Firebase JavaScript SDKs

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

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

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