Ứ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ộ một cách hiệu quả vào ứng dụng để đáp ứng nhiều phương pháp hay nhất về PWA, bao gồm:
| Phương pháp hay nhất cho 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 tạo một PWA hiện đại, hiệu suất cao bằng cách sử dụng Firebase JavaScript SDK đa trình duyệt của chúng tôi.
Hãy xem 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 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 phụ 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 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 xem hướng dẫn bắt đầu sử dụng Firebase Hosting để tìm hiểu cách bạn có thể 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 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à an toàn 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ị mà người dùng sử dụng và tuân theo các phương pháp hay nhất cho quy trình uỷ quyền.
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ề nhiều lựa chọn cấu hình do 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 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 bằng một lần chạm bằng cách sử dụ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ề nhiều lựa chọn cấu hình do 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 tốt, chẳng hạn như "thời gian hiển thị 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 các 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 CDN toàn cầu và tương thích với HTTP/2. Khi bạn lưu trữ các tài sả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 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 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 các 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. Tận dụng SDK theo mô-đun này để chỉ nhập các dịch vụ Firebase mà ứng dụng của bạn cần khi cần.
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 các dịch vụ này, 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 một 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 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 ổn định. PWA phải hoạt động tương tự như ứng dụng di động gốc 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ợ khả năng duy 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. Kết hợp với Service Worker để lưu vào bộ nhớ đệm các tài sản tĩnh, 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 duy 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 kết nối mạng. Trình theo dõi 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 của mình 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ể gửi các 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 đang đóng.
Tự động hoá việc thu hút lại người dùng
Bằng cách sử dụng Cloud Functions for Firebase, hãy 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); });