שדרג מגרסה 8 ל-Web SDK המודולרי

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

מדריך זה מניח שאתם מכירים את גרסה 8 ושתנצלו מאגד מודולים כגון webpack או Rollup לשדרוג ופיתוח מתמשך של גרסה 9.

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

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

על ספריות התוכנה

ישנם שני סוגים של ספריות זמינים עבור Firebase Web SDK גרסה 9:

• מודולרי - משטח API חדש שנועד להקל על ניעור עצים (הסרת קוד שלא נעשה בו שימוש) כדי להפוך את אפליקציית האינטרנט שלך לקטנה ומהירה ככל האפשר.
• Compat - משטח API מוכר התואם באופן מלא לגרסה 8 SDK, המאפשר לך לשדרג לגרסה 9 מבלי לשנות את כל קוד Firebase שלך ​​בבת אחת. לספריות Compat יש מעט יתרונות בגודל או בביצועים על פני מקבילותיהן בגרסה 8.

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

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

לגבי תהליך השדרוג

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

1. הוסף את ספריות גרסה 9 ואת ספריות התואם לאפליקציה שלך.
2. עדכן הצהרות ייבוא ​​בקוד שלך ל-v9 compat.
3. מחזיר קוד למוצר בודד (לדוגמה, אימות) לסגנון המודולרי.
4. אופציונלי: בשלב זה, הסר את ספריית התאמת האימות וקוד התאמת עבור האימות כדי לממש את היתרון בגודל האפליקציה עבור אימות לפני שתמשיך.
5. משחזר פונקציות עבור כל מוצר (לדוגמה, Cloud Firestore, FCM וכו') לסגנון המודולרי, קומפילציה ובדיקה עד להשלמת כל האזורים.
6. עדכן את קוד האתחול לסגנון המודולרי.
7. הסר את כל הצהרות ה-compat וקוד ה-comat שנותרו בגרסה 9 מהאפליקציה שלך.

קבל את גרסה 9 SDK

כדי להתחיל, קבל את ספריות גרסה 9 וספריות תואם באמצעות npm:

npm i firebase@9.17.2

# OR

yarn add firebase@9.17.2

עדכן יבוא ל-v9 compat

על מנת לשמור על תפקוד הקוד שלך לאחר עדכון התלות שלך מ-v8 ל-v9 בטא, שנה את הצהרות הייבוא ​​שלך כדי להשתמש בגרסת "compat" של כל ייבוא. לדוגמה:

לפני: גרסה 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

אחרי: גרסה 9 compat

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Refactor לסגנון המודולרי

בעוד שממשקי ה-API של גרסה 8 מבוססים על מרחב שמות ודפוס שירות משורשר נקודות, הגישה המודולרית של גרסה 9 פירושה שהקוד שלך יהיה מאורגן בעיקר סביב פונקציות . בגרסה 9, חבילת firebase/app וחבילות אחרות לא מחזירות ייצוא מקיף שמכיל את כל השיטות מהחבילה. במקום זאת, החבילות מייצאות פונקציות בודדות.

בגרסה 9, השירותים מועברים כארגומנט הראשון, ולאחר מכן הפונקציה משתמשת בפרטי השירות כדי לעשות את השאר. הבה נבחן כיצד זה עובד בשתי דוגמאות שקוראות מחדש ל-Authentication ו-Cloud Firestore APIs.

דוגמה 1: עיבוד מחדש של פונקציית אימות

לפני: גרסה 9 compat

קוד התאמת גרסה 9 זהה לקוד גרסה 8, אך הייבוא ​​השתנה.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

אחרי: גרסה 9 מודולרית

הפונקציה getAuth לוקחת את firebaseApp כפרמטר הראשון שלה. הפונקציה onAuthStateChanged אינה auth ממופע האימות כפי שהיא תהיה בגרסה 8; במקום זאת, זוהי פונקציה חינמית שלוקחת את ה- auth כפרמטר הראשון שלה.

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

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

עדכון הטיפול בשיטת Auth getRedirectResult

גרסה 9 מציגה שינוי פורץ ב- getRedirectResult . כאשר לא נקראת פעולת הפניה מחדש, גרסה 9 מחזירה null בניגוד לגרסה 8, שהחזירה UserCredential עם משתמש null .

לפני: גרסה 9 compat

const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
  return null;
}
return result;

