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

Khi 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 hoặc lĩnh vực bạn cần thêm thông tin để đưa ra quyết định đúng đắn cho dự án của bạn. Trang này nhằm trả lời những câu hỏi đó hoặc hướng bạn đế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 một trong cộng đồng trực tuyến. 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: không gian tên và mô-đun

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

  • JavaScript – không gian tên. Đây là giao diện JavaScript mà Firebase được duy trì trong nhiều năm và quen thuộc với các nhà phát triển web có Firebase. Bởi vì API không gian tên không được hưởng lợi từ hỗ trợ tính năng mới, hầu hết các ứng dụng mới sẽ sử dụng API 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 được hiệu quả cao hơn với JavaScript hiện đại công cụ tạo bản dựng như webpack hoặc Tổng hợp.

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ã không hợp lệ được dùng trong ứng dụng của bạn, một quá trình được gọi là "châu cây". Ứ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. API không gian tên, mặc dù có sẵn dưới dạ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 đều tuân theo các mẫu giống như API không gian tên, cách tổ chức mã là khác nhau. Nhìn chung, API không gian tên được điều hướng theo một không gian tên và mẫu dịch vụ, còn API mô-đun được định hướng về phía các hàm rời rạc. Ví dụ: chuỗi dấu chấm của API 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 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ó vùng chứa tên yêu cầu tái cấu trúc để tận dụng thiết kế ứng dụng theo mô-đun. Xem hướng dẫn nâng cấp để biết thêm chi tiết.

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

Nếu đang bắt đầu một quá trình tích hợp mới với Firebase, bạn có thể chọn tham gia mô-đun API khi bạn 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 gói đầu tiên đối số và hàm này sau đó 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 các 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 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 các thư viện JavaScript cho hầu hết các sản phẩm của Firebase, bao gồm Remote Config, FCM và các lý do 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ư một mô-đun) gói).

Bạn có thể thêm bất kỳ các thư viện có sẵn cho ứ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 bộ 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 mục này chứa thông tin để giúp bạn chọn từ những tuỳ chọn có sẵn.

bước/phút

Tải gói npm Firebase xuống (bao gồm cả trình duyệt và Node.js Bundle) 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, 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ần có các gói Node.js để hiển thị phía máy chủ (SSR) bước trong khuôn khổ SSR.

Sử dụng npm với một gói mô-đun, chẳng hạn như webpack hoặc Bản tổng hợp giúp tối ưu hoá tuỳ chọn "lắc cây" mã chưa dùng đến và áp dụng các đoạn mã polyfill được nhắm mục tiêu. giúp giảm đáng kể kích thước của ứng dụng. Việc triển khai những tính năng này có thể làm cho cấu hình và chuỗi bản dựng của bạn trở nên phức tạp hơn, nhưng nhiều Các 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 Góc, Phản ứng, Vue, Tiếp theo và các sự kiện khác.

Tóm lại:

  • Tối ưu hoá kích thước ứng dụng một cách hiệu quả
  • Cung cấp 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)

Thêm thư viện được lưu trữ trên CDN của Firebase là phương thức thiết lập SDK đơn giản có thể quen thuộc với nhiều nhà phát triển. Sử dụng CDN để thêm SDK, bạn sẽ không cần công cụ xây dựng và chuỗi bản dựng của bạn có thể có xu hướng đơn giản và dễ làm việc hơn so với các trình 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ó yêu cầu đặc biệt như khi 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à vấn đề 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ể Firebase Web SDK

Bạn có thể sử 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 dù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ể trình duyệt và Nú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í cung cấp Các biến thể Cordova hoặc React gốc. SDK Web được định cấu hình để cung cấp 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 nên trong hầu hết các trường hợp đều phải được chọn thủ công. Tất 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 để có quyền truy cập của người dùng cuối, chẳng hạn như trong ứng dụng Node.js trên máy tính hoặc ứng dụng IoT. Nếu 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ủ) sử dụng Firebase Admin SDK.

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

Khi bạn cài đặt Firebase Web SDK bằng npm, JavaScript và Node.js đã cài đặt cả hai phiên bản. 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 mình.

Nếu mã của bạn sử dụng câu lệnh require của Node.js, thì SDK sẽ tìm các lệnh dành riêng cho nút gói. Nếu không, cài đặt của bộ gói phải được xác định chính xác để phát hiện trường điểm truy cập bên phải 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 để hãy đảm bảo bộ gói của bạn đượ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 của mình, bạn cần cung cấp Firebase của ứng dụng cấu hình dự án. Bạn có thể nhận 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à sau "các tuỳ chọn Firebase" bắt buộc: apiKey, projectIdappID. 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 giá trị bắt buộc này "Tùy chọn Firebase", 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, có thể được cập nhật sau Các phương pháp hay nhất để sử dụng signInWithChuyển hướng.

  • Nếu bạn đã bật Google Analytics trong dự án Firebase, thì cấu hình của bạn đối tượng 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ủa bạn đã được cập nhật với các giá trị cấu hình liên quan (measurementIddatabaseURL). Bạn có thể nhận cấu hình Firebase đối tượng ở 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 đã bật tất cả các dịch vụ (các giá trị này được điền tự động):

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 chế độ thiết lập khác

Trì hoãn tải Firebase SDK (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">, đây là hành vi mặc định. Nếu bạn đang sử dụng tập lệnh CDN không gian tên 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 từng thẻ script cho Firebase SDK, sau đó trì hoãn 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 đó đưa những 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 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();

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();

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 bất cứ lúc nào. Ví dụ: bạn có thể muốn đọc dữ liệu từ cơ sở dữ liệu của một Firebase dự án 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 không 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 lúc, trong đó mỗi dự án sử dụng Firebase riêng thông tin cấu hình.

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);

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();

Chạy máy chủ web cục bộ cho mục đích 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 JavaScript Firebase sẽ yêu cầu bạn phân phát ứng dụng web của mình 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áy chủ cục bộ.

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

Để 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 CLI của 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ừ 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 sau đây từ gốc của thư mục ứng dụng cục bộ của bạn:

    firebase serve

Tài nguyên nguồn mở dành 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 nội dung đóng góp và ý kiến 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ữ Firebase của Firebase.

Bắt đầu nhanh về mẫu

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. Tìm những phần bắt đầu nhanh này trong cộng đồng Kho lưu trữ khởi động nhanh Firebase GitHub. Bạn có thể sử dụng các bước khởi động nhanh này làm mã mẫu để sử dụng Firebase SDK.