Tìm hiểu về Firebase cho web

Khi phát triển một ứng dụng web bằng Firebase, bạn có thể gặp phải những khái niệm lạ hoặc những lĩnh vực 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 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 trang này bằng các chủ đề mới, vì vậy, hãy quay lại kiểm tra 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à theo mô-đun

Firebase cung cấp 2 nền tảng API cho các ứ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 có không gian tên không được hưởng lợi từ việc hỗ trợ các tính năng mới liên tục, nên hầu hết các ứng dụng mới nên áp dụng API theo mô-đun.
  • JavaScript – theo mô-đun. SDK này dựa trên phương pháp theo mô-đun, giúp giảm kích thước SDK và tăng hiệu quả bằng các công cụ tạo JavaScript hiện đại như webpack hoặc Rollup.

API theo 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 dùng trong ứng dụng của bạn, một quy trình được gọi là "loại bỏ mã không dùng". Các ứng dụng được tạo bằng SDK này sẽ có kích thước nhỏ hơn đáng kể. Mặc dù có sẵn dưới dạng một mô-đun, nhưng API có không gian tên không có cấu trúc mô-đun nghiêm ngặt và không cung cấp mức giảm kích thước tương tự.

Mặc dù phần lớn API theo mô-đun tuân theo các mẫu tương tự như API có không gian tên, nhưng cách tổ chức mã lại khác. Nhìn chung, API có không gian tên hướng đến một mẫu không gian tên và dịch vụ, trong khi API theo mô-đun hướng đến các chức năng riêng biệt. Ví dụ: chuỗi dấu chấm của API có không gian tên, chẳng hạn như firebaseApp.auth(), được thay thế trong API theo 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 tái cấu trúc để tận dụng thiết kế ứng dụng theo 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 theo mô-đun cho các ứng dụng mới

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

Trong quá trình phát triển ứng dụng, hãy nhớ rằng mã của bạn sẽ được sắp xếp chủ yếu xung quanh các hàm. Trong API theo mô-đun, các dịch vụ được truyền dưới dạng đối số đầu tiên và sau đó hàm sẽ 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 lĩnh vực sản phẩm cũng như tài liệu tham khảo API theo mô-đun.

Cách thêm SDK web vào ứng dụng

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

Bạn có thể thêm bất kỳ thư viện nào có sẵn 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 (đối với trình đóng gói mô-đun)
  • CDN (mạng phân phối nội dung)

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

npm

Việc tải gói npm Firebase xuống (bao gồm cả cá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 Firebase SDK. 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, chẳng hạn 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 lựa chọn cho một số gói. Các 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 một trình đóng gói mô-đun như webpack hoặc Rollup sẽ cung cấp các lựa chọn tối ưu hoá để "loại bỏ" mã không dùng đến và áp dụng các polyfill nhắm đến mục tiêu. Điều này có thể 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 bản dựng, nhưng nhiều công cụ CLI chính thống 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à những 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 các SDK, bạn sẽ không cần đến công cụ tạo bản dựng và chuỗi bản dựng của bạn có thể đơn giản và dễ sử dụng hơn so với các trình đóng gói mô-đun. Nếu bạn không đặc biệt lo ngại về 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 mã nguồn 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 chính
  • 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ể của Firebase Web SDK

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ó sẵn 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ể riêng biệt cho trình duyệt và Node, 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ể 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 hoặc môi trường của công cụ và không yêu cầu bạn chọn theo cách thủ công trong hầu hết các trường hợp. Tất cả các biến thể SDK đều được thiết kế để giúp tạo các ứ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 ứng dụng Node.js dành cho máy tính hoặc IoT. Nếu mục tiêu của bạn là thiết lập quyền truy cập của quản trị viên từ các môi trường có đặ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 các trình đóng gói và khung

Khi bạn cài đặt Firebase Web SDK 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 để cho phép 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ác câu lệnh Node.js require, 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 chính xác các chế độ cài đặt của trình đóng gói để phát hiện trường điểm truy cập phù hợ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 đú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 động Firebase trong ứng dụng, bạn cần cung cấp cấu hình 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 lựa chọn Firebase" bắt buộc sau đây: apiKey, projectId và appID. Nếu bạn khởi động ứng dụng bằng các giá trị không hợp lệ hoặc bị thiếu cho "Lựa 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. Ngoại lệ cho trường hợp này là authDomain. Bạn có thể cập nhật mã này 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 Analytics trang bắt đầu.

  • Nếu bạn bật Google Analytics hoặc Realtime Database 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 bằng các giá trị cấu hình được 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 một đối tượng cấu hình có tất cả các dịch vụ được bật (các giá trị này sẽ đượ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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  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 lựa 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 thêm SDK Firebase cho đến khi toàn bộ trang đã tải xong. Nếu bạn đang sử dụng tập lệnh CDN API theo 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ó không gian tên làm một mô-đun, hãy hoàn tất các bước sau để hoãn tải:

  1. Thêm cờ defer vào mỗi thẻ script cho Firebase SDK, sau đó hoãn quá trình 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 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 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ỉ phải khởi động 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 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 giữ dự án thứ hai chưa được xác thực.

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ột máy chủ web cục bộ để phát triển

Nếu đ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ột máy chủ thay vì từ hệ thống tệp cục bộ. Bạn có thể dùng CLI Firebase để chạy một máy chủ cục bộ.

Nếu đã thiết lập Firebase Hosting cho ứng dụng của mình, 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ẽ 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 của CLI.

  2. Khởi động 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 Firebase JavaScript SDK

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

Firebase SDK JavaScript

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

Mẫu bắt đầu nhanh

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