Catch up on everthing we announced at this year's Firebase Summit. Learn more

למידע נוסף על אינטרנט ו- Firebase

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

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

SDK גרסאות 8 ו-9

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

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

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

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

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

מה נתמך?

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

הוסף SDK עם 8.0 (מרווח שמות) 9.0 (מודולארי)
npm
  • עבור JavaScript
  • עבור Node.js
  • עבור JavaScript
  • עבור Node.js
CDN (רשת אספקת תוכן)
  • עבור JavaScript
  • עבור JavaScript
כתובות אתרים לאירוח
  • עבור JavaScript
  • עבור Node.js

לקבלת מידע נוסף, ראה דרכים להוסיף בערכות פיתוח Web App שלך ואת Firebase אינטרנט 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 אל App JavaScript שלך . שאר חלק זה מכיל מידע שיעזור לך לבחור מבין האפשרויות הזמינות.

npm

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

שימוש NPM עם מודול bundler כגון webpack או אוסף מספק אפשרויות אופטימיזציה "עץ-שייק" קוד בשימוש ולהחיל polyfills ממוקד, אשר יכול להפחית את טביעת הרגל גודל משמעותי של האפליקציה שלך. הטמעת תכונות אלו עשויה להוסיף קצת מורכבות לתצורה ולבניית שרשרת, אך כלים שונים של CLI מיינסטרים יכולים לעזור להפחית זאת. כלים אלה כוללים זוויתית , להגיב , Vue , בא , ואחרים.

לסיכום:

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

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

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

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

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

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

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

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

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

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

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

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

עיכוב בטעינה של Firebase SDK (מ-CDN)

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

  1. הוספת defer דגל לכל script תג עבור מערכות ה- SDK Firebase, אז לדחות את האתחול של Firebase באמצעות סקריפט השני, למשל:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/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 מאותה אפליקציה בשתי דרכים שוות:

גרסת אינטרנט 9

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();

גרסת אינטרנט 8

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

גרסת אינטרנט 9

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);

גרסת אינטרנט 8

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

    firebase init

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

    firebase serve

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

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

Firebase JavaScript SDK

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

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

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