Tìm hiểu về Firebase dành cho web

Khi phát triển ứng dụng Web bằng Firebase, bạn có thể gặp phải các khái niệm không quen thuộc hoặc những lĩnh vực mà bạn cần thêm thông tin để đưa ra quyết định phù hợp cho dự án của mình. Trang này nhằm mục đích trả lời những câu hỏi đó hoặc hướng dẫn bạn đến các tài nguyên để tìm hiểu thêm.

Nếu bạn có thắc mắc về một chủ đề không được đề cập 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 quay 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: có không gian tên và mô-đun

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

  • JavaScript – có không gian 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 không gian tên không được hưởng lợi từ việc hỗ trợ tính năng mới liên tục, 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à tăng hiệu quả với các công cụ tạo bản dựng JavaScript hiện đại như webpack hoặc Rollup.

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

Mặc dù phần lớn API mô-đun tuân theo các mẫu giống như API có không gian tên, nhưng cách sắp xếp mã lại khác. Nhìn chung, API có không gian tên hướng đến một không gian tên và mẫu dịch vụ, trong khi API mô-đun hướng đến các hàm riêng biệt. Ví dụ: chuỗi dấu chấm của API được đặt 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 nhận firebaseApp và trả về một thực thể Authentication.

Đ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 phải được tái cấu trúc để tận dụng thiết kế ứng dụng mô-đun. Hãy xem hướng dẫn nâng cấp để biết thêm thông tin chi tiết.

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

Nếu đang bắt đầu 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 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 theo 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 sẽ sử dụng thông tin chi tiết của 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 khu vực 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

Firebase cung cấp thư viện JavaScript cho hầu hết các sản phẩm Firebase, bao gồm cả Remote Config, FCM và nhiều sản phẩm khác. Cách bạn thêm SDK Firebase 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ư trình gói mô-đun).

Bạn có thể thêm bất kỳ thư viện có sẵn 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 phần 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 tuỳ chọn có sẵn.

npm

Việc tải gói npm Firebase (bao gồm cả gói trình duyệt và Node.js) sẽ cung cấp cho bạn một bản sao cục bộ của SDK Firebase. Bạn có thể cần bản sao này 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 tuỳ chọn cho một số gói. Gói Node.js là cần thiết cho bước kết xuất phía máy chủ (SSR) của các khung SSR.

Việc sử dụng npm với trình đóng gói mô-đun như webpack hoặc Rollup cung cấp các tuỳ chọn tối ưu hoá để "loại bỏ mã không dùng đến" và áp dụng các polyfill được nhắm mục tiêu, giúp giảm đáng kể kích thước ứ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, nhưng nhiều công cụ CLI phổ biến 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:

  • Cung cấp tính năng tối ưu hoá kích thước ứng dụng có giá trị
  • Có sẵn công cụ mạnh mẽ để quản lý các mô-đun
  • Bắt buộc đối với SSR bằng 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à nhiều nhà phát triển có thể 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ủa bạn có thể đơn giản và dễ sử dụng hơn so với trình kết hợp 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 đổi 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 lo ngại lớn
  • Phù hợp khi trang web của bạn không sử dụng các công cụ xây dựng.

Các biến thể SDK Firebase Web

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

Một số SDK sản phẩm cung cấp các biến thể trình duyệt và Node riêng biệt, mỗi biến thể được cung cấp ở cả định dạng ESM và CJS, thậm chí một số SDK sản phẩm còn cung cấp các biến thể Cordova hoặc React Native. 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 công cụ hoặc môi trường của bạn và không yêu cầu bạn phải chọn thủ công trong hầu hết các 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 cho người dùng cuối truy cập, chẳng hạn như trong ứng dụng IoT hoặc máy tính để bàn Node.js. Nếu mục tiêu của bạn là thiết lập quyền truy cập 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 Firebase Admin SDK.

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ả 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 thấy gói dành riêng cho Node. Nếu không, bạn phải thiết lập đúng chế độ cài đặt của trình tạo 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 tạo gói được định cấu hình để ưu tiên đúng loại gói cho 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ể lấy đố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: 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, 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 theo 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, thì đối tượng cấu hình của bạn 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 Realtime Database sau khi tạo Ứng dụng web Firebase, hãy đảm bảo rằng đối tượng cấu hình Firebase mà bạn sử dụng trong ứng dụng được cập nhật bằng các giá trị cấu hình liên kết (tương ứng là measurementId và databaseURL). Bạn có thể lấy đố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ả cá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

Các tuỳ chọn thiết lập bổ sung

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

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

  1. Thêm cờ defer vào mỗi thẻ script cho SDK Firebase, sau đó trì hoãn việc khởi chạy Firebase bằng cách sử dụ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 tệp init-firebase.js, sau đó thêm 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 trường hợp, bạn chỉ cần khởi chạy Firebase trong một ứng dụng mặc định. Bạn có thể truy cập vào Firebase từ ứng dụng đó theo hai cách tương đương:

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

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 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ữ tệp trong một dự án Firebase khác. Hoặc bạn có thể muốn xác thực một dự án trong khi vẫn chưa xác thực dự án thứ hai.

SDK Firebase JavaScript 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 một lúc, trong đó mỗi dự án sử dụng thông tin cấu hình Firebase riêng.

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

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, thì một số phần của SDK Firebase JavaScript 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 CLI Firebase để chạy máy chủ cục bộ.

Nếu đã thiết lập Firebase Hosting 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 tài liệu về CLI Firebase để 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ừ thư mục gốc của ứ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ừ thư mục gốc của ứ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 SDK JavaScript 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 Firebase.

Mẫu bắt đầu nhanh

Firebase duy trì một bộ sưu tập các mẫu làm quen 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ữ hướng dẫn bắt đầu nhanh về Firebase trên 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ã ví dụ để sử dụng SDK Firebase.