Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

# OR

yarn add firebase@9.9.4

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

ตัวอย่างที่ 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.9.4/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.9.4/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.9.4/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 จะถูกระงับในอนาคต