Catch up on everthing we announced at this year's Firebase Summit. Learn more

Tìm hiểu thêm về Web và Firebase

Khi đang 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 lạ hoặc các 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 một trong chúng tôi cộng đồng trực tuyến . Chúng tôi cũng sẽ cập nhật trang này với các chủ đề mới theo định kỳ, vì vậy hãy kiểm tra lại xem chúng tôi đã thêm chủ đề bạn muốn tìm hiểu chưa.

SDK phiên bản 8 và 9

Firebase cung cấp hai phiên bản SDK cho ứng dụng Web:

  • Phiên bản 8. Đây là giao diện JavaScript mà căn cứ hỏa lực đã duy trì trong nhiều năm và quen thuộc với các nhà phát triển web với ứng dụng căn cứ hỏa lực hiện có. Vì Firebase sẽ xóa hỗ trợ cho phiên bản này sau một chu kỳ phát hành chính, nên các ứng dụng mới sẽ thay vào đó áp dụng phiên bản 9.
  • Modular phiên bản 9. SDK này giới thiệu một cách tiếp cận mô-đun mà cung cấp giảm kích thước SDK và hiệu quả cao hơn với hiện đại JavaScript xây dựng các công cụ như webpack hoặc Rollup .

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

Mặc dù phần lớn SDK phiên bản 9 tuân theo các mẫu tương tự như phiên bản 8, nhưng cách tổ chức của mã lại khác. Nói chung, phiên bản 8 hướng tới không gian tên và mẫu dịch vụ, trong khi phiên bản 9 hướng tới các chức năng rời rạc. Ví dụ, phiên bản 8 của chấm-chaining, chẳng hạn như firebaseApp.auth() , được thay thế trong phiên bản 9 bởi một đơn getAuth() chức năng mà mất firebaseApp và trả về một thể hiện xác thực.

Điều này có nghĩa là các ứng dụng Web được tạo với phiên bản 8 trở xuống yêu cầu cấu trúc lại để tận dụng phương pháp mô-đun của phiên bản 9. Firebase cung cấp các thư viện compat để giảm bớt quá trình chuyển đổi đó; xem các hướng dẫn nâng cấp để biết thêm chi tiết.

Những gì được hỗ trợ?

Mặc dù phiên bản 8 và phiên bản 9 có các kiểu mã khác nhau, nhưng chúng cung cấp hỗ trợ rất giống nhau cho các tính năng và tùy chọn của Firebase. Như chúng tôi sẽ mô tả chi tiết trong hướng dẫn này, cả hai phiên bản SDK đều hỗ trợ các biến thể JavaScript và Node.js cùng với một số tùy chọn để thêm / cài đặt SDK.

Thêm SDK với 8.0 (Đã đặt tên) 9.0 (Mô-đun)
npm
  • Đối với JavaScript
  • Đối với Node.js
  • Đối với JavaScript
  • Đối với Node.js
CDN (Mạng phân phối nội dung)
  • Đối với JavaScript
  • Đối với JavaScript
Lưu trữ URL
  • Đối với JavaScript
  • Đối với Node.js

Để biết thêm thông tin, xem cách để thêm SDK web để ứng dụng của bạncăn cứ hỏa lực Web SDK biến thể sau trên trang này.

Phiên bản 9 cho các ứng dụng mới

Nếu bạn đang bắt đầu trên một tích hợp mới với căn cứ hỏa lực, bạn có thể chọn tham gia vào SDK phiên bản 9 khi bạn thêm và khởi SDK .

Khi bạn phát triển ứng dụng của bạn, hãy ghi nhớ rằng mã của bạn sẽ được tổ chức chủ yếu xung quanh các chức năng. Trong phiên bản 9, các dịch vụ được chuyển làm đối số đầu tiên và sau đó hàm sử dụng các 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, vui lòng xem hướng dẫn cho từng khu vực sản phẩm cũng như các tài liệu tham khảo phiên bản 9 .

Các 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.v. Cách bạn thêm SDK Firebase 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 của mình (như gói mô-đun) hoặc nếu ứng dụng của bạn chạy trong môi trường không phải trình duyệt, chẳng hạn như Node.js.

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

  • npm (dành cho các gói mô-đun và Node.js)
  • CDN (mạng phân phối nội dung)

Để được hướng dẫn cài đặt chi tiết, xem thêm căn cứ hỏa lực để ứ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 chọn từ các tùy chọn có sẵn.

npm

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

Sử dụng NPM với một mô-đun bundler như webpack hoặc Rollup cung cấp tùy chọn tối ưu hóa để "cây rung" mã không sử dụng và áp dụng polyfills nhắm mục tiêu, có thể làm giảm đáng kể các dấu chân kích thước của ứng dụng của bạn. Việc triển khai các tính năng này có thể làm phức tạp thêm một số cấu hình và chuỗi xây dựng của bạn, nhưng các công cụ CLI chính thống khác nhau có thể giúp giảm thiểu điều đó. Những công cụ này bao gồm kiễu góc , Phản ứng , Vue , Tiếp theo , và những người khác.

