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

อัปเกรดจากเวอร์ชัน 8 เป็นโมดูล Web SDK

แอปที่ใช้ Firebase Web SDK เวอร์ชัน 8 หรือเก่ากว่านั้นควรพิจารณาย้ายข้อมูลเป็นเวอร์ชัน 9 โดยใช้คำแนะนำในคู่มือนี้

คู่มือนี้อนุมานว่าคุณมีความคุ้นเคยกับ 8 รุ่นและที่คุณจะใช้ประโยชน์จากโมดูล Bundler เช่น webpack หรือ ยกเลิกโปรแกรม สำหรับการอัพเกรดและรุ่นอย่างต่อเนื่อง 9 พัฒนา

ขอแนะนำให้ใช้ชุดรวมโมดูลในสภาพแวดล้อมการพัฒนาของคุณ หากคุณไม่ใช้งาน คุณจะไม่สามารถใช้ประโยชน์จากประโยชน์หลักของเวอร์ชัน 9 ในการลดขนาดแอปได้ คุณจะต้อง NPM หรือ เส้นด้าย ในการติดตั้ง SDK ได้

ขั้นตอนการอัปเกรดในคู่มือนี้จะอิงตามเว็บแอปในจินตนาการที่ใช้ SDK การตรวจสอบสิทธิ์และ Cloud Firestore การทำงานผ่านตัวอย่างจะช่วยให้คุณเข้าใจแนวคิดและขั้นตอนในทางปฏิบัติที่จำเป็นในการอัปเกรด Firebase Web SDK ที่รองรับทั้งหมดได้

เกี่ยวกับไลบรารีที่ใช้ร่วมกัน

มีไลบรารี่สองประเภทสำหรับ Firebase Web SDK เวอร์ชัน 9:

  • Modular - พื้นผิว API ใหม่ที่ออกแบบมาเพื่ออำนวยความสะดวกต้นไม้สั่น (การกำจัดของรหัสที่ไม่ได้ใช้) เพื่อให้เว็บแอปของคุณเป็นขนาดเล็กและเร็วที่สุดเท่าที่เป็นไปได้
  • compat - พื้นผิว API คุ้นเคยซึ่งเป็นอย่างเข้ากันได้กับรุ่น 8 SDK ช่วยให้คุณสามารถปรับรุ่นเป็นรุ่นที่ 9 โดยไม่ต้องเปลี่ยนทั้งหมดของรหัส Firebase คุณในครั้งเดียว ไลบรารีที่เข้ากันได้มีข้อได้เปรียบด้านขนาดหรือประสิทธิภาพเพียงเล็กน้อยหรือไม่มีเลยเมื่อเทียบกับเวอร์ชัน 8 ของพวกเขา

คู่มือนี้อนุมานว่าคุณจะใช้ประโยชน์จากไลบรารีที่ใช้ร่วมกันเวอร์ชัน 9 เพื่ออำนวยความสะดวกในการอัพเกรดของคุณ ไลบรารีเหล่านี้อนุญาตให้คุณใช้โค้ดเวอร์ชัน 8 ต่อไปควบคู่ไปกับโค้ดที่ปรับโครงสร้างใหม่สำหรับเวอร์ชัน 9 ซึ่งหมายความว่าคุณสามารถคอมไพล์และดีบักแอปของคุณได้ง่ายขึ้นเมื่อคุณทำงานผ่านกระบวนการอัปเกรด

สำหรับแอปที่มีการเปิดเผย Firebase Web SDK เพียงเล็กน้อย เช่น แอปที่เรียกใช้ Authentication API อย่างง่าย อาจเป็นประโยชน์ในการปรับโครงสร้างโค้ดเวอร์ชัน 8 ใหม่โดยไม่ต้องใช้ไลบรารีที่ใช้ร่วมกันเวอร์ชัน 9 หากคุณกำลังอัปเกรดแอปดังกล่าว คุณสามารถปฏิบัติตามคำแนะนำในคู่มือนี้สำหรับ "เวอร์ชัน 9 โมดูลาร์" โดยไม่ต้องใช้ไลบรารีที่ใช้ร่วมกันได้

เกี่ยวกับขั้นตอนการอัพเกรด

