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

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

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

גרסאות 8 ו- 9 של SDK

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

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

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

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

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

במה נתמכים?

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

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

לסיכום:

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

גרסאות SDK של Firebase Web

נכון לעכשיו, Firebase מספק שתי גרסאות 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",
};

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

אפשרויות התקנה נוספות

עיכוב טעינת SDKs של Firebase (מתוך CDN)

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

  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

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

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

Firebase JavaScript SDKs

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

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

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