Kể từ khi ra mắt biểu ngữ thêm vào màn hình chính, chúng tôi đã nỗ lực gắn nhãn cho Ứng dụng web tiến bộ một cách rõ ràng hơn và đơn giản hoá cách người dùng có thể cài đặt các ứng dụng này. Mục tiêu cuối cùng của chúng tôi là cung cấp một nút cài đặt trong hộp nhiều mục đích trên tất cả các nền tảng. Trong Chrome 68, chúng tôi đang thực hiện các thay đổi để đạt được mục tiêu đó.
Điều gì sẽ thay đổi?
Kể từ Chrome 68 trên Android (Kênh ổn định từ tháng 7 năm 2018), Chrome sẽ không còn hiển thị biểu ngữ thêm vào màn hình chính nữa. Nếu trang web đáp ứng các tiêu chí thêm vào màn hình chính, Chrome sẽ hiển thị thanh thông tin thu nhỏ. Sau đó, nếu người dùng nhấp vào thanh thông tin thu nhỏ hoặc bạn gọi prompt() trên sự kiện beforeinstallprompt trong một cử chỉ của người dùng, Chrome sẽ hiện một hộp thoại phương thức thêm vào màn hình chính.
Biểu ngữ A2HS Chrome 67 trở về trước
Tự động xuất hiện khi trang web đáp ứng các tiêu chí thêm vào màn hình chính và trang web không gọi preventDefault() trên sự kiện beforeinstallprompt
HOẶC
Được hiển thị bằng cách gọi prompt() trên sự kiện beforeinstallprompt.
Thanh thông tin thu gọn Chrome phiên bản 68 trở lên
Nếu người dùng đóng, thông báo sẽ không xuất hiện cho đến khi một khoảng thời gian đủ dài (~3 tháng) trôi qua.
Được hiển thị bất kể preventDefault() có được gọi trên sự kiện beforeinstallprompt hay không.
Cách xử lý giao diện người dùng này sẽ bị xoá trong một phiên bản Chrome sau này khi nút cài đặt trên thanh địa chỉ được ra mắt.
Hộp thoại A2HS
Xuất hiện khi gọi prompt() từ trong cử chỉ của người dùng trên sự kiện beforeinstallprompt trong Chrome 68 trở lên.
HOẶC
Xuất hiện khi người dùng nhấn vào thanh thông tin thu nhỏ trong Chrome 68 trở lên.
HOẶC
Xuất hiện sau khi người dùng nhấp vào "Thêm vào màn hình chính" trong trình đơn Chrome ở tất cả các phiên bản Chrome.
Thanh thông tin thu nhỏ
Thanh thông tin thu nhỏ là một thành phần giao diện người dùng của Chrome và trang web không thể kiểm soát thành phần này, nhưng người dùng có thể dễ dàng đóng thanh thông tin này. Sau khi người dùng đóng, thông báo này sẽ không xuất hiện lại cho đến khi một khoảng thời gian đủ dài trôi qua (hiện tại là 3 tháng). Thanh thông tin nhỏ sẽ xuất hiện khi trang web đáp ứng các tiêu chí thêm vào màn hình chính, bất kể bạn có preventDefault() sự kiện beforeinstallprompt hay không.
Thay vì nhắc người dùng khi tải trang (mẫu chống đối với các yêu cầu cấp quyền), bạn có thể cho biết ứng dụng của mình có thể được cài đặt bằng một số giao diện người dùng, sau đó giao diện người dùng này sẽ hiển thị lời nhắc cài đặt phương thức. Ví dụ: PWA dành cho máy tính này thêm nút "Cài đặt ứng dụng" ngay phía trên tên hồ sơ của người dùng.
Việc nhắc người dùng cài đặt ứng dụng của bạn khi họ thực hiện một cử chỉ sẽ khiến họ cảm thấy ít bị làm phiền hơn và tăng khả năng họ sẽ nhấp vào "Thêm" thay vì "Huỷ". Việc tích hợp nút Cài đặt vào ứng dụng của bạn có nghĩa là ngay cả khi người dùng chọn không cài đặt ứng dụng của bạn hôm nay, nút này vẫn sẽ xuất hiện vào ngày mai hoặc bất cứ khi nào họ sẵn sàng cài đặt.
Lắng nghe sự kiện beforeinstallprompt
Nếu trang web của bạn đáp ứng tiêu chí thêm vào màn hình chính, Chrome sẽ kích hoạt sự kiện beforeinstallprompt, lưu một thông tin tham chiếu đến sự kiện và cập nhật giao diện người dùng để cho biết rằng người dùng có thể thêm ứng dụng của bạn vào màn hình chính.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
Sự kiện beforeinstallprompt sẽ không được kích hoạt nếu ứng dụng đã được cài đặt (xem tiêu chí thêm vào màn hình chính).
Nhưng nếu sau đó người dùng gỡ cài đặt ứng dụng, thì sự kiện beforeinstallprompt sẽ được kích hoạt lại trên mỗi lần điều hướng trang.
Hiện hộp thoại bằng prompt()
Để hiện hộp thoại thêm vào màn hình chính, hãy gọi prompt() trên sự kiện đã lưu trong một cử chỉ của người dùng. Chrome sẽ hiển thị hộp thoại phương thức, nhắc người dùng thêm ứng dụng của bạn vào màn hình chính. Sau đó, hãy theo dõi lời hứa do thuộc tính userChoice của sự kiện beforeinstallprompt trả về. Lệnh hứa trả về một đối tượng có thuộc tính outcome sau khi lời nhắc đã xuất hiện và người dùng đã phản hồi lời nhắc đó.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
Bạn chỉ có thể gọi prompt() một lần cho sự kiện bị hoãn lại. Nếu người dùng nhấp vào nút huỷ trên hộp thoại, bạn sẽ cần đợi cho đến khi sự kiện beforeinstallprompt được kích hoạt trong lần điều hướng trang tiếp theo. Không giống như các yêu cầu cấp quyền truyền thống, việc nhấp vào nút huỷ sẽ không chặn các lệnh gọi trong tương lai đến prompt() vì lệnh gọi này phải được gọi trong một cử chỉ của người dùng.
Tài nguyên khác
Hãy xem bài viết Biểu ngữ cài đặt ứng dụng để biết thêm thông tin, bao gồm cả:
- Thông tin chi tiết về sự kiện
beforeinstallprompt - Theo dõi phản hồi của người dùng đối với lời nhắc thêm vào màn hình chính
- Theo dõi xem ứng dụng đã được cài đặt hay chưa
- Xác định xem ứng dụng của bạn có đang chạy dưới dạng một ứng dụng đã cài đặt hay không