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

Pete LePage

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

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

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

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

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

หรือ

แสดงโดยการเรียก prompt() ในเหตุการณ์ beforeinstallprompt

แถบข้อมูลขนาดเล็ก Chrome เวอร์ชัน 68 ขึ้นไป

แสดงเมื่อเว็บไซต์มีคุณสมบัติตรงตามเกณฑ์การเพิ่มลงในหน้าจอหลัก

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

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

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

A2HS Dialog

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

หรือ

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

หรือ

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

มินิแถบข้อมูล

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

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