ข้อความแจ้งให้ติดตั้ง

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

กําลังปรับปรุงกล่องโต้ตอบการติดตั้ง

โดยเบราว์เซอร์จะแสดงข้อความแจ้งให้ติดตั้งเริ่มต้นเมื่อ PWA ผ่านเกณฑ์การติดตั้ง เบราว์เซอร์จะใช้พร็อพเพอร์ตี้ name และ icons จากไฟล์ Manifest ของเว็บแอปเพื่อสร้างข้อความแจ้ง

ข้อความแจ้งให้ติดตั้ง Microsoft Edge

บางเบราว์เซอร์จะช่วยปรับปรุงประสบการณ์ในการติดตั้งข้อความแจ้งโดยใช้ช่องการโปรโมตในไฟล์ Manifest รวมถึง description, categories และ screenshots ตัวอย่างเช่น การใช้ Chrome ใน Android หาก PWA ของคุณระบุค่าสำหรับช่อง description และ screenshots กล่องโต้ตอบการติดตั้งจะเปลี่ยนจากแถบข้อมูลเพิ่มลงในหน้าจอหลักขนาดเล็กเป็นกล่องโต้ตอบขนาดใหญ่และมีรายละเอียดมากขึ้น ซึ่งคล้ายกับข้อความแจ้งให้ติดตั้งจาก App Store

ดูการทํางานจริงของช่องโปรโมชัน

เหตุการณ์ beforeinstallprompt

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

  1. ฟังเหตุการณ์ beforeinstallprompt
  2. บันทึก (จะต้องใช้ในภายหลัง)
  3. ทริกเกอร์จาก UI

ตรวจสอบโค้ดด้านล่างเพื่อดูตัวอย่าง Listener เหตุการณ์สำหรับเหตุการณ์ beforeinstallprompt, การบันทึก และการใช้งานที่กำหนดเองในภายหลัง

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

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

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

เหตุการณ์จะไม่เริ่มทํางานในกรณีต่อไปนี้

  • ผู้ใช้ติดตั้ง PWA ปัจจุบันแล้ว (ใช้ได้กับเดสก์ท็อปและ WebAPK ใน Android เท่านั้น)
  • แอปไม่ผ่านเกณฑ์การติดตั้ง PWA
  • PWA ติดตั้งในอุปกรณ์ปัจจุบันไม่ได้ด้วยเหตุผลอื่นๆ (เช่น อุปกรณ์ในโหมดคีออสก์หรือไม่มีสิทธิ์)

ที่ที่ดีที่สุดในการส่งข้อความแจ้ง

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

การรวบรวมข้อมูลวิเคราะห์

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

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

ดูของจริง

ลองใช้ตัวอย่างต่อไปนี้ในเบราว์เซอร์ Chromium (เดสก์ท็อปหรือ Android)

Fallback

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

คุณควรแสดงวิธีการเหล่านี้ในโหมดเบราว์เซอร์ ตัวเลือกการแสดงผลอื่นๆ เช่น standalone หรือ fullscreen หมายความว่าผู้ใช้ได้ติดตั้งแอปแล้ว

หากต้องการแสดงผลองค์ประกอบเฉพาะในโหมดเบราว์เซอร์ ให้ใช้คิวรี่สื่อ display-mode ดังนี้

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

ห้องสมุด

ดูไลบรารีต่อไปนี้เพื่อช่วยในการแสดงข้อความแจ้งการติดตั้งแบบกำหนดเอง

แหล่งข้อมูล