Tìm hiểu về Firebase cho web

Trong quá trình phát triển một ứng dụng web bằng Firebase, bạn có thể gặp phải các khái niệm lạ hoặc những khía cạnh mà bạn cần thêm thông tin để đưa ra quyết định đúng đắn cho dự án của mình. Trang này nhằm giải đáp những câu hỏi đó hoặc giới thiệu cho bạn các tài nguyên để tìm hiểu thêm.

Nếu bạn có câu hỏi về một chủ đề không có trên trang này, hãy truy cập vào một trong các cộng đồng trực tuyến của chúng tôi. Chúng tôi cũng sẽ định kỳ cập nhật các chủ đề mới trên trang này. Vì vậy, hãy kiểm tra lại để xem chúng tôi đã thêm chủ đề mà bạn muốn tìm hiểu hay chưa.

Phiên bản SDK: mô-đun và không gian tên

Firebase cung cấp hai nền tảng API cho ứng dụng web:

  • JavaScript – được đặt trong vùng chứa tên. Đây là giao diện JavaScript mà Firebase duy trì trong nhiều năm và quen thuộc với các Nhà phát triển web có ứng dụng Firebase cũ. Vì API được đặt trong vùng chứa tên không được hưởng lợi từ việc liên tục hỗ trợ các tính năng mới, nên hầu hết ứng dụng mới nên sử dụng API mô-đun.
  • JavaScript – mô-đun. SDK này dựa trên phương pháp mô-đun giúp giảm kích thước SDK và hiệu quả cao hơn với các công cụ xây dựng JavaScript hiện đại, chẳng hạn như webpack hoặc Rollup.

API mô-đun tích hợp tốt với các công cụ xây dựng giúp loại bỏ mã hiện không được sử dụng trong ứng dụng của bạn, một quy trình được gọi là "lắc cây". Các ứng dụng được tạo bằng SDK này được hưởng lợi từ việc giảm đáng kể kích thước. Mặc dù có sẵn dưới dạng một mô-đun, API được đặt trong không gian tên không có cấu trúc mô-đun nghiêm ngặt và không giúp giảm mức độ giảm kích thước tương tự.

Mặc dù phần lớn API mô-đun đều tuân theo các mẫu tương tự như API được đặt trong vùng chứa tên, nhưng cách tổ chức mã lại khác. Nhìn chung, API được không gian tên được định hướng theo không gian tên và mẫu dịch vụ, còn API mô-đun được định hướng đến các hàm riêng biệt. Ví dụ: chuỗi chấm của API được đặt trong không gian tên, chẳng hạn như firebaseApp.auth(), được thay thế trong API mô-đun bằng một hàm getAuth() duy nhất mà lấy firebaseApp và trả về một thực thể Xác thực.

Điều này có nghĩa là các ứng dụng web được tạo bằng API có không gian tên cần được tái cấu trúc để tận dụng thiết kế ứng dụng theo mô-đun. Vui lòng xem hướng dẫn nâng cấp để biết thêm thông tin.

JavaScript - API mô-đun cho các ứng dụng mới

Nếu đang bắt đầu một bản tích hợp mới với Firebase, bạn có thể chọn sử dụng API mô-đun khi thêm và khởi chạy SDK.

Khi bạn phát triển ứng dụng, hãy lưu ý rằng mã của bạn sẽ được sắp xếp chủ yếu xoay quanh các hàm. Trong API mô-đun, các dịch vụ được truyền dưới dạng đối số đầu tiên, sau đó hàm này sử dụng thông tin chi tiết về dịch vụ để thực hiện phần còn lại. Ví dụ:

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

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

Để biết thêm ví dụ và thông tin chi tiết, hãy xem hướng dẫn cho từng dòng sản phẩm cũng như tài liệu tham khảo API mô-đun.

Cách thêm SDK web vào ứng dụng của bạn

Firebase cung cấp thư viện JavaScript cho hầu hết các sản phẩm Firebase, bao gồm Cấu hình từ xa, FCM và nhiều sản phẩm khác. Cách thêm Firebase SDK vào ứng dụng web phụ thuộc vào công cụ bạn đang sử dụng với ứng dụng (chẳng hạn như bộ gói mô-đun).

Bạn có thể thêm bất kỳ thư viện hiện có nào vào ứng dụng của mình thông qua một trong các phương thức được hỗ trợ:

  • npm (dành cho trình đóng gói mô-đun)
  • CDN (mạng phân phối nội dung)

Để biết hướng dẫn thiết lập chi tiết, hãy xem bài viết Thêm Firebase vào ứng dụng JavaScript. Phần còn lại của phần này chứa thông tin giúp bạn chọn trong số các lựa chọn có sẵn.

hải lý/phút

