Khi đang 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 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 chỉ cho bạ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 các cộng đồng trực tuyến của chúng tôi. 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 liệu 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 đặt tên và mô-đun
Firebase cung cấp hai bề mặt API cho ứng dụng Web:
- JavaScript - được đặt tên. Đây là giao diện JavaScript được 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 đặt 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 các ứng dụng mới nên áp dụng API mô-đun.
- JavaScript - mô-đun . SDK này dựa trên cách tiếp cận mô-đun giúp giảm kích thước SDK và đạt hiệu quả cao hơn bằng các công cụ xây 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ụ xây dựng giúp loại bỏ mã không được sử dụng trong ứng dụng của bạn, quá trình này đượ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 thiểu kích thước đá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 mô-đun tuân theo các mẫu giống như API được đặt tên nhưng cách tổ chức mã lại khác. Nói chung, API không gian tên được định hướng theo không gian tên và mẫu dịch vụ, trong khi API mô-đun được định hướng theo các chức năng 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 phiên bản Xác thực.
Điều này có nghĩa là các ứng dụng Web được tạo bằng API không gian tên yêu cầu phải tái cấu trúc để tận dụng thiết kế ứng dụng 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 bạn đang bắt đầu tích hợp mới với Firebase, bạn có thể chọn tham gia API mô-đun khi thêm và khởi chạy SDK .
Khi bạn phát triển ứng dụng của mình, 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 mô-đun, các dịch vụ được chuyển làm đối số đầu tiên và sau đó hàm sẽ 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 ví dụ và 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á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 tùy thuộc vào công cụ bạn đang sử dụng với ứng dụng của mình (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 pháp được hỗ trợ:
- npm (đối với 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 chọn trong số các tùy chọn có sẵn.
npm
Việc tải xuống gói npm Firebase (bao gồm cả gói trình duyệt và gói Node.js) sẽ cung cấp cho bạn bản sao cục bộ của SDK Firebase. 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 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 dưới dạng tùy chọn cho một số gói. Các gói Node.js cần thiết cho bước kết xuất phía máy chủ (SSR) của khung SSR.
Việc sử dụng npm với trình đóng gói mô-đun như webpack hoặc Rollup sẽ cung cấp các tùy chọn tối ưu hóa để "rung cây" mã không được sử dụng và áp dụng các polyfill được nhắm mục tiêu, điều này có thể làm giảm đáng kể 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ể tăng thêm độ phức tạp cho chuỗi xây dựng và cấu hình của bạn, nhưng nhiều 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 Angular , React , Vue , Next và các công cụ 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
- Cần thiết cho 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à 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. 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ể có xu hướng đơn giả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 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ư dịch mã 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ông cụ xây dựng.
Các biến thể SDK web của Firebase
SDK Web của Firebase có thể được sử dụng trong cả ứng dụng trình duyệt và Nút. 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ể 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í 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 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 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 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 SDK quản trị Firebase thay thế.
Phát hiện môi trường với các 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 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âu lệnh require
Node.js, SDK sẽ tìm gói dành riêng cho nút. Mặt khác, cài đặt gói của bạn phải được tính toán chính xác để phát hiện trường điểm nhập phù hợp trong tệp package.json
của bạn (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 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 cấu hình dự án Firebase cho ứng dụng của mình. Bạn có thể lấy đối tượng cấu hình Firebase của mình bất cứ lúc nào.
Chúng tôi khuyên bạn không nên chỉnh sửa thủ công đối tượng cấu hình của mì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 chạy ứng dụng của mình với 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 đã 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 trên trang bắt đầu Analytics .Nếu bạn bật Google Analytics hoặc Cơ sở dữ liệu thời gian thực 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 mình được cập nhật với các giá trị cấu hình liên quan (
measurementId
vàdatabaseURL
tương ứng). Bạn có thể lấy đối tượng cấu hình Firebase của mình bất cứ lúc nào.
Đây là định dạng của một đố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
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 SDK Firebase cho đến khi toàn bộ trang được tải. 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 làm mô-đun, hãy hoàn thành các bước sau để trì hoãn tải:
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 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>
Tạo tệp
init-firebase.js
, sau đó đưa 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 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 modular API
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 namespaced API
// 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ữ nguyên dự án thứ hai.
SDK JavaScript Firebase cho phép bạn khởi tạo và sử dụng nhiều dự án Firebase trong một ứng dụng cùng lúc, với mỗi dự án sử dụng thông tin cấu hình Firebase riêng.
Web modular API
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 namespaced API
// 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 một ứng dụng web, một số phần của SDK JavaScript Firebase yêu cầu bạn phân phát ứng dụng web của mình 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 đã thiết lập Firebase Hosting cho ứng dụng của mình thì có thể bạn đã hoàn thành một số bước bên dưới.
Để phân phát ứ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.
Hãy truy cập tài liệu về Firebase CLI để 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.
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
Liên kết thư mục ứng dụng cục bộ của bạn với Firebase
Tạo tệp
firebase.json
(tệp bắt buộc cho Firebase Hosting)Nhắc bạn chỉ định thư mục gốc công khai chứa các tệp tĩnh công khai của bạn (HTML, CSS, JS, v.v.)
Tên mặc định cho thư mục mà Firebase tìm kiếm là "công khai". Bạn cũng có thể đặt thư mục chung sau này bằng cách sửa đổi trực tiếp tệp
firebase.json
của mình.
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 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 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 SDK JavaScript của Firebase đượ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 khởi động nhanh
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 các phần khởi động nhanh này trong kho lưu trữ khởi động nhanh Firebase 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.