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

ผู้ใช้อาจไม่คุ้นเคยกับขั้นตอนการติดตั้ง 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

ห้องสมุด

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

แหล่งข้อมูล