แต่ละขั้นตอนของกระบวนการอัปเกรดมีการกำหนดขอบเขตไว้เพื่อให้คุณสามารถแก้ไขซอร์สโค้ดสำหรับแอปของคุณให้เสร็จสิ้น จากนั้นคอมไพล์และรันแอปโดยไม่เกิดความขัดข้อง โดยสรุป สิ่งที่คุณต้องทำเพื่ออัปเกรดแอปมีดังต่อไปนี้

  1. เพิ่มไลบรารีเวอร์ชัน 9 และไลบรารีที่ใช้ร่วมกันในแอปของคุณ
  2. อัปเดตคำสั่งการนำเข้าในโค้ดของคุณเป็น v9 ที่เข้ากันได้
  3. รหัส Refactor สำหรับผลิตภัณฑ์เดียว (เช่น Authentication) เป็นสไตล์โมดูลาร์
  4. ไม่บังคับ: ณ จุดนี้ ให้ลบไลบรารีที่เข้ากันได้กับการรับรองความถูกต้องและรหัสที่เข้ากันได้สำหรับการตรวจสอบสิทธิ์ เพื่อให้ทราบถึงประโยชน์ของขนาดแอปสำหรับการตรวจสอบสิทธิ์ก่อนดำเนินการต่อ
  5. ฟังก์ชันรีแฟคเตอร์สำหรับแต่ละผลิตภัณฑ์ (เช่น Cloud Firestore, FCM เป็นต้น) เป็นสไตล์โมดูลาร์ รวบรวมและทดสอบจนกว่าพื้นที่ทั้งหมดจะเสร็จสมบูรณ์
  6. อัปเดตโค้ดเริ่มต้นเป็นสไตล์โมดูลาร์
  7. ลบคำสั่งความเข้ากันได้ของเวอร์ชัน 9 ที่เหลือและโค้ดที่เข้ากันได้ออกจากแอปของคุณ

รับเวอร์ชัน 9 SDK

ในการเริ่มต้น รับไลบรารีเวอร์ชัน 9 และไลบรารีที่ใช้ร่วมกันโดยใช้ npm:

npm i firebase@9.6.0

# OR

yarn add firebase@9.6.0

อัปเดตการนำเข้าเป็น v9 compat

เพื่อให้โค้ดของคุณทำงานต่อไปหลังจากอัปเดตการพึ่งพาของคุณจาก v8 เป็น v9 beta ให้เปลี่ยนคำสั่งนำเข้าของคุณเพื่อใช้เวอร์ชัน "compat" ของการนำเข้าแต่ละครั้ง ตัวอย่างเช่น:

ก่อนหน้านี้: เวอร์ชัน 8

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

หลัง: เวอร์ชัน 9 เข้ากันได้

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

ปรับโครงสร้างเป็นสไตล์โมดูลาร์

ในขณะที่รุ่น 8 APIs จะขึ้นอยู่กับ namespace และการบริการรูปแบบจุดที่ถูกล่ามโซ่, รุ่น 9 แบบแยกส่วนวิธีการที่หมายถึงรหัสของคุณจะถูกจัดอย่างยิ่งรอบ ๆ ฟังก์ชั่น ในรุ่น 9 firebase/app แพคเกจและแพคเกจอื่น ๆ ไม่ได้กลับมาส่งออกครบวงจรที่มีวิธีการทั้งหมดจากแพคเกจ แทน แพคเกจส่งออกแต่ละฟังก์ชัน

ในเวอร์ชัน 9 บริการจะถูกส่งผ่านเป็นอาร์กิวเมนต์แรก จากนั้นฟังก์ชันจะใช้รายละเอียดของบริการเพื่อดำเนินการที่เหลือ มาดูกันว่ามันทำงานอย่างไรในสองตัวอย่างที่ปรับโครงสร้างการเรียกไปยัง Authentication และ Cloud Firestore API

ตัวอย่างที่ 1: การปรับโครงสร้างฟังก์ชันการรับรองความถูกต้องใหม่

ก่อนหน้านี้: เวอร์ชัน 9 ที่เข้ากันได้

รหัสที่ใช้ร่วมกันของเวอร์ชัน 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
});

ตัวอย่างที่ 2: การปรับโครงสร้างฟังก์ชัน Cloud Firestore ใหม่

ก่อนหน้านี้: เวอร์ชัน 9 ที่เข้ากันได้

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

ตัวอย่างที่ 3: การรวมสไตล์โค้ดเวอร์ชัน 8 และเวอร์ชัน 9 เข้าด้วยกัน

การใช้ไลบรารีที่ใช้ร่วมกันได้ในระหว่างการอัปเกรดช่วยให้คุณใช้โค้ดเวอร์ชัน 8 ต่อไปควบคู่ไปกับโค้ดที่ปรับโครงสร้างใหม่สำหรับเวอร์ชัน 9 ซึ่งหมายความว่าคุณสามารถเก็บโค้ดเวอร์ชัน 8 ที่มีอยู่สำหรับ Cloud Firestore ไว้ในขณะที่คุณปรับโครงสร้างการรับรองความถูกต้องหรือโค้ด Firebase SDK อื่นๆ เป็นเวอร์ชัน 9 และยังคง คอมไพล์แอปของคุณสำเร็จด้วยโค้ดทั้งสองสไตล์ เดียวกันเป็นจริงสำหรับรุ่นที่ 8 และรุ่นที่ 9 รหัสภายในผลิตภัณฑ์เช่นเมฆ FireStore นั้น รูปแบบรหัสใหม่และเก่าสามารถอยู่ร่วมกันได้ ตราบใดที่คุณนำเข้าแพ็คเกจที่เข้ากันได้:

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

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

