การเปลี่ยนแปลงที่จะเพิ่มไปยังลักษณะการทำงานของหน้าจอหลัก

ตั้งแต่ที่เราเปิดตัวแบนเนอร์ "เพิ่มลงในหน้าจอหลัก" เป็นครั้งแรก เราได้พยายามติดป้ายกำกับ Progressive Web App ให้ชัดเจนยิ่งขึ้นและทำให้วิธีติดตั้งง่ายขึ้นสำหรับผู้ใช้ เป้าหมายสุดท้ายของเราคือให้ปุ่มติดตั้งในแถบอเนกประสงค์ในทุกแพลตฟอร์ม และใน Chrome 68 เรากำลังทำการเปลี่ยนแปลงเพื่อบรรลุเป้าหมายนั้น

สิ่งที่จะเปลี่ยนแปลงไป

เริ่มตั้งแต่ Chrome 68 บน Android (เสถียรในเดือนกรกฎาคม 2018) Chrome จะไม่แสดงแบนเนอร์ "เพิ่มลงในหน้าจอหลัก" อีก หากเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มลงในหน้าจอหลัก Chrome จะแสดงแถบข้อมูลขนาดเล็ก จากนั้นหากผู้ใช้คลิกที่แถบข้อมูลขนาดเล็กหรือคุณเรียกใช้ prompt() ในเหตุการณ์ beforeinstallprompt จากท่าทางสัมผัสของผู้ใช้ Chrome จะแสดงการเพิ่มโมดัลลงในกล่องโต้ตอบหน้าจอหลัก

แบนเนอร์ A2HS Chrome 67 และก่อนหน้านี้

ภาพหน้าจอแบนเนอร์ A2HS

แสดงโดยอัตโนมัติเมื่อเว็บไซต์เป็นไปตามเกณฑ์การเพิ่มลงในหน้าจอหลัก และไซต์ไม่ได้เรียกใช้ preventDefault() ในเหตุการณ์ beforeinstallprompt

หรือ

แสดงโดยการเรียก prompt() ใน beforeinstallprompt กิจกรรม

Mini-infobar Chrome 68 ขึ้นไป

ภาพหน้าจอแถบข้อมูล A2HS
แสดงเมื่อเว็บไซต์เป็นไปตามเกณฑ์การเพิ่มลงในหน้าจอหลัก

หากผู้ใช้ปิด ก็จะไม่แสดงจนกว่าจะผ่านระยะเวลาที่เพียงพอ (ประมาณ 3 เดือน) ไปแล้ว

แสดงไม่ว่าจะมีการเรียกใช้ preventDefault() ในเหตุการณ์ beforeinstallprompt หรือไม่ก็ตาม

ระบบจะนำตัวเลือก UI นี้ออกใน Chrome เวอร์ชันในอนาคตเมื่อมีการใช้ปุ่มติดตั้งแถบอเนกประสงค์

กล่องโต้ตอบ A2HS

ภาพหน้าจอกล่องโต้ตอบ A2HS

แสดงโดยการเรียกใช้ prompt() จากภายในท่าทางสัมผัสของผู้ใช้ในเหตุการณ์ beforeinstallprompt ใน Chrome 68 ขึ้นไป

หรือ

แสดงเมื่อผู้ใช้แตะแถบข้อมูลขนาดเล็กใน Chrome 68 ขึ้นไป

หรือ

แสดงหลังจากที่ผู้ใช้คลิก "เพิ่มในหน้าจอหลัก" จากเมนู Chrome ใน Chrome ทุกเวอร์ชัน

แถบข้อมูลขนาดเล็ก

ภาพหน้าจอ Mini-infobar
แถบข้อมูลขนาดเล็ก

แถบข้อมูลขนาดเล็กเป็นคอมโพเนนต์ UI ของ Chrome และไม่สามารถควบคุมได้โดยเว็บไซต์ แต่ผู้ใช้สามารถปิดได้อย่างง่ายดาย เมื่อผู้ใช้ปิดแล้ว ผู้ใช้จะไม่กลับมาแสดงอีกจนกว่าจะเวลาผ่านไประยะหนึ่ง (ปัจจุบันคือ 3 เดือน) แถบข้อมูลขนาดเล็กจะปรากฏขึ้นเมื่อเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มในหน้าจอหลัก ไม่ว่าคุณจะpreventDefault()ในเหตุการณ์ beforeinstallprompt หรือไม่ก็ตาม

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

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

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

กำลังฟังเหตุการณ์ beforeinstallprompt

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

let installPromptEvent;

window.addEventListener('beforeinstallprompt', event => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

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

กําลังแสดงกล่องโต้ตอบกับ prompt()

กล่องโต้ตอบเพิ่มลงในหน้าจอหลัก
กล่องโต้ตอบเพิ่มลงในหน้าจอหลัก

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

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt');
    }
    // Clear the saved prompt since it can't be used again
    installPromptEvent = null;
  });
});

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

แหล่งข้อมูลเพิ่มเติม

ดูแบนเนอร์การติดตั้งแอป สำหรับข้อมูลเพิ่มเติม ซึ่งรวมถึง

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