Người dùng có thể chưa quen với quy trình cài đặt PWA. Là nhà phát triển, bạn sẽ hiểu được thời điểm thích hợp để mời người dùng cài đặt ứng dụng. Bạn cũng có thể cải thiện lời nhắc cài đặt trình duyệt mặc định. Hãy cùng khám phá những công cụ có sẵn.
Cải tiến hộp thoại cài đặt
Các trình duyệt sẽ đưa ra lời nhắc cài đặt mặc định khi PWA đáp ứng các tiêu chí cài đặt. Trình duyệt sử dụng các thuộc tính name
và icons
trong Tệp kê khai ứng dụng web của bạn để tạo lời nhắc.
Một số trình duyệt giúp cải thiện trải nghiệm cài đặt lời nhắc bằng cách sử dụng các trường quảng cáo trong tệp kê khai, trong đó có description
, categories
và screenshots
. Ví dụ: khi dùng Chrome trên Android, nếu PWA của bạn cung cấp các giá trị cho các trường description
và screenshots
, thì hộp thoại cài đặt sẽ chuyển đổi từ thanh thông tin Thêm vào màn hình chính nhỏ thành một hộp thoại lớn hơn và chi tiết hơn, tương tự như lời nhắc cài đặt trong cửa hàng ứng dụng.
Xem các trường quảng cáo trong thực tế:
Sự kiện beforeinstallprompt
Lời nhắc cài đặt của trình duyệt là bước đầu tiên để khuyến khích người dùng cài đặt PWA của bạn. Để triển khai trải nghiệm cài đặt của riêng bạn, ứng dụng vẫn cần đáp ứng tiêu chí cài đặt: khi trình duyệt phát hiện thấy ứng dụng có thể cài đặt, trình duyệt sẽ kích hoạt sự kiện beforeinstallprompt
. Bạn cần triển khai trình xử lý sự kiện này để tuỳ chỉnh trải nghiệm của người dùng. Cách làm như sau:
- Theo dõi sự kiện
beforeinstallprompt
. - Hãy lưu (bạn sẽ sử dụng sau này).
- Kích hoạt việc này từ giao diện người dùng của bạn.
Hãy xem mã bên dưới để biết ví dụ về trình nghe sự kiện cho sự kiện beforeinstallprompt
, việc thu thập và sử dụng tuỳ chỉnh sự kiện sau đó.
// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevents the default mini-infobar or install dialog from appearing on mobile
e.preventDefault();
// Save the event because you'll need to trigger it later.
deferredPrompt = e;
// Show your customized install prompt for your PWA
// Your own UI doesn't have to be a single element, you
// can have buttons in different locations, or wait to prompt
// as part of a critical journey.
showInAppInstallPromotion();
});
Sau đó, nếu người dùng nhấp vào nút cài đặt tuỳ chỉnh của bạn, hãy sử dụng deferredPrompt
đã lưu trước đó và gọi phương thức prompt()
, vì người dùng vẫn cần trải qua quy trình của trình duyệt để cài đặt ứng dụng. Việc bạn đã làm là trì hoãn sự kiện cho đến khi bạn cung cấp cho người dùng bối cảnh phù hợp nhằm khuyến khích họ cài đặt PWA.
Việc ghi lại sự kiện giúp bạn có cơ hội thêm gợi ý và chương trình khuyến khích để người dùng cài đặt ứng dụng của bạn, cũng như chọn nhắc cài đặt khi bạn biết rằng người dùng tương tác nhiều hơn.
Sự kiện sẽ không kích hoạt nếu:
- Người dùng đã cài đặt PWA hiện tại (chỉ hợp lệ cho máy tính và WebAPK trên Android).
- Ứng dụng không đáp ứng được tiêu chí cài đặt PWA.
- Không thể cài đặt PWA trên thiết bị hiện tại vì các lý do khác (ví dụ: thiết bị ở chế độ kiosk hoặc không có quyền).
Vị trí tốt nhất để đưa ra lời nhắc
Vị trí cần nhắc tuỳ thuộc vào ứng dụng của bạn và thời điểm người dùng tương tác nhiều nhất với nội dung và dịch vụ của bạn. Khi chụp beforeinstallprompt
, bạn có thể hướng dẫn người dùng về những lý do nên tiếp tục sử dụng ứng dụng cũng như những lợi ích mà họ sẽ nhận được khi cài đặt ứng dụng.
Bạn có thể chọn hiển thị gợi ý cài đặt ở mọi nơi trong ứng dụng. Một số hình thức phổ biến là: trong trình đơn bên, sau một hành trình trọng yếu của người dùng (chẳng hạn như hoàn tất đơn đặt hàng hoặc sau một trang đăng ký). Bạn có thể đọc thêm về điều này trong bài viết Mẫu quảng cáo việc cài đặt PWA.
Thu thập số liệu phân tích
Khi sử dụng số liệu phân tích, bạn sẽ hiểu rõ hơn về vị trí và thời điểm cần đưa ra câu lệnh. Bạn có thể sử dụng thuộc tính userChoice
từ sự kiện beforeinstallprompt
; userChoice
là một lời hứa sẽ giải quyết hành động mà người dùng đã thực hiện.
// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
// deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
deferredPrompt.prompt();
// Find out whether the user confirmed the installation or not
const { outcome } = await deferredPrompt.userChoice;
// The deferredPrompt can only be used once.
deferredPrompt = null;
// Act on the user's choice
if (outcome === 'accepted') {
console.log('User accepted the install prompt.');
} else if (outcome === 'dismissed') {
console.log('User dismissed the install prompt');
}
});
Xem ví dụ thực tiễn
Hãy thử ví dụ thực tế sau đây trên trình duyệt Chromium (máy tính hoặc Android).
Dự phòng
Nếu trình duyệt không hỗ trợ beforeinstallprompt
hoặc sự kiện không kích hoạt, thì không có cách nào khác để kích hoạt lời nhắc cài đặt của trình duyệt. Tuy nhiên, trên những nền tảng cho phép người dùng cài đặt PWA theo cách thủ công, chẳng hạn như iOS, bạn có thể cho người dùng thấy những hướng dẫn này.
Bạn chỉ nên hiển thị những hướng dẫn này ở chế độ trình duyệt. Các tuỳ chọn hiển thị khác, chẳng hạn như standalone
hoặc fullscreen
có nghĩa là người dùng đã cài đặt ứng dụng.
Để chỉ hiển thị phần tử ở chế độ trình duyệt, hãy sử dụng truy vấn phương tiện display-mode
:
#installInstructions {
display: none
}
@media (display-mode: browser) {
#installInstructions {
display: block
}
}
Lớp học lập trình
Thư viện
Hãy xem các thư viện sau đây để được trợ giúp về cách hiển thị lời nhắc cài đặt tuỳ chỉnh:
- Trình tạo PWA
- Lời nhắc trong trình cài đặt PWA để phản ứng
- Phản hồi lượt cài đặt PWA
- Cài đặt PWA Vue
- Thêm vào Màn hình chính