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

Ứng dụng web lũy tiến (PWA) là các ứng dụng web tuân theo một bộ nguyên tắc nhằm đảm bảo rằng người dùng của bạn 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 của mình 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 Dịch vụ Firebase có thể trợ giúp như thế nào
An toàn và bảo mật
  • Firebase Hosting cung cấp miễn phí chứng chỉ SSL cho miền tùy chỉnh và miền phụ Firebase mặc định của bạn.
  • Xác thực Firebase 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 luồng 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 của bạn trên CDN toàn cầu.
  • SDK JavaScript của Firebase có dạng mô-đun và bạn có thể nhập động các thư viện khi cần.
Khả năng phục hồi mạng
  • Với Cloud Firestore , bạn có thể lưu trữ và truy cập dữ liệu theo thời gian thực và ngoại tuyến.
  • Xác thực Firebase duy trì trạng thái xác thực của người dùng, ngay cả khi ngoại tuyến.
Thu hút người dùng
  • Firebase Cloud Messaging cho phép bạn gửi tin nhắn đẩy tới thiết bị của người dùng.
  • Với Chức năng đám mây dành cho Firebase , bạn có thể tự động hóa các thông báo tương tác lại dựa trên các 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 PWA hiện đại, hiệu suất cao bằng cách sử dụng SDK JavaScript Firebase trên nhiều trình duyệt của chúng tôi.

Hãy truy cập 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ục vụ trang web của bạn đến triển khai luồng 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ục vụ PWA của bạn qua HTTPS

Dịch vụ lưu trữ hiệu suất

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

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

Hãy xem hướng dẫn bắt đầu sử dụng Dịch vụ lưu trữ Firebase để tìm hiểu cách bạn có thể lưu trữ PWA của mình trên nền tảng Firebase.

Cung cấp luồng xác thực an toàn

Luồng xác thực đáp ứng thả vào

FirebaseUI cung cấp luồng xác thực phản hồi tùy chọn dựa trên Xác thực Firebase , cho phép ứng dụng của bạn tích hợp luồng đă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 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 luồng 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 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);

Hãy truy cập tài liệu của chúng tôi trong GitHub để tìm hiểu thêm về các tùy chọn cấu hình khác nhau do FirebaseUI cung cấp.

Đăng nhập người dùng trên các 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 chạm , ứng dụng của bạn có thể tự động đăng nhập cho người dùng, ngay cả trên các thiết bị khác nhau mà họ đã thiết lập bằng thông tin xác thực đăng nhập của mình.

Cho phép đăng nhập một 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
};

Hãy truy cập tài liệu của chúng tôi trong GitHub để tìm hiểu thêm về các tùy chọn cấu hình khác nhau do FirebaseUI cung cấp.

Thời gian tải nhanh

Việc có hiệu suất tuyệt vời sẽ cải thiện trải nghiệm người dùng, giúp giữ chân người dùng và tăng chuyển đổi. Hiệu suất tuyệt vời, chẳng hạn như "thời gian sơn 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ục vụ tài sản tĩnh của bạn một cách hiệu quả

Dịch vụ lưu trữ hiệu suất

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

Lưu trữ nội dung động của bạn

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

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

Dịch vụ này cho phép bạn tránh các cuộc gọi bổ sung tới hệ thống phụ trợ của mình, tăng tốc độ phản hồi và giảm chi phí.

Hãy truy cập 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 (được cung cấp bởi Cloud Functions hoặc Cloud Run) và bật bộ nhớ đệm CDN với Firebase Hosting.

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

SDK JavaScript Firebase có thể được nhập một phần để giữ kích thước tải xuống ban đầu ở mức tối thiểu. 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 chỉ cần khi cần.

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

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

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 lớp dữ liệu của mình, 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 mạng

Người dùng của bạn có thể không có quyền truy cập internet đáng tin cậy. PWA phải hoạt động tương tự như ứng dụng di động gốc và sẽ hoạt động ngoại tuyến bất cứ khi nào có thể.

Truy cập dữ liệu ứng dụng của bạn ngoại tuyến

Cloud Firestore hỗ trợ tính liên tục của dữ liệu ngoại tuyến , cho phép lớp dữ liệu của ứng dụng của bạn hoạt động ngoại tuyến một cách minh bạch. Kết hợp với Service Workers để lưu trữ nội dung tĩnh của bạn , PWA của bạn hoàn toàn có thể hoạt động ngoại tuyến. 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 ngoại tuyến

Xác thực Firebase giữ 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ọ ngoại tuyến. 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 của bạn tải lại ứng dụng khi ngoại tuyến:

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

Hãy truy cập tài liệu của chúng tôi để bắt đầu với Cloud FirestoreXác thực Firebase .

Thu hút người dùng

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

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

Với Nhắn tin qua đám mây Firebase , bạn có thể đẩy các 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 ứng dụng.

Tự động tương tác lại với người dùng

Sử dụng Chức năng đám mây cho Firebase , gửi thông báo tương tác lại cho người dùng của bạn dựa trên các sự kiện trên đám mây, ví dụ : ghi dữ liệu vào Cloud Firestore hoặc xóa tài khoản người dùng . Bạn cũng có thể gửi thông báo đẩy tới 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);
    });