Việc tải gói npm Firebase xuống (bao gồm cả gói trình duyệt và gói Node.js) sẽ cung cấp cho bạn một bản sao cục bộ của Firebase SDK. Bản sao này có thể cần thiết cho các ứng dụng không phải trình duyệt như ứng dụng Node.js, React Native hoặc electron. Tệp tải xuống bao gồm các gói Node.js và React Native dưới dạng một tuỳ chọn cho một số gói. Gói Node.js cần thiết cho bước hiển thị phía máy chủ (SSR) của khung SSR.

Việc sử dụng npm với một trình đóng gói mô-đun như webpack hoặc Rollup sẽ cung cấp các tuỳ chọn tối ưu hoá cho mã không sử dụng "tree-shake" và áp dụng polyfill được nhắm mục tiêu. Điều này có thể làm giảm đáng kể kích thước của ứng dụng. Việc triển khai các tính năng này có thể làm tăng độ phức tạp cho cấu hình và chuỗi xây dựng của bạn, nhưng nhiều công cụ CLI chính có thể giúp giảm thiểu điều đó. Các công cụ này bao gồm Angular, React, Vue, Next và các công cụ khác.

Tóm lại:

  • Giúp tối ưu hoá kích thước ứng dụng một cách hữu ích
  • Đã có công cụ mạnh mẽ để quản lý các mô-đun
  • Bắt buộc đối với SSR có Node.js

CDN (mạng phân phối nội dung)

Việc thêm các thư viện được lưu trữ trên CDN của Firebase là một phương thức thiết lập SDK đơn giản mà có thể nhiều nhà phát triển quen thuộc. Khi sử dụng CDN để thêm SDK, bạn sẽ không cần công cụ xây dựng và chuỗi xây dựng có thể đơn giản và dễ làm việc hơn so với trình đóng gói mô-đun. Nếu bạn không đặc biệt quan tâm đến kích thước cài đặt của ứng dụng và không có các yêu cầu đặc biệt như chuyển mã từ TypeScript, thì CDN có thể là một lựa chọn phù hợp.

Tóm lại:

  • Quen thuộc và đơn giản
  • Phù hợp khi kích thước ứng dụng không phải là mối quan tâm lớn
  • Phù hợp khi trang web của bạn không sử dụng công cụ xây dựng.

Các biến thể của Firebase Web SDK

Bạn có thể dùng SDK web của Firebase trong cả trình duyệt và ứng dụng Nút. Tuy nhiên, một số sản phẩm không có trong môi trường Nút. Xem danh sách môi trường được hỗ trợ.

Một số SDK sản phẩm cung cấp các biến thể nút và trình duyệt riêng biệt, mỗi biến thể được cung cấp ở cả định dạng ESM và CJS, và một số SDK sản phẩm thậm chí còn cung cấp các biến thể gốc của Clang hoặc React. SDK web được định cấu hình để cung cấp biến thể chính xác dựa trên cấu hình hoặc môi trường công cụ của bạn và không yêu cầu lựa chọn thủ công trong hầu hết trường hợp. Tất cả biến thể SDK đều được thiết kế để giúp xây dựng ứng dụng web hoặc ứng dụng khách để người dùng cuối truy cập, chẳng hạn như trong máy tính Node.js hoặc ứng dụng IoT. Nếu mục tiêu của bạn là thiết lập quyền quản trị từ các môi trường đặc quyền (chẳng hạn như máy chủ), hãy sử dụng SDK quản trị của Firebase.

Phát hiện môi trường bằng trình đóng gói và khung

Khi bạn cài đặt SDK web Firebase bằng npm, cả hai phiên bản JavaScript và Node.js đều được cài đặt. Gói này cung cấp tính năng phát hiện môi trường chi tiết để bật các gói phù hợp cho ứng dụng của bạn.

Nếu mã của bạn sử dụng câu lệnh require của Node.js, thì SDK sẽ tìm gói dành riêng cho Nút. Nếu không, bạn phải xác định chính xác chế độ cài đặt của trình đóng gói để phát hiện đúng trường điểm truy cập trong tệp package.json (ví dụ: main, browser hoặc module). Nếu bạn gặp lỗi thời gian chạy với SDK, hãy kiểm tra để đảm bảo trình đóng gói được định cấu hình để ưu tiên loại gói phù hợp với môi trường của bạn.

Tìm hiểu về đối tượng cấu hình Firebase