โปรดทราบว่าแม้ว่าแอปของคุณจะคอมไพล์ แต่คุณจะไม่ได้รับประโยชน์จากขนาดแอปของโค้ดโมดูลาร์ จนกว่าคุณจะลบคำสั่งและโค้ดที่ใช้ร่วมกันทั้งหมดออกจากแอปของคุณ

อัปเดตรหัสเริ่มต้น

อัปเดตโค้ดเริ่มต้นของแอปเพื่อใช้รูปแบบโมดูลาร์ 9 ใหม่ มันเป็นสิ่งสำคัญที่จะอัปเดตโค้ดนี้หลังจากที่คุณได้เสร็จสิ้นการ refactoring รหัสทั้งหมดที่อยู่ในแอปของคุณ; นี้เป็นเพราะ firebase.initializeApp() เริ่มต้นของรัฐทั่วโลกสำหรับทั้ง compat และ API แบบโมดูลาร์ในขณะที่ modular initializeApp() ฟังก์ชั่นเริ่มต้นเพียงรัฐสำหรับการแบบแยกส่วน

ก่อนหน้านี้: เวอร์ชัน 9 ที่เข้ากันได้

import firebase from "firebase/compat/app"

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

หลัง: เวอร์ชัน 9 โมดูลาร์

import { initializeApp } from "firebase/app"

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

ลบรหัสที่ใช้ร่วมกัน

ตระหนักถึงประโยชน์ขนาดของรุ่น 9 SDK แบบโมดูลาร์ในที่สุดคุณควรแปลงสวดทั้งหมดไปยังรูปแบบโมดูลาร์ที่ปรากฏข้างต้นและลบทั้งหมดของ import "firebase/compat/* งบจากรหัสของคุณ. เมื่อคุณทำไม่ควรมี ลำดับที่มากขึ้นในการ firebase.* namespace โลกหรือรหัสอื่น ๆ ในรุ่นสไตล์ 8 SDK ได้

การใช้ไลบรารีที่ใช้ร่วมกันจากหน้าต่าง

รุ่น 9 SDK เหมาะที่จะทำงานร่วมกับโมดูลมากกว่าเบราว์เซอร์ของ window วัตถุ รุ่นก่อนหน้านี้ของห้องสมุดที่ได้รับอนุญาตในการโหลดและการจัดการของ Firebase โดยใช้ window.firebase namespace ไม่แนะนำให้ดำเนินการนี้เนื่องจากไม่อนุญาตให้มีการกำจัดโค้ดที่ไม่ได้ใช้ แต่รุ่น compat ของ JavaScript SDK ทำงานกับ window สำหรับนักพัฒนาที่ไม่ต้องการได้ทันทีเริ่มต้นเส้นทางการปรับรุ่นแบบแยกส่วน

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

ไลบรารีความเข้ากันได้ใช้โค้ดโมดูลาร์รุ่น 9 ภายใต้ประทุนและจัดเตรียม API เดียวกันกับเวอร์ชัน 8 SDK; วิธีนี้คุณสามารถอ้างถึง 8 รุ่นอ้างอิง API และรุ่น 8 โค้ดสำหรับรายละเอียด ไม่แนะนำให้ใช้วิธีนี้ในระยะยาว แต่เป็นการเริ่มต้นอัปเกรดเป็นไลบรารีแบบโมดูลาร์เวอร์ชัน 9 อย่างสมบูรณ์

ประโยชน์และข้อจำกัดของเวอร์ชัน 9

เวอร์ชัน 9 แบบแยกส่วนอย่างสมบูรณ์มีข้อดีเหล่านี้เหนือเวอร์ชันก่อนหน้า:

  • เวอร์ชัน 9 ช่วยให้ขนาดแอปลดลงอย่างมาก ใช้รูปแบบโมดูล JavaScript ที่ทันสมัย ​​เพื่อให้สามารถดำเนินการ "การเขย่าต้นไม้" ซึ่งคุณนำเข้าเฉพาะสิ่งประดิษฐ์ที่แอปของคุณต้องการเท่านั้น ขึ้นอยู่กับแอปของคุณ การเขย่าต้นไม้ด้วยเวอร์ชัน 9 อาจส่งผลให้กิโลไบต์น้อยกว่า 80% เมื่อเทียบกับแอปที่สร้างโดยใช้เวอร์ชัน 8
  • เวอร์ชัน 9 จะยังคงได้รับประโยชน์จากการพัฒนาคุณลักษณะอย่างต่อเนื่อง ในขณะที่เวอร์ชัน 8 จะถูกระงับในอนาคต