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

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

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

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

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

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

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

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

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

בקצרה:

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

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

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

בקצרה:

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

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

אפשר להשתמש ב-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 עד שהדף כולו ייטען. אם אתם משתמשים בסקריפטים של CDN API מודולריים עם <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();

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

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

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

אם אתם מפתחים אפליקציית אינטרנט, חלקים מסוימים ב-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 SDK

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

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

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