รอเหตุการณ์ beforeinstallprompt
เมื่อเบราว์เซอร์เริ่มเหตุการณ์ beforeinstallprompt นั่นเป็นสัญญาณบ่งบอกว่าสามารถติดตั้งเว็บแอปได้ และสามารถแสดงปุ่มติดตั้งให้ผู้ใช้เห็นได้ ระบบจะเริ่มเหตุการณ์ beforeinstallprompt เมื่อแอปเป็นไปตามเกณฑ์ความสามารถในการติดตั้ง
การบันทึกเหตุการณ์ช่วยให้นักพัฒนาแอปปรับแต่งการติดตั้งและแจ้งให้ผู้ใช้ติดตั้งเมื่อเห็นว่าเหมาะสมที่สุดได้
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
- เพิ่มเครื่องจัดการเหตุการณ์
beforeinstallpromptลงในออบเจ็กต์window - บันทึก
eventเป็นตัวแปรร่วม เราจะต้องใช้ตัวแปรนี้ในภายหลังเพื่อแสดงข้อความแจ้ง - เลิกซ่อนปุ่มติดตั้ง
รหัส:
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);
});
จัดการการคลิกปุ่มติดตั้ง
หากต้องการแสดงข้อความแจ้งให้ติดตั้ง ให้เรียกใช้ prompt() ในเหตุการณ์ beforeinstallprompt ที่บันทึกไว้ การเรียก prompt() จะดำเนินการในเครื่องจัดการการคลิกปุ่มติดตั้ง เนื่องจากต้องเรียก prompt() จากท่าทางผู้ใช้
- เพิ่มเครื่องจัดการกิจกรรมการคลิกสำหรับปุ่มติดตั้ง
- โทรหา
prompt()ในกิจกรรมbeforeinstallpromptที่บันทึกไว้ - บันทึกผลลัพธ์ของพรอมต์
- ตั้งค่าเหตุการณ์
beforeinstallpromptที่บันทึกไว้เป็น Null - ซ่อนปุ่มติดตั้ง
รหัส:
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);
});
ติดตามเหตุการณ์การติดตั้ง
การติดตั้งเว็บแอปผ่านปุ่มติดตั้งเป็นเพียงวิธีหนึ่งที่ผู้ใช้สามารถติดตั้งได้ นอกจากนี้ยังใช้เมนูของ Chrome, แถบข้อมูลขนาดเล็ก และไอคอนในแถบอเนกประสงค์ได้ด้วย คุณสามารถติดตามวิธีการติดตั้งทั้งหมดเหล่านี้ได้โดยการฟังเหตุการณ์ appinstalled
- เพิ่มตัวแฮนเดิลเหตุการณ์
appinstalledลงในออบเจ็กต์window - บันทึกเหตุการณ์การติดตั้งลงใน Analytics หรือกลไกอื่นๆ
รหัส:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
อ่านเพิ่มเติม
ยินดีด้วย ตอนนี้แอปของคุณติดตั้งได้แล้ว
สิ่งอื่นๆ ที่คุณทำได้มีดังนี้