แอปที่ใช้ 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 โมดูลาร์" โดยไม่ต้องใช้ไลบรารีที่ใช้ร่วมกันได้
เกี่ยวกับขั้นตอนการอัพเกรด
แต่ละขั้นตอนของกระบวนการอัปเกรดมีการกำหนดขอบเขตไว้เพื่อให้คุณสามารถแก้ไขซอร์สโค้ดสำหรับแอปของคุณให้เสร็จสิ้น จากนั้นคอมไพล์และรันแอปโดยไม่เกิดความขัดข้อง โดยสรุป สิ่งที่คุณต้องทำเพื่ออัปเกรดแอปมีดังต่อไปนี้
- เพิ่มไลบรารีเวอร์ชัน 9 และไลบรารีที่ใช้ร่วมกันในแอปของคุณ
- อัปเดตคำสั่งการนำเข้าในโค้ดของคุณเป็นเวอร์ชัน v9
- รหัส Refactor สำหรับผลิตภัณฑ์เดียว (เช่น Authentication) เป็นสไตล์โมดูลาร์
- ไม่บังคับ: ณ จุดนี้ ให้ลบไลบรารีที่เข้ากันได้กับการรับรองความถูกต้องและรหัสที่เข้ากันได้สำหรับการตรวจสอบสิทธิ์ เพื่อให้ทราบถึงประโยชน์ของขนาดแอปสำหรับการตรวจสอบสิทธิ์ก่อนดำเนินการต่อ
- ฟังก์ชันรีแฟคเตอร์สำหรับแต่ละผลิตภัณฑ์ (เช่น Cloud Firestore, FCM เป็นต้น) เป็นสไตล์โมดูลาร์ รวบรวมและทดสอบจนกว่าพื้นที่ทั้งหมดจะเสร็จสมบูรณ์
- อัปเดตโค้ดเริ่มต้นเป็นสไตล์โมดูลาร์
- ลบคำสั่งความเข้ากันได้ของเวอร์ชัน 9 ที่เหลือและโค้ดที่เข้ากันได้ออกจากแอปของคุณ
รับเวอร์ชัน 9 SDK
ในการเริ่มต้น รับไลบรารีเวอร์ชัน 9 และไลบรารีที่ใช้ร่วมกันโดยใช้ npm:
npm i firebase@9.22.1 # OR yarn add firebase@9.22.1
อัปเดตการนำเข้าเป็น 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.22.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/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 จะถูกระงับในอนาคต