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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

npm

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

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

בקצרה:

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

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

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

אם הקוד שלכם משתמש בהצהרות 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 בכל שלב.

זה הפורמט של אובייקט config שכל השירותים מופעלים בו (הערכים האלה מאוכלסים באופן אוטומטי):

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)

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

ערכת ה-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 לאפליקציה, יכול להיות שכבר ביצעתם כמה מהשלבים הבאים.

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

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

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

    firebase init

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

    firebase serve

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

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

ערכות Firebase JavaScript SDK

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

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

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