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

Nâng cấp từ phiên bản 8 lên SDK Web mô-đun

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à rằng bạn sẽ tận dụng lợi thế của một module bundler như webpack hoặc Rollup để nâng cấp và phiên bản liên tục 9 phát triển.

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:

  • Modular - một bề mặt API mới được thiết kế để tạo điều kiện cây lắc (loại bỏ các mã không sử dụng) để làm cho ứng dụng web của bạn càng nhỏ và nhanh càng tốt.
  • Compat - một bề mặt API quen thuộc đó là hoàn toàn tương thích với các phiên bản 8 SDK, cho phép bạn nâng cấp lên phiên bản 9 mà không thay đổi tất cả các mã căn cứ hỏa lực của bạn cùng một lúc. Thư viện compat có rất í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 đối tác 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 độ tiếp xúc 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 tới 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 các 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:

  1. Thêm các thư viện phiên bản 9 và các thư viện compat vào ứng dụng của bạn.
  2. Cập nhật các câu lệnh nhập trong mã của bạn thành v9 compat.
  3. Refactor mã cho một sản phẩm (ví dụ: Xác thực) sang kiểu mô-đun.
  4. 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.
  5. Các chức năng của bộ 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.
  6. Cập nhật mã khởi tạo thành kiểu mô-đun.
  7. 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.5.0

# OR

yarn add firebase@9.5.0

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

Trong khi phiên bản 8 API được dựa trên một namespace và dịch vụ mẫu dot-xích, phiên bản 9 của phương tiện tiếp cận mô-đun 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, firebase/app gói và các gói khác không trả về một xuất khẩu toàn diện có chứa tất cả các phương pháp 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à bộ 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

Các getAuth chức năng mất firebaseApp như tham số đầu tiên của nó. Các onAuthStateChanged chức năng không bị xiềng xích từ auth dụ như nó sẽ là trong phiên bản 8; thay vào đó, nó là một chức năng miễn phí mà mất auth như tham số đầu tiên của nó.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

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

Các getFirestore chức năng mất firebaseApp như tham số đầu tiên của mình, được trở về từ initializeApp 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ó chaining, và các phương pháp như query hoặc where đang tiếp xúc như các chức năng 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());
});

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 cho phiên bản 8 và phiên bản 9 mã trong một sản phẩm ví dụ 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à để cập nhật mã này sau khi bạn đã hoàn thành sắp xếp tất cả các mã trong ứng dụng của bạn; điều này là do firebase.initializeApp() khởi trạng thái toàn cầu cho cả compat và API mô-đun, trong khi mô-đun initializeApp() chức năng khởi chỉ 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 những lợi ích kích thước của phiên bản 9 SDK mô đun, bạn cuối cùng sẽ chuyển đổi tất cả các lời gọi với phong cách mô đun hiển thị ở trên và loại bỏ tất cả các import "firebase/compat/* báo cáo từ mã của bạn. Khi bạn làm xong, không nên có nhiều tài liệu tham khảo cho các firebase.* namespace toàn cục hoặc bất kỳ mã khác trong phiên bản 8 SDK phong cách.

Sử dụng thư viện compat từ cửa sổ

Các phiên bản 9 SDK được tối ưu hóa để làm việc với các module chứ không phải của trình duyệt window đối tượng. Các phiên bản trước của thư viện cho phép tải và quản lý các căn cứ hỏa lực bằng window.firebase namespace. Đ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 SDK Javascript không làm việc với các window cho những nhà phát triển không muốn ngay lập tức bắt đầu con đường nâng cấp mô-đun.

<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/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 bạn có thể tham khảo các tài liệu tham khảo API phiên bản 8 và phiên bản 8 đoạn mã để 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 kích thước ứng dụng đáng kể. 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.