למידע נוסף על Web ו-Firebase

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

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

SDK גרסאות 8 ו-9

Firebase מספקת שתי גרסאות SDK עבור אפליקציות אינטרנט:

• גרסה 8. זהו ממשק ה-JavaScript ש-Firebase שומרת עליו כבר כמה שנים ומוכר למפתחי Web עם אפליקציות Firebase קיימות. מכיוון ש-Firebase תסיר את התמיכה בגרסה זו לאחר מחזור שחרור גדול אחד, אפליקציות חדשות צריכות במקום זאת לאמץ את גרסה 9.
• גרסה מודולרית 9 . SDK זה מציג גישה מודולרית המספקת גודל SDK מופחת ויעילות רבה יותר עם כלי בנייה מודרניים של JavaScript כגון webpack או Rollup .

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

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

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

מה נתמך?

בעוד שלגרסה 8 וגרסה 9 יש סגנונות קוד שונים, הן מספקות תמיכה דומה מאוד לתכונות ואפשרויות של Firebase. כפי שנתאר בפירוט במדריך זה, שתי גרסאות ה-SDK תומכות בגרסאות JavaScript ו-Node.js יחד עם מספר אפשרויות להוספה/התקנה של ה-SDK.

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

גרסה 9 לאפליקציות חדשות

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

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

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

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

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

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

Firebase מספקת ספריות JavaScript עבור רוב מוצרי Firebase, כולל Config מרחוק, FCM ועוד. האופן שבו אתה מוסיף Firebase SDK לאפליקציית האינטרנט שלך תלוי באיזה כלי אתה משתמש עם האפליקציה שלך (כמו מאגד מודולים), או אם האפליקציה שלך פועלת בסביבה שאינה דפדפן כגון Node.js.

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

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

לסיכום:

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

CDN (רשת אספקת תוכן)

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

לסיכום:

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

גרסאות Firebase Web SDK

נכון לעכשיו, Firebase מספקת שתי גרסאות Web SDK:

• חבילת JavaScript התומכת בכל תכונות Firebase לשימוש בדפדפן.
• חבילת Node.js בצד לקוח התומכת בתכונות רבות - אך לא בכולן - של Firebase. עיין ברשימת הסביבות הנתמכות .

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

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

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

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

למד על אובייקט התצורה של Firebase

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

• אנו לא ממליצים לערוך ידנית את אובייקט התצורה שלך, במיוחד את "אפשרויות Firebase" הנדרשות הבאות: apiKey , projectId ו- appID . אם אתה מאתחל את האפליקציה שלך עם ערכים לא חוקיים או חסרים עבור "אפשרויות Firebase" הנדרשות האלה, המשתמשים באפליקציה שלך עלולים להיתקל בבעיות חמורות.

• אם הפעלת את Google Analytics בפרויקט Firebase שלך, אובייקט התצורה שלך מכיל את השדה measurementId . למד עוד על שדה זה בדף תחילת העבודה של Analytics .

• אם תפעיל את Google Analytics או Realtime Database לאחר יצירת Firebase Web App, ודא שאובייקט התצורה של 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",
};

ספריות זמינות

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-analytics.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app-check.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-functions.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-installations.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-storage.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-performance.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-remote-config.js"></script>

<script src="/__/firebase/8.10.1/firebase-app.js"></script>

<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>

<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>

<script src="/__/firebase/8.10.1/firebase-auth.js"></script>

<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>

<script src="/__/firebase/8.10.1/firebase-functions.js"></script>

<script src="/__/firebase/8.10.1/firebase-installations.js"></script>

<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

<script src="/__/firebase/8.10.1/firebase-storage.js"></script>

<script src="/__/firebase/8.10.1/firebase-performance.js"></script>

<script src="/__/firebase/8.10.1/firebase-database.js"></script>

<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

<script src="/__/firebase/8.10.1/firebase.js"></script>

אפשרויות הגדרה נוספות

עיכוב טעינה של ערכות פיתוח התוכנה Firebase (מ-CDN)

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

1. הוסף דגל defer לכל תג script עבור Firebase SDKs, ולאחר מכן דחה את האתחול של 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 מאותה אפליקציה בשתי דרכים שוות:

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

// 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 משלו.

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

// 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 שלך. הפעל את הפקודה הבאה מהשורש של ספריית האפליקציה המקומית שלך:

   firebase init

   מה עושה פקודת האתחול הזו?

   • מקשר את ספריית האפליקציות המקומית שלך ל-Firebase

   • יוצר קובץ firebase.json (קובץ נדרש עבור Firebase Hosting)

   • מבקש ממך לציין ספריית שורש ציבורית המכילה את הקבצים הסטטיים הציבוריים שלך (HTML, CSS, JS וכו')

     שם ברירת המחדל של הספרייה ש-Firebase מחפשת הוא "ציבורי". תוכל גם להגדיר את הספרייה הציבורית מאוחר יותר על ידי שינוי ישיר של קובץ firebase.json שלך.

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

   firebase serve

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

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

Firebase JavaScript SDK

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

דוגמאות להתחלה מהירה

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