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