Kể từ lần đầu tiên 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 Ứng dụng web tiến bộ rõ ràng hơn và đơn giản hoá cách người dùng có thể cài đặt. Mục tiêu cuối cùng của chúng tôi là cung cấp nút cài đặt trong thanh địa chỉ trên tất cả các nền tảng và trong Chrome 68, chúng tôi sẽ thực hiện các thay đổi hướng tới mục tiêu đó.
Điều gì sẽ thay đổi?
Kể từ Chrome 68 trên Android (phiên bản ổn định 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ếu trang web đáp ứng các tiêu chí về việc thêm vào màn hình chính, thì 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 nhỏ hoặc bạn gọi prompt() trên sự kiện beforeinstallprompt từ trong một cử chỉ của người dùng, Chrome sẽ hiển thị một hộp thoại thêm phương thức vào màn hình chính.
Biểu ngữ A2HS Chrome 67 trở xuống
Tự động hiển thị khi trang web đáp ứng tiêu chí về thao tác 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
Hiển thị bằng cách gọi prompt() trên sự kiện beforeinstallprompt.
Thanh thông tin thu nhỏ Chrome 68 trở lên
Nếu bị người dùng loại bỏ, lựa chọn này sẽ không xuất hiện cho đến khi qua một khoảng thời gian đủ (khoảng 3 tháng).
Hiển thị bất kể preventDefault() có được gọi trong sự kiện beforeinstallprompt hay không.
Phiên bản giao diện người dùng này sẽ bị xoá trong phiên bản Chrome sau này khi nút cài đặt thanh địa chỉ được ra mắt.
Hộp thoại A2HS
Hiển thị bằng cách gọi prompt() từ trong một cử chỉ của người dùng trên sự kiện beforeinstallprompt trong Chrome 68 trở lên.
HOẶC
Hiển thị khi người dùng nhấn vào thanh thông tin nhỏ trong Chrome 68 trở lên.
HOẶC
Hiển thị sau khi người dùng nhấp vào "Thêm vào Màn hình chính" từ trình đơn Chrome trong tất cả các phiên bản Chrome.
Thanh thông tin nhỏ
Thanh thông tin nhỏ là một thành phần trên giao diện người dùng của Chrome và trang web không thể kiểm soát thanh thông tin này, nhưng người dùng có thể dễ dàng đóng thanh này. Sau khi bị người dùng loại bỏ, yêu cầu này sẽ không xuất hiện lại cho đến khi đủ khoảng thời gian (hiện là 3 tháng). Thanh thông tin thu nhỏ sẽ xuất hiện khi trang web đáp ứng tiêu chí thêm vào màn hình chính, bất kể bạn có preventDefault() trên sự kiện beforeinstallprompt hay không.
Thay vì nhắc người dùng khi tải trang (phương thức chống lại các yêu cầu cấp quyền), bạn có thể chỉ báo rằng ứ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 đó sẽ hiển thị lời nhắc cài đặt theo phương thức. Ví dụ: Ứng dụng web tiến bộ (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 cài đặt ứng dụng qua một cử chỉ của người dùng khiến người dùng cảm thấy ít vi phạm hơn và tăng khả năng họ 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 đồng nghĩa với việc ngay cả khi người dùng chọn không cài đặt ứng dụng của bạn ngay 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.
Đang 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, thì Chrome sẽ kích hoạt sự kiện beforeinstallprompt, lưu 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 người dùng có thể thêm ứng dụng 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).
Tuy nhiên, nếu sau đó người dùng gỡ cài đặt ứng dụng, thì sự kiện beforeinstallprompt sẽ lại được kích hoạt trong mỗi lần điều hướng trang.
Đang hiển thị hộp thoại với prompt()
Để hiển thị 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 từ 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 của họ. Sau đó, hãy theo dõi lời hứa mà
thuộc tính userChoice của sự kiện beforeinstallprompt trả về. Lời hứa sẽ trả về một đối tượng có thuộc tính outcome sau khi lời nhắc hiển thị và người dùng đã phản hồi.
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() trên sự kiện bị trì hoãn một lần. Nếu người dùng nhấp vào nút huỷ trên hộp thoại, bạn sẽ phải đợi cho đến khi sự kiện beforeinstallprompt được kích hoạt trong lần di chuyển trên trang tiếp theo. Không giống như các yêu cầu cấp quyền thông thường, thao tá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.
Nguồn thông tin 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:
- Thông tin chi tiết về sự kiện
beforeinstallprompt - Theo dõi phản hồi của người dùng với lời nhắc thêm 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 ứng dụng đã cài đặt hay không