Tóm tắt:

  • Cung cấp tối ưu hóa kích thước ứng dụng có giá trị
  • Công cụ mạnh mẽ có sẵn để quản lý các mô-đun
  • Bắt buộc đối với SSR với 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à một phương pháp 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 xây dựng của bạn có thể có xu hướng đơn giản hơn và dễ làm việc hơn so với các gói mô-đun. Nếu bạn không đặc biệt lo lắng 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 từ TypeScript, thì CDN có thể là một lựa chọn tốt.

Tóm tắt:

  • Quen thuộc và đơn giản
  • Thích hợp khi kích thước ứng dụng không phải là mối quan tâm lớn
  • Thích 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 web Firebase

Hiện tại, Firebase cung cấp hai biến thể SDK Web:

  • Một gói JavaScript hỗ trợ tất cả các tính năng của Firebase để sử dụng trong trình duyệt.
  • Gói Node.js phía máy khách hỗ trợ nhiều — nhưng không phải tất cả — các tính năng của Firebase. Xem danh sách các môi trường hỗ trợ .

Cả hai biến thể SDK này đề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 để 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 truy cập quản trị từ môi trường đặc quyền (chẳng hạn như máy chủ) sử dụng các căn cứ hỏa lực SDK quản trị thay thế.

Phát hiện môi trường với các gói và khuôn khổ

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 cung cấp tính 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 Node.js require báo cáo, SDK thấy bó Node-cụ thể. Nếu không, các thiết lập của bundler của bạn phải được hình một cách chính xác để phát hiện các trường điểm vào ngay trong bạn package.json tập tin (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 rằng trình gói của bạn được định cấu hình để ưu tiên loại gói phù hợp 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 cấu hình dự án Firebase của ứng dụng. Bạn có thể có được đối tượng cấu hình căn cứ hỏa lực của bạn bất cứ lúc nào.

  • Chúng tôi khuyên bạn không nên chỉnh sửa đối tượng cấu hình của bạn, đặc biệt là yêu cầu "tùy chọn căn cứ hỏa lực" sau: apiKey , projectId , và appID . Nếu bạn khởi chạy ứng dụng của mình bằng các giá trị không hợp lệ hoặc bị thiếu cho các "tùy 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 sự cố nghiêm trọng.

  • Nếu bạn kích hoạt Google Analytics trong dự án căn cứ hỏa lực của bạn, đối tượng cấu hình của bạn có chứa các lĩnh vực measurementId . Tìm hiểu thêm về lĩnh vực này trong Analytics nhận trang bắt đầu .

Đâ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):

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

Thư viện có sẵn

Các tùy chọn thiết lập bổ sung

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

Bạn có thể trì hoãn việc đưa vào các SDK Firebase cho đến khi tải xong toàn bộ trang. Nếu bạn đang sử dụng phiên bản 9 kịch bản CDN 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 phiên bản 8 làm mô-đun, hãy hoàn thành các bước sau để hoãn tải:

  1. Thêm một defer cờ cho mỗi script thẻ cho các căn cứ hỏa lực SDK, sau đó trì hoãn việc khởi tạo căn cứ hỏa lực sử dụng một kịch bản thứ hai, ví dụ:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Tạo một init-firebase.js tập tin, sau đó bao gồm những điều sau đây trong tập tin:

    // 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. Bạn có thể truy cập Firebase từ ứng dụng đó theo hai cách tương đương:

Phiên bản web 9

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

Phiên bản web 8

// 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 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ữ cho dự án thứ hai chưa được xác thực.

SDK JavaScript của Firebase cho phép bạn khởi tạo và sử dụng đồng thời nhiều dự án Firebase trong một ứng dụng, với mỗi dự án sử dụng thông tin cấu hình Firebase của riêng dự án đó.

Phiên bản web 9

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

Phiên bản web 8

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

Nếu bạn đang xây dựng ứng dụng web, một số phần của SDK JavaScript Firebase yêu cầu bạn phân phối ứng dụng web của mình từ máy chủ chứ không phải từ hệ thống tệp cục bộ. Bạn có thể sử dụng các căn cứ hỏa lực CLI để chạy một máy chủ địa phương.

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

Để cung cấp ứng dụng web của mình, bạn sẽ sử dụng Firebase CLI, một công cụ dòng lệnh.

  1. Hãy truy cập vào tài liệu căn cứ hỏa lực CLI để biết cách cài đặt CLI hoặc cập nhật lên phiên bản mới nhất của nó .

  2. Khởi tạo dự án Firebase của bạn. 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ủ địa phương để phát triển. 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 serve

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

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

SDK JavaScript của Firebase

Hầu hết các căn cứ hỏa lực Javascript SDK được phát triển như là thư viện mã nguồn mở trong cộng đồng của chúng tôi kho căn cứ hỏa lực GitHub .

Bắt đầu nhanh mẫu

Firebase duy trì một bộ sưu tậ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 quickstarts ở nơi công cộng của chúng tôi kho quickstart căn cứ hỏa lực GitHub . Bạn có thể sử dụng các phần khởi động nhanh này làm mã ví dụ để sử dụng SDK Firebase.