אחרי: גרסה 9 מודולרית

const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
  return null;
}
return result;

דוגמה 2: עיבוד מחדש של פונקציית Cloud Firestore

לפני: גרסה 9 compat

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

אחרי: גרסה 9 מודולרית

הפונקציה getFirestore לוקחת את firebaseApp כפרמטר הראשון שלה, שהוחזר מ- initializeApp בדוגמה קודמת. שימו לב כיצד הקוד ליצירת שאילתה שונה מאוד בגרסה 9; אין שרשור, ושיטות כגון query או where נחשפות כעת כפונקציות חינמיות.

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

עדכן הפניות ל-Firestore DocumentSnapshot.exists

גרסה 9 מציגה שינוי שבירה שבו הנכס firestore.DocumentSnapshot.exists שונה לשיטה . הפונקציונליות זהה במהותה (בודק אם קיים מסמך) אך עליך לשחזר את הקוד שלך כדי להשתמש בשיטת v9 כפי שמוצג:

לפני: גרסה 9 compat

if (snapshot.exists) {
  console.log("the document exists");
}

אחרי: גרסה 9 מודולרית

if (snapshot.exists()) {
  console.log("the document exists");
}

דוגמה 3: שילוב של סגנונות קוד גרסה 8 וגרסה 9

השימוש בספריות התואם במהלך השדרוג מאפשר לך להמשיך ולהשתמש בקוד גרסה 8 לצד קוד ששוחזר לגרסה 9. פירוש הדבר שאתה יכול לשמור על קוד גרסה 8 הקיים עבור Cloud Firestore בזמן שאתה מחזיר את האימות או קוד Firebase SDK אחר לסגנון גרסה 9, ועדיין הידור בהצלחה את האפליקציה שלך עם שני סגנונות הקוד. הדבר נכון לקוד גרסה 8 וגרסה 9 בתוך מוצר כגון Cloud Firestore; סגנונות קוד חדשים וישנים יכולים להתקיים במקביל, כל עוד אתה מייבא את חבילות ה-compat:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

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

עדכן את קוד האתחול

עדכן את קוד האתחול של האפליקציה שלך לשימוש בתחביר חדש בגרסה 9 מודולרית. חשוב לעדכן את הקוד הזה לאחר שתשלים את כל הקוד מחדש באפליקציה שלך; הסיבה לכך היא ש- firebase.initializeApp() מאתחל מצב גלובלי הן עבור ה-APIs compat והן עבור ה-API המודולרי, בעוד שהפונקציה modular initializeApp() מאתחלת רק את המצב עבור מודולרי.

לפני: גרסה 9 compat

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

אחרי: גרסה 9 מודולרית

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

הסר את קוד הקומפט

כדי לממש את יתרונות הגודל של ה-SDK המודולרי של גרסה 9, בסופו של דבר, עליך להמיר את כל הפעלות לסגנון המודולרי המוצג למעלה ולהסיר את כל הצהרות import "firebase/compat/* מהקוד שלך. כשתסיים, לא אמור להיות שום הפניות נוספות ל- firebase.* מרחב שמות גלובלי או כל קוד אחר בסגנון גרסה 8 SDK.

שימוש בספריית ה-compat מהחלון

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

<script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

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

יתרונות ומגבלות של גרסה 9

לגרסה 9 המודולרית במלואה יש את היתרונות האלה על פני גרסאות קודמות:

• גרסה 9 מאפשרת גודל אפליקציה מופחת באופן דרמטי. הוא מאמץ את הפורמט המודרני של JavaScript Module, המאפשר שיטות "טלטול עצים" שבהן אתה מייבא רק את החפצים שהאפליקציה שלך צריכה. בהתאם לאפליקציה שלך, רעידות עצים עם גרסה 9 יכולות לגרום ל-80% פחות קילובייט מאשר אפליקציה דומה שנבנתה באמצעות גרסה 8.
• גרסה 9 תמשיך ליהנות מפיתוח תכונות מתמשך, בעוד שגרסה 8 תוקפא בשלב מסוים בעתיד.