ข้อความเตือนการติดตั้งแอปที่มาพร้อมเครื่อง

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

เกณฑ์มีอะไรบ้าง

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

• ไม่ได้ติดตั้งทั้งเว็บแอปและแอปเนทีฟในอุปกรณ์
• มีไฟล์ Manifest ของเว็บแอป ได้แก่
  • short_name
  • name (ใช้ในพรอมต์แบนเนอร์)
  • icons รวมถึงเวอร์ชัน 192 พิกเซลและ 512 พิกเซล
  • prefer_related_applications คือ true
  • ออบเจ็กต์ related_applications ที่มีข้อมูลเกี่ยวกับแอป
• แสดงผ่าน HTTPS

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

พร็อพเพอร์ตี้ไฟล์ Manifest ที่จําเป็น

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

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

prefer_related_applications

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

related_applications

related_applications คืออาร์เรย์ที่มีรายการออบเจ็กต์ซึ่งบอกเบราว์เซอร์เกี่ยวกับแอปพลิเคชันเนทีฟที่คุณต้องการ ออบเจ็กต์แต่ละรายการต้องมีพร็อพเพอร์ตี้ platform และพร็อพเพอร์ตี้ id โดยที่ platform คือ play และ id คือรหัสแอป Play Store

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

หากต้องการแสดงกล่องโต้ตอบการติดตั้ง คุณต้องทำดังนี้

1. ฟังเหตุการณ์ beforeinstallprompt
2. แจ้งให้ผู้ใช้ทราบว่าแอปที่มาพร้อมเครื่องของคุณติดตั้งได้ด้วยปุ่มหรือองค์ประกอบอื่นๆ ที่จะสร้างเหตุการณ์ท่าทางสัมผัสของผู้ใช้
3. แสดงพรอมต์โดยเรียกใช้ prompt() ในเหตุการณ์ beforeinstallprompt ที่บันทึกไว้

ฟัง beforeinstallprompt

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

เมื่อเหตุการณ์ beforeinstallprompt เริ่มทำงานแล้ว ให้บันทึกการอ้างอิงถึงเหตุการณ์นั้น และอัปเดตอินเทอร์เฟซผู้ใช้เพื่อระบุว่าผู้ใช้ติดตั้งแอปได้

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

แจ้งให้ผู้ใช้ทราบว่าติดตั้งแอปของคุณได้

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

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

แสดงข้อความแจ้ง

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

จากนั้นฟังสัญญาที่พร็อพเพอร์ตี้ userChoice แสดงผล Promise แสดงออบเจ็กต์ที่มีพร็อพเพอร์ตี้ outcome หลังจากที่ข้อความแจ้งปรากฏขึ้นและผู้ใช้ตอบกลับแล้ว

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

คุณจะเรียก prompt() ในเหตุการณ์ที่เลื่อนได้เพียงครั้งเดียวเท่านั้น หากผู้ใช้ปิด คุณจะต้องรอจนกว่าเหตุการณ์ beforeinstallprompt จะเริ่มทำงานในการนำทางหน้าถัดไป

ข้อควรพิจารณาพิเศษเมื่อใช้นโยบายความปลอดภัยของเนื้อหา

หากเว็บไซต์มีนโยบายความปลอดภัยของเนื้อหาที่เข้มงวด ให้ตรวจสอบว่าได้เพิ่ม *.googleusercontent.com ลงในคำสั่ง img-src เพื่อให้ Chrome ดาวน์โหลดไอคอนที่เชื่อมโยงกับแอปของคุณจาก Play Store ได้

ในบางกรณี *.googleusercontent.com อาจแสดงผลรายละเอียดมากกว่าที่ต้องการ คุณจำกัดขอบเขตการค้นหาให้แคบลงได้โดยการแก้ไขข้อบกพร่องจากระยะไกลอุปกรณ์ Android เพื่อระบุ URL ของไอคอนแอป