Để khởi chạy Firebase trong ứng dụng, bạn cần cung cấp cấu hình dự án Firebase của ứng dụng. Bạn có thể nhận đối tượng cấu hình Firebase bất cứ lúc nào.

  • Bạn không nên chỉnh sửa đối tượng cấu hình theo cách thủ công, đặc biệt là các "tuỳ chọn Firebase" bắt buộc sau đây: apiKey, projectId và appID. Nếu bạn khởi chạy ứng dụng bằng các giá trị không hợp lệ hoặc bị thiếu cho các "tuỳ chọn Firebase" bắt buộc này, thì người dùng ứng dụng của bạn có thể gặp phải các vấn đề nghiêm trọng. Trường hợp ngoại lệ là authDomain. Bạn có thể cập nhật các phương pháp hay nhất để sử dụng signInWithRedirect.

  • Nếu bạn đã bật Google Analytics trong dự án Firebase, đối tượng config sẽ chứa trường measurementId. Tìm hiểu thêm về trường này trong trang bắt đầu sử dụng Analytics.

  • Nếu bạn bật Google Analytics hoặc Cơ sở dữ liệu theo thời gian thực sau khi tạo Ứng dụng web Firebase, hãy nhớ cập nhật đối tượng cấu hình Firebase mà bạn sử dụng trong ứng dụng của mình bằng các giá trị cấu hình được liên kết (lần lượt là measurementId và databaseURL). Bạn có thể nhận đối tượng cấu hình Firebase bất cứ lúc nào.

Dưới đây là định dạng của đối tượng cấu hình với tất cả dịch vụ được bật (các giá trị này được tự động điền):

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Thư viện có sẵn

Tùy chọn thiết lập bổ sung

Trì hoãn việc tải Firebase SDK (từ CDN)

Bạn có thể trì hoãn việc thêm SDK Firebase cho đến khi tải xong toàn bộ trang. Nếu bạn đang sử dụng tập lệnh CDN API mô-đun với <script type="module">, thì đây sẽ là hành vi mặc định. Nếu bạn đang sử dụng các tập lệnh CDN được đặt trong vùng chứa tên làm một mô-đun, hãy hoàn tất các bước sau để trì hoãn việc tải:

  1. Thêm một cờ defer vào từng thẻ script cho Firebase SDK, sau đó trì hoãn việc khởi chạy Firebase bằng tập lệnh thứ hai, ví dụ:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. Tạo một tệp init-firebase.js, sau đó đưa nội dung sau vào tệp:

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Sử dụng nhiều dự án Firebase trong một ứng dụng

Trong hầu hết các trường hợp, bạn chỉ phải khởi chạy Firebase trong một ứng dụng mặc định duy nhất. Bạn có thể truy cập vào Firebase từ ứng dụng đó theo 2 cách tương đương:

API mô-đun web

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

API được đặt tên trong vùng chứa tên của web

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

Tuy nhiên, đôi khi bạn cần phải truy cập vào nhiều dự án Firebase cùng một lúc. Ví dụ: bạn có thể muốn đọc dữ liệu từ cơ sở dữ liệu của một dự án Firebase nhưng lưu trữ các tệp trong một dự án Firebase khác. Hoặc bạn nên xác thực một dự án trong khi vẫn chưa xác thực dự án thứ hai.

Firebase JavaScript SDK cho phép bạn khởi chạy và sử dụng nhiều dự án Firebase trong một ứng dụng cùng lúc, với mỗi dự án sử dụng thông tin cấu hình Firebase riêng.

API mô-đun web

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

API được đặt tên trong vùng chứa tên của web

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();
firebaseapp.js

Chạy máy chủ web cục bộ để phát triển

Nếu bạn đang tạo một ứng dụng web, một số phần của SDK JavaScript của Firebase yêu cầu bạn phân phát ứng dụng web từ máy chủ thay vì từ hệ thống tệp cục bộ. Bạn có thể sử dụng Giao diện dòng lệnh (CLI) của Firebase để chạy máy chủ cục bộ.

Nếu đã thiết lập tính năng Lưu trữ Firebase cho ứng dụng, thì có thể bạn đã hoàn tất một số bước bên dưới.

Để phân phát ứng dụng web, bạn sẽ sử dụng Firebase CLI, một công cụ dòng lệnh.

  1. Truy cập vào tài liệu của Firebase CLI để tìm hiểu cách cài đặt CLI hoặc cập nhật lên phiên bản mới nhất.

  2. Khởi chạy dự án Firebase. Chạy lệnh sau từ gốc của thư mục ứng dụng cục bộ:

    firebase init

  3. Khởi động máy chủ cục bộ để phát triển. Chạy lệnh sau từ gốc của thư mục ứng dụng cục bộ:

    firebase serve

Tài nguyên nguồn mở cho SDK JavaScript của Firebase

Firebase hỗ trợ phát triển nguồn mở và chúng tôi khuyến khích cộng đồng đóng góp và phản hồi.

SDK JavaScript của Firebase

Hầu hết các SDK JavaScript của Firebase đều được phát triển dưới dạng thư viện nguồn mở trong kho lưu trữ GitHub công khai của chúng tôi.

Mẫu bắt đầu nhanh

Firebase duy trì một tập hợp các mẫu bắt đầu nhanh cho hầu hết các API Firebase trên web. Bạn có thể tìm thấy các hướng dẫn bắt đầu nhanh này trong kho lưu trữ bắt đầu nhanh GitHub công khai của chúng tôi. Bạn có thể sử dụng các hướng dẫn bắt đầu nhanh này làm mã mẫu khi sử dụng Firebase SDK.