Ứng dụng web tiến bộ (PWA) là các ứng dụng web tuân theo bộ nguyên tắc nhằm đảm bảo rằng 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 một cách hiệu quả cho ứng dụng của bạn nhằm đá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ụ 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 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 tạo một PWA hiện đại, hiệu suất cao sử dụng trên nhiều trình duyệt của chúng tôi SDK JavaScript Firebase.
Truy cập vào hướng dẫn bắt đầu sử dụng để 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 rằng PWA của bạn 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
Giao thức HTTPS bảo vệ tính toàn vẹn của trang web cũng như bảo vệ quyền riêng tư và 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 của mình mà không tốn phí Firebase-miền con hoặc của riêng bạn miền tuỳ chỉnh. dịch vụ lưu trữ cung cấp chứng chỉ SSL cho miền tuỳ chỉnh của bạn một cách tự động và miễn phí.
Truy cập vào 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 bảo mật
FirebaseUI cung cấp luồng xác thực đáp ứng dựa trên Firebase Authentication, cho phép ứng dụng của bạn để tích hợp một luồng đă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 theo kích thước màn hình thiết bị của người dùng và tuân thủ 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 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/ghé qua tài liệu của chúng tôi trên GitHub để hãy tìm hiểu thêm về các tuỳ chọn cấu hình khác nhau do FirebaseUI.
Đă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 đă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 nhau 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 nhấn bằng cách sử dụng FirebaseUI bằng cách thay đổi một dòng của 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/ghé qua tài liệu của chúng tôi trên GitHub để hãy tìm hiểu thêm về các tuỳ chọn cấu hình khác nhau do FirebaseUI.
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à sẽ làm tăng lượt chuyển đổi. Hiệu suất tuyệt vời, chẳng hạn như "thời gian để" thấp nội dung đầu tiên có ý nghĩa" và "thời gian tương tác", 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 kiếm nhiều tiền nhất 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 tính năng này cho bạn -- bạn không cần phải làm gì thêm để tận dụng của dịch vụ này.
Lưu nội dung động của bạn 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ởi Cloud Functions hoặc ứng dụng trong vùng chứa Cloud Run. Đang dùng 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ẽ với 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 cuộc gọi khác đến hệ thống 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 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 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
SDK Firebase JavaScript có thể là đã nhập một phần để giảm kích thước tải xuống ban đầ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, trước tiên, ứng dụng của bạn có thể tải Firebase Authentication. 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.
Bằng cách 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 Cloud Firestore đang 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 đáng tin cậy. PWA phải hoạt động tương tự nhau cho ứng dụng gốc dành cho thiết bị di động và nên 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
Hỗ trợ Cloud Firestore lưu trữ cố định 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 Trình chạy dịch vụ tới lưu tài sản tĩnh vào bộ nhớ đệm PWA của bạn có thể hoàn toàn hoạt động khi không có mạng. Bạn có thể bật tính năng cố định dữ liệu khi không có mạng 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 giữ cho 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 đó được xác thực ngay cả khi chúng không kết nối 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 xem tài liệu của chúng tôi để bắt đầu 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 nhằm 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 của bạn.
Hiển thị thông báo đẩy cho người dùng của bạn
Bằng Firebase Cloud Messaging! bạn có thể đẩy các thông báo có liên quan từ máy chủ đến trang web của người dùng thiết bị. 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 tương tác lại với người dùng
Bằng cách sử dụng Cloud Functions for Firebase, 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ụ: 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ó một 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);
});