Sử dụng Firebase trong một ứng dụng web tiến bộ (PWA)

Ứng dụng web tiến bộ (PWA) là các ứng dụng web tuân theo một bộ nguyên tắc nhằm đảm bảo người dùng có trải nghiệm đáng tin cậy, nhanh chóng và hấp dẫn.

Firebase cung cấp một số dịch vụ có thể giúp bạn thêm các tính năng tiến bộ vào ứng dụng một cách hiệu quả để đáp ứng nhiều phương pháp hay nhất về PWA, bao gồm:

Phương pháp hay nhất về PWA Cách các dịch vụ của Firebase có thể giúp bạn
An toàn và bảo mật
  • Firebase Hosting cung cấp chứng chỉ SSL miễn phí cho miền tuỳ chỉnh và miền con Firebase mặc định.
  • Firebase Authentication cho phép bạn đăng nhập người dùng trên các thiết bị một cách an toàn.
  • FirebaseUI triển khai các phương pháp hay nhất cho quy trình xác thực.
Thời gian tải nhanh
  • Firebase Hosting hỗ trợ HTTP/2 và có thể lưu vào bộ nhớ đệm cả nội dung tĩnh và động trên một CDN toàn cầu.
  • SDK Firebase JavaScript có dạng mô-đun và bạn có thể nhập linh động các thư viện khi cần.
Khả năng phục hồi của mạng
  • Với Cloud Firestore, bạn có thể lưu trữ và truy cập vào dữ liệu theo thời gian thực và ngoại tuyến.
  • Firebase Authentication duy trì trạng thái xác thực của người dùng, ngay cả khi không có mạng.
Thu hút người dùng
  • Firebase Cloud Messaging cho phép bạn gửi thông báo đẩy đến thiết bị của người dùng.
  • Với Cloud Functions for Firebase, bạn có thể tự động hoá các thông báo tương tác lại dựa trên sự kiện trên đám mây.

Trang này cung cấp thông tin tổng quan về cách nền tảng Firebase có thể giúp bạn xây dựng một PWA hiện đại, hiệu suất cao bằng cách sử dụng SDK Firebase JavaScript đa trình duyệt.

Hãy truy cập vào hướng dẫn bắt đầu của chúng tôi để thêm Firebase vào ứng dụng web của bạn.

An toàn và bảo mật

Từ việc phân phát trang web đến việc triển khai quy trình xác thực, điều quan trọng là PWA của bạn phải cung cấp quy trình làm việc an toàn và đáng tin cậy.

Phân phát PWA qua HTTPS

Dịch vụ lưu trữ hiệu quả

HTTPS bảo vệ tính toàn vẹn của trang web cũng như sự riêng tư và tính bảo mật cho người dùng của bạn. PWA phải được phân phát qua HTTPS.

Theo mặc định, Firebase Hosting sẽ phân phát nội dung của ứng dụng qua HTTPS. Bạn có thể phân phát nội dung trên miền con Firebase miễn phí hoặc trên miền tuỳ chỉnh của riêng bạn. Dịch vụ lưu trữ của chúng tôi sẽ tự động cung cấp chứng chỉ SSL cho miền tuỳ chỉnh của bạn mà không tính phí.

Truy cập vào hướng dẫn bắt đầu sử dụng Firebase Hosting để tìm hiểu cách lưu trữ PWA trên nền tảng Firebase.

Cung cấp quy trình xác thực an toàn

Quy trình xác thực thích ứng thả vào

FirebaseUI cung cấp quy trình xác thực tương thích thả xuống dựa trên Firebase Authentication, cho phép ứng dụng của bạn tích hợp quy trình đăng nhập phức tạp và an toàn mà không tốn nhiều công sức. FirebaseUI tự động điều chỉnh theo kích thước màn hình của thiết bị của người dùng và tuân theo các phương pháp hay nhất cho luồng xác thực.

FirebaseUI hỗ trợ nhiều nhà cung cấp dịch vụ đăng nhập. Thêm quy trình xác thực FirebaseUI vào ứng dụng của bạn chỉ bằng một vài dòng mã được định cấu hình cho các nhà cung cấp dịch vụ đăng nhập:

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'URL',  // the URL to direct to upon success
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ]
};

// Initialize the FirebaseUI widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);

Truy cập vào tài liệu của chúng tôi trên GitHub để tìm hiểu thêm về các tuỳ chọn cấu hình mà FirebaseUI cung cấp.

Đăng nhập người dùng trên nhiều thiết bị

Đăng nhập trên nhiều thiết bị

Bằng cách sử dụng FirebaseUI để tích hợp tính năng đăng nhập một lần chạm, ứng dụng của bạn có thể tự động đăng nhập người dùng, ngay cả trên các thiết bị khác mà họ đã thiết lập bằng thông tin đăng nhập của mình.

Bật tính năng đăng nhập một lần chạm bằng FirebaseUI bằng cách thay đổi một dòng cấu hình:

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'URL',  // the URL to direct to upon success
  authMethod: 'https://accounts.google.com',
  signInOptions: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  // Enable one-tap sign-in.
  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
};

Truy cập vào tài liệu của chúng tôi trên GitHub để tìm hiểu thêm về các tuỳ chọn cấu hình mà FirebaseUI cung cấp.

Thời gian tải nhanh

Hiệu suất cao giúp cải thiện trải nghiệm người dùng, giúp giữ chân người dùng và tăng số lượt chuyển đổi. Hiệu suất cao, chẳng hạn như "thời gian vẽ nội dung có ý nghĩa đầu tiên" và "thời gian tương tác" thấp, là một yêu cầu quan trọng đối với PWA.

