Tìm hiểu về Firebase cho web

Khi phát triển ứng dụng web bằng Firebase, bạn có thể gặp phải những 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 đú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 có thêm chủ đề mà bạn muốn tìm hiểu hay không.

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

Firebase cung cấp hai giao diện API cho ứng dụng web:

  • JavaScript - 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ũ hơn. 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 - mô-đun. SDK này dựa trên phương pháp tiếp cận theo mô-đun giúp giảm kích thước SDK và tăng hiệu quả với các công cụ xây dựng 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ụ tạo 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ể. 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 theo mô-đun tuân theo các mẫu giống như API có không gian tên, nhưng cách tổ chức mã lại khác. Nhìn chung, API không gian tên hướng tới không gian tên và mẫu dịch vụ, trong khi API mô-đun hướng tới các hàm rời rạc. 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.

Khi phát triển ứng dụng, hãy nhớ rằng mã của bạn sẽ được tổ chức 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 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 của mình phụ thuộc vào công cụ bạn đang sử dụng với ứng dụng (như trình đóng 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 các 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 Thêm Firebase vào Ứng dụng JavaScript của bạn. Phần còn lại của phần này chứa thông tin giúp bạn lựa chọn từ các tùy chọn có sẵn.

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.

Sử dụng npm với một trình đóng gói module như webpack hoặc Rollup cung cấp các tùy chọn tối ưu hóa để "phân loại cây" mã không sử dụng 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 thêm độ phức tạp cho cấu hình và chuỗi build của bạn, 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à những công cụ khác.

Tóm lại:

  • Cung cấp khả năng tối ưu hóa 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
  • Cần thiết cho SSR với 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ễ làm việc hơn so với trình đóng gói mô-đun. Nếu bạn không quá quan tâm đến kích thước cài đặt của ứng dụng và không 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 tốt.

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 chính
  • 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ể 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 khả dụng 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ể đều đượ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 cấu hình để cung cấp biến thể phù hợp 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 lựa chọn 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 xây dựng ứng dụng web hoặc ứng dụng khách để người dùng cuối có thể truy cập, chẳng hạn như trong ứng dụng máy tính để bàn 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 truy cập quản trị từ 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 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 khả năng phát hiện môi trường chi tiết để kích hoạ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á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, cài đặt của bundler phải được thiết lập chính xác để phát hiện đúng trường điểm nhập trong tệp package.json (ví dụ: main, browser hoặc module). Nếu gặp lỗi thời gian chạy với SDK, hãy kiểm tra để đảm bảo bundler được cấu hình để ưu tiên đúng loại bundle cho môi trường của bạn.

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

Để khởi tạo Firebase trong ứng dụng của bạn, 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.

  • Chúng tôi không khuyên bạn nên chỉnh sửa thủ công đối tượng cấu hình, đặc biệt là các "tùy chọn Firebase" bắt buộc sau: apiKey, projectId và appID. Nếu bạn khởi tạo ứng dụng của mình bằng các giá trị không hợp lệ hoặc bị thiếu đối với các "tùy chọn Firebase" bắt buộc này, người dùng ứng dụng có thể gặp phải sự cố nghiêm trọng. Ngoại lệ cho điều này là authDomain, có thể được 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, đố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 đả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 với các giá trị cấu hình liên quan (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.

Sau đâ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",
  // 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

Tùy 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 Firebase SDK vào cho đến khi toàn bộ trang được tải xong. Nếu bạn đang sử dụng tập lệnh CDN API mô-đun với <script type="module">, đâ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ô-đun, hãy hoàn thành 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 tạo 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 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ỉ cần khởi tạo Firebase trong một ứng dụng mặc định duy nhất. Bạn có thể truy cập 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 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ể sử dụng Firebase CLI để chạy máy chủ cục bộ.

Nếu bạn đã thiết lập Firebase Hosting cho ứng dụng của mình, có thể bạn đã hoàn tất một số bước dưới đây.

Để 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 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 động dự án Firebase. Chạy lệnh sau từ thư mục gốc của thư mục ứng dụng cục bộ của bạn:

    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ợ 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 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 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.