Lỗi này chứa tệp kê khai web với các trường bắt buộc để tạo một Ứng dụng web có thể cài đặt.
Trang này cũng có một nút cài đặt được ẩn theo mặc định.
Theo dõi sự kiện beforeinstallprompt
Khi trình duyệt kích hoạt sự kiện beforeinstallprompt
, đó là dấu hiệu cho biết có thể cài đặt Ứng dụng web và người dùng có thể thấy nút cài đặt. Sự kiện beforeinstallprompt
được kích hoạt khi ứng dụng đáp ứng các 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 là thời điểm thích hợp nhất.
- Nhấp vào Remix to Edit (Trộn 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 ta sẽ cần biến này sau để hiển thị lời nhắc. - 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 sự kiện beforeinstallprompt
đã lưu. 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ì prompt()
phải được gọi từ một cử chỉ của người dùng.
- Thêm trình xử lý sự kiện nhấp cho nút cài đặt.
- Gọi
prompt()
trên sự kiệnbeforeinstallprompt
đã lưu. - Ghi lại kết quả của câu lệnh.
- Đặ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
Việc cài đặt Ứng dụng web thông qua nút cài đặt chỉ là một trong những cách người dùng có thể cài đặt ứng dụng. Người dùng cũng có thể sử dụng trình đơn của Chrome, thanh thông tin thu nhỏ và thông qua biểu tượng trong thanh địa chỉ. Bạn có thể theo dõi tất cả các cách cài đặt này bằng cách theo dõi sự kiện appinstalled
.
- 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 công cụ phân tích 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 được!
Dưới đây là một số việc khác mà bạn có thể làm: