Kể từ lần đầu 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ộ 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 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 đang thay đổi hướng tới mục tiêu đó.
Điều gì sẽ thay đổi?
Kể từ Chrome 68 trên Android (Ổn định vào tháng 7 năm 2018), Chrome sẽ không hiển thị biểu ngữ thêm vào màn hình chính nữa. Nếu trang web đáp ứng tiêu chí thêm vào màn hình chính, thì Chrome sẽ hiển thị thanh thông tin 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
ngay trong một cử chỉ của người dùng, thì Chrome sẽ hiển thị hộp thoại thêm vào màn hình chính.
Biểu ngữ A2HS Chrome 67 trở về trước
Tự động hiển thị khi trang web đáp ứng 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
OR
Được hiển thị bằng cách gọi prompt()
trên sự kiện beforeinstallprompt
.
Thanh thông tin nhỏ Chrome 68 trở lên
Hiển thị khi trang web đáp ứng tiêu chí thêm vào màn hình chínhNếu bị người dùng đóng, thông tin đó sẽ không xuất hiện cho đến khi đủ một khoảng thời gian (khoảng 3 tháng).
Hiển thị bất kể preventDefault()
có được gọi trên sự kiện beforeinstallprompt
hay không.
Nội dung xử lý 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ỉ ra mắt.
Hộp thoại A2HS
Thể hiện bằng cách gọi prompt()
từ một cử chỉ của người dùng trên sự kiện beforeinstallprompt
trong Chrome 68 trở lên.
OR
Hiển thị khi người dùng nhấn vào thanh thông tin thu nhỏ trong Chrome 68 trở lên.
OR
Hiện sau khi người dùng nhấp vào "Thêm vào Màn hình chính" trên trình đơn Chrome ở 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à không thể điều khiển bằng trang web nhưng người dùng có thể dễ dàng đóng. Sau khi bị người dùng đóng, thông báo sẽ không xuất hiện lại cho đến khi một khoảng thời gian đủ lâu (hiện 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()
trong sự kiện beforeinstallprompt
hay không.
Thay vì nhắc người dùng khi tải trang (phản mẫu đố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 đó hiển thị lời nhắc cài đặt theo phương thức. Ví dụ: PWA dành cho máy tính này sẽ 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 spam hơn và tăng khả năng họ sẽ nhấp vào "Thêm" thay vì "Huỷ". Việc kết hợp nút Cài đặt vào ứng dụng 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 ngay hôm nay, nút này vẫn sẽ ở đó vào ngày mai hoặc bất cứ khi nào họ sẵn sàng cài đặt.
Đang theo dõi 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 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 của họ.
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 trên mỗi thao tác điều hướng trang.
Đang hiện hộp thoại với prompt()
Để hiện hộp thoại thêm vào màn hình chính, hãy gọi prompt()
cho sự kiện đã lưu ngay 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 do 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 ra 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()
trên sự kiện bị trì hoãn một lần. Nếu người dùng nhấp vào huỷ trong hộp thoại, bạn sẽ phải đợi cho đến khi sự kiện beforeinstallprompt
được kích hoạt trên thanh đ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, thao tác nhấp vào 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 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 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 ứng dụng đã cài đặt hay không