Phân phát tài sản tĩnh một cách hiệu quả

Dịch vụ lưu trữ hiệu quả

Firebase Hosting phân phát nội dung của bạn qua một CDN toàn cầu và tương thích với HTTP/2. Khi bạn lưu trữ các thành phần tĩnh bằng Firebase, chúng tôi sẽ định cấu hình tất cả những điều này cho bạn. Bạn không cần làm gì thêm để tận dụng dịch vụ này.

Lưu nội dung động vào bộ nhớ đệm

Với Firebase Hosting, ứng dụng web của bạn cũng có thể phân phát nội dung động do Cloud Functions hoặc ứng dụng đóng gói trong vùng chứa Cloud Run tạo ở phía máy chủ. Khi sử dụng dịch vụ này, bạn có thể lưu nội dung động vào bộ nhớ đệm trên một CDN toàn cầu mạnh mẽ chỉ bằng một dòng mã:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

Dịch vụ này giúp bạn tránh được các lệnh gọi bổ sung đến phần phụ trợ, tăng tốc độ phản hồi và giảm chi phí.

Truy cập vào tài liệu của chúng tôi để tìm hiểu cách bạn có thể phân phát nội dung động (do Cloud Functions hoặc Cloud Run cung cấp) và bật tính năng lưu vào bộ nhớ đệm CDN bằng Firebase Hosting.

Chỉ tải dịch vụ khi cần

Bạn có thể nhập một phần SDK Firebase JavaScript để giảm thiểu kích thước tải xuống ban đầu. Hãy tận dụng SDK mô-đun này để nhập các dịch vụ Firebase mà ứng dụng của bạn cần chỉ khi cần.

Ví dụ: để tăng tốc độ vẽ ban đầu của ứng dụng, trước tiên, ứng dụng có thể tải Firebase Authentication. Sau đó, khi ứng dụng của bạn cần, bạn có thể tải các dịch vụ Firebase khác, chẳng hạn như Cloud Firestore.

Khi sử dụng trình quản lý gói như webpack, trước tiên, bạn có thể tải Firebase Authentication:

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

Sau đó, khi bạn cần truy cập vào lớp dữ liệu, hãy tải thư viện Cloud Firestore bằng cách sử dụng tính năng nhập động:

import('firebase/firestore').then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Khả năng phục hồi của mạng

Người dùng của bạn có thể không có kết nối Internet đáng tin cậy. PWA phải hoạt động tương tự như ứng dụng gốc dành cho thiết bị di động và phải hoạt động ngoại tuyến bất cứ khi nào có thể.

Truy cập vào dữ liệu ứng dụng khi không có mạng

Cloud Firestore hỗ trợ lưu trữ dữ liệu ngoại tuyến cho phép lớp dữ liệu của ứng dụng hoạt động minh bạch khi không có mạng. Khi kết hợp với Worker dịch vụ để lưu các thành phần tĩnh vào bộ nhớ đệm, PWA của bạn có thể hoạt động đầy đủ khi không có mạng. Bạn có thể bật tính năng lưu trữ dữ liệu ngoại tuyến bằng một dòng mã:

firebase.firestore().enablePersistence().then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Duy trì trạng thái xác thực khi không có mạng

Firebase Authentication lưu trữ bộ nhớ đệm cục bộ của dữ liệu đăng nhập, cho phép người dùng đã đăng nhập trước đó vẫn được xác thực ngay cả khi họ không có mạng. Trình quan sát trạng thái đăng nhập sẽ hoạt động bình thường và kích hoạt ngay cả khi người dùng tải lại ứng dụng khi không có kết nối mạng:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

Hãy truy cập vào tài liệu của chúng tôi để bắt đầu sử dụng Cloud FirestoreFirebase Authentication.

Thu hút người dùng

Người dùng muốn biết thời điểm bạn phát hành các tính năng mới cho ứng dụng và bạn muốn duy trì mức độ tương tác cao của người dùng. Thiết lập PWA để chủ động và có trách nhiệm tiếp cận người dùng.

Hiển thị thông báo đẩy cho người dùng

Với Firebase Cloud Messaging, bạn có thể đẩy thông báo có liên quan từ máy chủ của mình đến thiết bị của người dùng. Dịch vụ này cho phép bạn hiển thị thông báo kịp thời cho người dùng ngay cả khi ứng dụng đang đóng.

Tự động thu hút lại người dùng

Sử dụng Cloud Functions for Firebase để gửi cho người dùng thông báo về việc tương tác lại dựa trên các sự kiện trên đám mây, chẳng hạn như ghi dữ liệu vào Cloud Firestore hoặc xoá tài khoản người dùng. Bạn cũng có thể gửi thông báo đẩy cho người dùng khi người dùng đó có người theo dõi mới:

// Send push notification when user gets a new follower.
exports.sendNotification = functions.database.ref('/followers/{userUID}/{followerUID}')
    .onWrite((change, context) => {
      const userUID = context.params.userUID;
      const followerUID = context.params.followerUID;

      const tokens = getUserDeviceTokens(userUID);
      const name = getUserDisplayName(followerUID);

      // Notification details.
      const payload = {
        notification: {
          title: 'You have a new follower!',
          body: `${name} is now following you.`
        }
      };
      return admin.messaging().sendToDevice(tokens, payload);
    });