ทำให้ติดตั้งได้

Pete LePage

ข้อบกพร่องนี้จะมีไฟล์ Manifest ของเว็บที่มีช่องที่ต้องกรอกเพื่อทำให้เว็บแอปติดตั้งได้

และยังมีปุ่มติดตั้งที่ซ่อนอยู่โดยค่าเริ่มต้นด้วย

ฟังเหตุการณ์ beforeinstallprompt

เมื่อเบราว์เซอร์เริ่มการทำงานของเหตุการณ์ beforeinstallprompt นี่จะเป็นตัวบ่งชี้ ติดตั้งเว็บแอปได้ และแสดงปุ่มติดตั้ง ให้แก่ผู้ใช้ เหตุการณ์ beforeinstallprompt จะเริ่มทำงานเมื่อแอปเป็นไปตาม เกณฑ์ความสามารถในการติดตั้ง

การบันทึกเหตุการณ์ช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งการติดตั้งและแสดงข้อความแจ้งให้ผู้ใช้ได้ ติดตั้งเมื่อผู้ใช้เห็นว่าเป็นช่วงเวลาที่ดีที่สุด

  1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
  2. เพิ่มเครื่องจัดการเหตุการณ์ beforeinstallprompt ลงในออบเจ็กต์ window
  3. บันทึก event เป็นตัวแปรร่วม เราจะต้องใช้ในภายหลังเพื่อแสดง ปรากฏขึ้น
  4. เลิกซ่อนปุ่มติดตั้ง

รหัส:

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() จากท่าทางสัมผัสของผู้ใช้

  1. เพิ่มเครื่องจัดการเหตุการณ์การคลิกสำหรับปุ่มติดตั้ง
  2. โทรหา prompt() ในกิจกรรม beforeinstallprompt ที่บันทึกไว้
  3. บันทึกผลลัพธ์ของข้อความแจ้ง
  4. ตั้งค่าเหตุการณ์ beforeinstallprompt ที่บันทึกไว้เป็นค่าว่าง
  5. ซ่อนปุ่มติดตั้ง

รหัส:

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 กิจกรรม

  1. เพิ่มเครื่องจัดการเหตุการณ์ appinstalled ลงในออบเจ็กต์ window
  2. บันทึกเหตุการณ์การติดตั้งไปยังข้อมูลวิเคราะห์หรือกลไกอื่นๆ

รหัส:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

อ่านเพิ่มเติม

ยินดีด้วย ขณะนี้แอปของคุณติดตั้งได้แล้ว

ตัวอย่างการดำเนินการเพิ่มเติมที่คุณทำได้มีดังนี้