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

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

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 แสดงผล Prom จะแสดงออบเจ็กต์ที่มีพร็อพเพอร์ตี้ 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 ของไอคอนแอป