Sự cố này chứa tệp kê khai web với các trường bắt buộc để giúp ứng dụng web có thể cài đặt.
Tệp này cũng có nút cài đặt bị ẩn theo mặc định.
Nghe sự kiện beforeinstallprompt
Khi trình duyệt kích hoạt sự kiện beforeinstallprompt
, đó là chỉ báo
rằng ứng dụng web có thể được cài đặt và nút cài đặt có thể được hiển thị
cho người dùng. Sự kiện beforeinstallprompt
được kích hoạt khi ứng dụng đáp ứng
tiêu chí về khả năng cài đặt.
Việc ghi lại sự kiện cho phép nhà phát triển tuỳ chỉnh quá trình cài đặt và nhắc người dùng cài đặt khi họ cho rằng đó là thời điểm tốt nhất.
- Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
- Thêm trình xử lý sự kiện
beforeinstallprompt
vào đối tượngwindow
. - Lưu
event
dưới dạng biến toàn cục; chúng tôi sẽ cần thông tin này sau để hiển thị . - Hiện nút cài đặt.
Mã:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
Xử lý lượt nhấp vào nút cài đặt
Để hiển thị lời nhắc cài đặt, hãy gọi prompt()
trên beforeinstallprompt
đã lưu
sự kiện. Việc gọi prompt()
được thực hiện trong trình xử lý lượt nhấp vào nút cài đặt vì
Phải gọi prompt()
bằng một cử chỉ của người dùng.
- Thêm trình xử lý sự kiện nhấp chuột cho nút cài đặt.
- Gọi
prompt()
trên sự kiệnbeforeinstallprompt
đã lưu. - Ghi lại kết quả của lời nhắc.
- Đặt sự kiện
beforeinstallprompt
đã lưu thành rỗng. - Ẩn nút cài đặt.
Mã:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
Theo dõi sự kiện cài đặt
Người dùng chỉ có một cách để cài đặt Ứng dụng web thông qua nút cài đặt
có thể cài đặt ứng dụng đó. Họ cũng có thể sử dụng trình đơn, thanh thông tin nhỏ, và
thông qua một biểu tượng trên thanh địa chỉ. Bạn có thể
theo dõi tất cả những cách cài đặt này bằng cách lắng nghe appinstalled
sự kiện.
- Thêm trình xử lý sự kiện
appinstalled
vào đối tượngwindow
. - Ghi lại sự kiện cài đặt vào Analytics hoặc cơ chế khác.
Mã:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Tài liệu đọc thêm
Xin chúc mừng, ứng dụng của bạn hiện có thể cài đặt!
Dưới đây là một số thao tác bổ sung mà bạn có thể thực hiện: