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

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

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

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

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

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

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

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

  • โมดูลา ร์ - พื้นผิว API ใหม่ที่ออกแบบมาเพื่ออำนวยความสะดวกในการเขย่าต้นไม้ (ลบโค้ดที่ไม่ได้ใช้) เพื่อให้เว็บแอปของคุณมีขนาดเล็กและรวดเร็วที่สุด
  • Compat - พื้นผิว API ที่คุ้นเคยซึ่งเข้ากันได้กับ SDK เวอร์ชัน 8 อย่างสมบูรณ์ ช่วยให้คุณอัปเกรดเป็นเวอร์ชัน 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.17.2

# OR

yarn add firebase@9.17.2

อัปเดตการนำเข้าเป็น 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';

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

แม้ว่า API เวอร์ชัน 8 จะใช้เนมสเปซและรูปแบบบริการแบบ dot-chain แต่วิธีการแบบโมดูลของเวอร์ชัน 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
});

อัปเดตการจัดการเมธอด Auth getRedirectResult

เวอร์ชัน 9 แนะนำการเปลี่ยนแปลงที่แตกหักใน getRedirectResult เมื่อไม่มีการเรียกการดำเนินการเปลี่ยนเส้นทาง เวอร์ชัน 9 จะส่งกลับ null ซึ่งตรงข้ามกับเวอร์ชัน 8 ซึ่งส่งคืน UserCredential ด้วยผู้ใช้ที่เป็น null

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

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 ที่เข้ากันได้

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 ที่เข้ากันได้

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 รูปแบบรหัสใหม่และเก่าสามารถอยู่ร่วมกันได้ ตราบใดที่คุณนำเข้าแพ็คเกจที่เข้ากันได้:

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

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

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

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

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

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

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.* เนมสเปซส่วนกลางหรือโค้ดอื่นๆ ในรูปแบบ SDK เวอร์ชัน 8

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

SDK เวอร์ชัน 9 ได้รับการปรับให้เหมาะกับการทำงานกับโมดูลมากกว่าวัตถุ window ของเบราว์เซอร์ ไลบรารีเวอร์ชันก่อนหน้าอนุญาตให้โหลดและจัดการ Firebase โดยใช้เนมสเปซ window.firebase ไม่แนะนำให้ดำเนินการนี้เนื่องจากไม่อนุญาตให้มีการกำจัดโค้ดที่ไม่ได้ใช้ อย่างไรก็ตาม 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 เดียวกันกับเวอร์ชัน 8 SDK; ซึ่งหมายความว่าคุณสามารถอ้างอิงถึงการ อ้างอิง API เวอร์ชัน 8 และข้อมูลโค้ดเวอร์ชัน 8 สำหรับรายละเอียด ไม่แนะนำให้ใช้วิธีนี้ในระยะยาว แต่เป็นการเริ่มต้นอัปเกรดเป็นไลบรารีแบบโมดูลาร์เวอร์ชัน 9 อย่างสมบูรณ์

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

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

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