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

ข้อความแจ้งให้ติดตั้งแอปที่มาพร้อมเครื่องช่วยให้คุณอนุญาตให้ผู้ใช้ติดตั้งแอปที่มาพร้อมเครื่องได้อย่างรวดเร็วและง่ายดายในอุปกรณ์ของผู้ใช้จาก 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 ส่งคืน การพรอมต์จะแสดงผลออบเจ็กต์ที่มีพร็อพเพอร์ตี้ 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 ของไอคอนแอป