Các ứng dụng hiện đang sử dụng Firebase Web SDK phiên bản 8 trở xuống nên cân nhắc chuyển sang phiên bản 9 bằng cách sử dụng các hướng dẫn trong hướng dẫn này.
Hướng dẫn này giả định rằng bạn đã quen thuộc với phiên bản 8 và bạn sẽ tận dụng một gói mô-đun như webpack hoặc Rollup để nâng cấp và phát triển phiên bản 9 đang diễn ra.
Bạn nên sử dụng một gói mô-đun trong môi trường phát triển của mình. Nếu không sử dụng, bạn sẽ không thể tận dụng các lợi ích chính của phiên bản 9 trong việc giảm kích thước ứng dụng. Bạn sẽ cần npm hoặc sợi để cài đặt SDK.
Các bước nâng cấp trong hướng dẫn này sẽ dựa trên một ứng dụng web tưởng tượng sử dụng SDK xác thực và Cloud Firestore. Bằng cách làm việc thông qua các ví dụ, bạn có thể nắm vững các khái niệm và các bước thực tế cần thiết để nâng cấp tất cả các SDK Web Firebase được hỗ trợ.
Giới thiệu về các thư viện compat
Có hai loại thư viện có sẵn cho Firebase Web SDK phiên bản 9:
- Mô-đun - một bề mặt API mới được thiết kế để tạo điều kiện thuận lợi cho việc rung cây (loại bỏ mã không sử dụng) để làm cho ứng dụng web của bạn nhỏ và nhanh nhất có thể.
- Compat - một bề mặt API quen thuộc hoàn toàn tương thích với SDK phiên bản 8, cho phép bạn nâng cấp lên phiên bản 9 mà không cần thay đổi tất cả mã Firebase của bạn cùng một lúc. Thư viện compat có ít hoặc không có lợi thế về kích thước hoặc hiệu suất so với các bản sao phiên bản 8 của chúng.
Hướng dẫn này giả định rằng bạn sẽ tận dụng các thư viện compat phiên bản 9 để tạo điều kiện nâng cấp. Các thư viện này cho phép bạn tiếp tục sử dụng mã phiên bản 8 cùng với mã được cấu trúc lại cho phiên bản 9. Điều này có nghĩa là bạn có thể biên dịch và gỡ lỗi ứng dụng của mình dễ dàng hơn khi làm việc trong quá trình nâng cấp.
Đối với các ứng dụng có mức độ hiển thị rất nhỏ với SDK Web Firebase - ví dụ: một ứng dụng chỉ thực hiện một lệnh gọi đơn giản đến các API xác thực - có thể thực tế là cấu trúc lại mã phiên bản 8 mà không sử dụng thư viện compat phiên bản 9. Nếu bạn đang nâng cấp một ứng dụng như vậy, bạn có thể làm theo hướng dẫn trong hướng dẫn này cho "mô-đun phiên bản 9" mà không cần sử dụng thư viện compat.
Giới thiệu về quá trình nâng cấp
Mỗi bước của quá trình nâng cấp được xác định phạm vi để bạn có thể hoàn tất việc chỉnh sửa nguồn cho ứng dụng của mình, sau đó biên dịch và chạy nó mà không bị hỏng. Tóm lại, đây là những gì bạn sẽ làm để nâng cấp ứng dụng:
- Thêm thư viện phiên bản 9 và thư viện compat vào ứng dụng của bạn.
- Cập nhật các câu lệnh nhập trong mã của bạn thành v9 compat.
- Refactor mã cho một sản phẩm (ví dụ: Xác thực) sang kiểu mô-đun.
- Tùy chọn: tại thời điểm này, hãy xóa thư viện so sánh Xác thực và mã so sánh cho Xác thực để nhận ra lợi ích về kích thước ứng dụng cho Xác thực trước khi tiếp tục.
- Các chức năng tái cấu trúc cho từng sản phẩm (ví dụ: Cloud Firestore, FCM, v.v.) theo kiểu mô-đun, biên dịch và thử nghiệm cho đến khi tất cả các khu vực hoàn tất.
- Cập nhật mã khởi tạo thành kiểu mô-đun.
- Xóa tất cả các câu lệnh compat phiên bản 9 còn lại và mã compat khỏi ứng dụng của bạn.
Tải xuống SDK phiên bản 9
Để bắt đầu, hãy tải thư viện phiên bản 9 và thư viện tính toán bằng npm:
npm i firebase@9.22.1 # OR yarn add firebase@9.22.1
Cập nhật nhập khẩu lên v9 compat
Để giữ cho mã của bạn hoạt động sau khi cập nhật phần phụ thuộc của bạn từ phiên bản 8 lên phiên bản 9 phiên bản beta, hãy thay đổi câu lệnh nhập của bạn để sử dụng phiên bản "compat" của mỗi lần nhập. Ví dụ:
Trước: phiên bản 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
After: phiên bản 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 theo kiểu mô-đun
Mặc dù các API phiên bản 8 dựa trên không gian tên và mẫu dịch vụ chuỗi dấu chấm, cách tiếp cận mô-đun của phiên bản 9 có nghĩa là mã của bạn sẽ được tổ chức chủ yếu xung quanh các chức năng . Trong phiên bản 9, gói firebase/app và các gói khác không trả về một bản xuất toàn diện có chứa tất cả các phương thức từ gói. Thay vào đó, các gói xuất các chức năng riêng lẻ.
Trong phiên bản 9, các dịch vụ được chuyển làm đối số đầu tiên và sau đó hàm sử dụng các chi tiết của dịch vụ để thực hiện phần còn lại. Chúng ta hãy xem xét cách thức hoạt động của điều này trong hai ví dụ mà trình tái cấu trúc gọi đến API Xác thực và Cloud Firestore.
Ví dụ 1: cấu trúc lại một chức năng Xác thực
Trước: phiên bản 9 compat
Mã compat phiên bản 9 giống với mã phiên bản 8, nhưng các mục nhập đã thay đổi.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
const auth = firebase.auth();
auth.onAuthStateChanged(user => {
// Check for user status
});
Sau: phiên bản 9 mô-đun
Hàm getAuth lấy firebaseApp làm tham số đầu tiên. Hàm onAuthStateChanged không được xâu chuỗi từ phiên bản auth như trong phiên bản 8; thay vào đó, nó là một hàm miễn phí lấy auth làm tham số đầu tiên.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Cập nhật xử lý phương thức Auth getRedirectResult
Phiên bản 9 giới thiệu một thay đổi đột phá trong getRedirectResult . Khi không có thao tác chuyển hướng nào được gọi, Phiên bản 9 trả về null trái ngược với Phiên bản 8, trả về UserCredential người dùng với người dùng null .
Trước: phiên bản 9 compat
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
Sau: phiên bản 9 mô-đun
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;
Ví dụ 2: Cấu trúc lại một chức năng Cloud Firestore
Trước: phiên bản 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);
});
Sau: phiên bản 9 mô-đun
Hàm getFirestore nhận firebaseApp làm tham số đầu tiên, được trả về từ initializeApp tạoApp trong một ví dụ trước đó. Lưu ý rằng cách mã để tạo truy vấn rất khác trong phiên bản 9; không có chuỗi và các phương thức như query hoặc where hiện được coi là các hàm miễn phí.
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());
});
Cập nhật các tham chiếu đến Firestore DocumentSnapshot.exists
Phiên bản 9 giới thiệu một thay đổi đột phá trong đó thuộc tính firestore.DocumentSnapshot.exists đã được thay đổi thành một phương thức . Về cơ bản, chức năng giống nhau (kiểm tra xem tài liệu có tồn tại hay không) nhưng bạn phải cấu trúc lại mã của mình để sử dụng phương thức v9 như được hiển thị:
Trước: phiên bản 9 compat
if (snapshot.exists) {
console.log("the document exists");
}
Sau: phiên bản 9 mô-đun
if (snapshot.exists()) {
console.log("the document exists");
}
Ví dụ 3: kết hợp kiểu mã phiên bản 8 và phiên bản 9
Việc sử dụng các thư viện compat trong quá trình nâng cấp cho phép bạn tiếp tục sử dụng mã phiên bản 8 cùng với mã được cấu trúc lại cho phiên bản 9. Điều này có nghĩa là bạn có thể giữ mã phiên bản 8 hiện có cho Cloud Firestore trong khi bạn cấu trúc lại Xác thực hoặc mã Firebase SDK khác theo kiểu phiên bản 9 và vẫn biên dịch thành công ứng dụng của bạn với cả hai kiểu mã. Điều này cũng đúng với mã phiên bản 8 và phiên bản 9 trong một sản phẩm như Cloud Firestore; kiểu mã mới và cũ có thể cùng tồn tại, miễn là bạn đang nhập các gói compat:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'
const docRef = firebase.firestore().doc();
getDoc(docRef);
Hãy nhớ rằng, mặc dù ứng dụng của bạn sẽ được biên dịch, nhưng bạn sẽ không nhận được lợi ích về kích thước ứng dụng của mã mô-đun cho đến khi bạn xóa hoàn toàn các câu lệnh và mã compat khỏi ứng dụng của mình.
Cập nhật mã khởi tạo
Cập nhật mã khởi tạo ứng dụng của bạn để sử dụng cú pháp phiên bản mô-đun 9 mới. Điều quan trọng là phải cập nhật mã này sau khi bạn đã hoàn tất cấu trúc lại tất cả mã trong ứng dụng của mình; điều này là do firebase.initializeApp() khởi tạo trạng thái toàn cục cho cả API compat và mô-đun, trong khi hàm modular initializeApp() chỉ khởi tạo trạng thái cho mô-đun.
Trước: phiên bản 9 compat
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
Sau: phiên bản 9 mô-đun
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Xóa mã compat
Để nhận ra lợi ích về kích thước của SDK mô-đun phiên bản 9, cuối cùng bạn nên chuyển đổi tất cả các lệnh gọi sang kiểu mô-đun được hiển thị ở trên và xóa tất cả các câu lệnh import "firebase/compat/* khỏi mã của bạn. Khi bạn hoàn tất, không nên nhiều tham chiếu hơn đến firebase.* không gian tên toàn cầu hoặc bất kỳ mã nào khác trong kiểu SDK phiên bản 8.
Sử dụng thư viện compat từ cửa sổ
SDK phiên bản 9 được tối ưu hóa để hoạt động với các mô-đun thay vì đối tượng window của trình duyệt. Các phiên bản trước của thư viện cho phép tải và quản lý Firebase bằng cách sử dụng không gian tên window.firebase . Điều này không được khuyến khích trong tương lai vì nó không cho phép loại bỏ mã không sử dụng. Tuy nhiên, phiên bản compat của SDK JavaScript không hoạt động với window dành cho các nhà phát triển không muốn bắt đầu ngay lập tức đường dẫn nâng cấp mô-đun.
<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>
Thư viện tương thích sử dụng mã mô-đun phiên bản 9 và cung cấp cho nó cùng một API như SDK phiên bản 8; điều này có nghĩa là bạn có thể tham khảo tham chiếu API phiên bản 8 và đoạn mã phiên bản 8 để biết chi tiết. Phương pháp này không được khuyến nghị để sử dụng lâu dài, nhưng để bắt đầu nâng cấp lên thư viện phiên bản 9 đầy đủ mô-đun.
Lợi ích và hạn chế của phiên bản 9
Phiên bản 9 được mô-đun hóa hoàn toàn có những ưu điểm này so với các phiên bản trước:
- Phiên bản 9 cho phép giảm đáng kể kích thước ứng dụng. Nó áp dụng định dạng Mô-đun JavaScript hiện đại, cho phép thực hiện các phương pháp "rung cây" trong đó bạn chỉ nhập các tạo tác mà ứng dụng của bạn cần. Tùy thuộc vào ứng dụng của bạn, rung cây với phiên bản 9 có thể dẫn đến giảm 80% kilobyte so với một ứng dụng tương đương được xây dựng bằng phiên bản 8.
- Phiên bản 9 sẽ tiếp tục được hưởng lợi từ việc phát triển tính năng liên tục, trong khi phiên bản 8 sẽ bị đóng băng tại một thời điểm trong tương lai.