Ứ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 |
|---|---|
| An toàn và bảo mật |
|
| Thời gian tải nhanh |
|
| Khả năng phục hồi của 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 PWA hiện đại, hiệu quả cao bằng SDK đa trình duyệt Firebase JavaScript.
Hãy xem hướng dẫn bắt đầu sử dụng để thêm Firebase vào ứng dụng web.
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 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
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, 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 mình. 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 và hoàn toàn miễn phí.
Hãy xem 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 quy trình xác thực thích ứ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 với ít 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ị 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 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 xem 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 định cấu hình do FirebaseUIcung cấp.
Đăng nhập người dùng trên các 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 bằng thông tin đăng nhập.
Bật tính năng đăng nhập bằng một lần nhấn 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 xem 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 định cấu hình do FirebaseUIcung 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 số 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 CDN toàn cầu và tương thích với HTTP/2. Khi bạn lưu trữ 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 phải 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 được tạo ở phía máy chủ bằng Cloud Functions hoặc ứng dụng được chứa trong vùng chứa Cloud Run. 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 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 cho phé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 xem 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 các dịch vụ khi cần
Bạn có thể nhập một phần Firebase JavaScript SDK để giữ cho 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 cần chỉ khi cần.
Ví dụ: để tăng tốc độ hiển thị ban đầu của ứng dụng, ứng dụng có thể tải Firebase Authentication trước. Sau đó, khi ứng dụng 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, bạn có thể tải lần đầu 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 Cloud Firestore thư viện 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ó 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à 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 ngoại tuyến
Cloud Firestore hỗ trợ tính 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 ngoại tuyến một cách minh bạch. Kết hợp với Service Worker để lưu thành phần tĩnh vào bộ nhớ đệm, PWA có thể hoạt động đầy đủ khi ngoại tuyến. 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 ngoại tuyến
Firebase Authentication giữ một bộ nhớ đệm cục bộ về 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 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 xem 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 khi 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 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 đã đóng.
Tự động hoá việc tương tác lại với người dùng
Khi sử dụng Cloud Functions for Firebase, hãy gửi thông báo tương tác lại cho người dùng dựa trên các sự kiện trên đám mây, ví dụ: a ghi dữ liệu vào Cloud Firestore hoặc a 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); });