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

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