Ứng dụng web tiến bộ (PWA) là ứng dụng web tuân theo một bộ nguyên tắc nhằm đảm bảo người dùng có đượ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ể trợ giúp |
|---|---|
| An toàn và bảo mật |
|
| Thời gian tải nhanh |
|
| Khả năng phục hồi mạng |
|
| Thu hút người dùng |
|
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 Firebase JavaScript SDK trên nhiều trình duyệt.
Hãy truy cập vào hướng dẫn bắt đầu sử dụng 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 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 một quy trình làm việc an toàn và đáng tin cậy.
Phân phát PWA qua HTTPS
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.
Firebase Hosting theo mặc định 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 của mình trên một miền con miễn phí của Firebase 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 tự động cung cấp chứng chỉ SSL cho miền tuỳ chỉnh của bạn mà không mất phí.
Hãy 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
FirebaseUI cung cấp một quy trình xác thực thích ứng, có thể thả vào dựa trên Firebase Authentication, cho phép ứng dụng của bạn tích hợp một quy trình đăng nhập tinh vi và bảo mật mà không tốn nhiều công sức. FirebaseUI tự động điều chỉnh cho phù hợp với kích thước màn hình của thiết bị người dùng và tuân theo các phương pháp hay nhất cho quy trình 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);
Hãy 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 lựa 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ị
Bằng cách sử dụng FirebaseUI để tích hợp tính năng đăng nhập bằng một lần nhấn, ứ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 thông tin đăng nhập.
Bật tính năng đăng nhập bằng 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 };
Hãy 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 lựa 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ữ chân người dùng và tăng lượt chuyển đổi. Hiệu suất cao, chẳng hạn như "thời gian hiển thị nội dung đầ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 thành phần tĩnh một cách 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 Cloud Run ứng dụng trong vùng chứa 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í.
Hãy 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 (dựa trên Cloud Functions hoặc Cloud Run) 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ữ cho kích thước tải xuống ban đầu ở mức tối thiể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 chỉ cần khi cần thiết.
Ví dụ: để tăng tốc độ hiển thị 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 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 lệnh 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 ổn định. 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 khi không có mạng 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ợ tính năng 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 ngoại tuyến một cách minh bạch. Khi kết hợp với Trình chạy 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 hoàn toàn 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 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ọ 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ó 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 Firestore và Firebase 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ủ đế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 đã đóng.
Tự động hoá hoạ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 tương tác lại 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 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); });