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

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

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

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

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

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

ה-API המודולרי משתלב היטב עם כלי build שמסירים קוד שלא נעשה בו שימוש באפליקציה, תהליך שנקרא 'ניפוי עץ'. אפליקציות שנוצרות באמצעות ה-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 ועוד. האופן שבו מוסיפים ערכות SDK של Firebase לאפליקציית האינטרנט תלוי בכלים שבהם אתם משתמשים באפליקציה (כמו חבילה של מודולים).

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

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

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

npm

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

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

בקצרה:

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

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

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

בקצרה:

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

וריאנטים של Firebase Web SDK

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

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

זיהוי סביבה באמצעות חבילות ו-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)

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

ערכת ה-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);
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 מחייבים להציג את אפליקציית האינטרנט שלכם משרת ולא ממערכת הקבצים המקומית. אפשר להשתמש ב-CLI של Firebase כדי להפעיל שרת מקומי.

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

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

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

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

    firebase init

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

    firebase serve

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

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

ערכות Firebase JavaScript SDK

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

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

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