วิธีมอบประสบการณ์การติดตั้งในแอปของคุณเอง

Pete LePage

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

นอกจากประสบการณ์การติดตั้งที่ให้บริการโดยเบราว์เซอร์แล้ว คุณยังระบุขั้นตอนการติดตั้งที่กำหนดเองได้โดยตรงภายในแอป

เมื่อพิจารณาว่าจะโปรโมตการติดตั้งหรือไม่ ให้พิจารณาวิธีที่ผู้ใช้ใช้ PWA ของคุณโดยทั่วไป ตัวอย่างเช่น หากมีกลุ่มผู้ใช้ที่ใช้ PWA หลายครั้งในสัปดาห์ ผู้ใช้เหล่านี้อาจได้รับประโยชน์จากความสะดวกที่เพิ่มขึ้นในการเปิดแอปจากหน้าจอหลักของโทรศัพท์หรือจากเมนู Start ในระบบปฏิบัติการเดสก์ท็อป แอปพลิเคชันเพื่อการทำงานและความบันเทิงบางอย่างก็ได้ประโยชน์ จากพื้นที่หน้าจอพิเศษ ซึ่งสร้างด้วยการนำแถบเครื่องมือของเบราว์เซอร์ออกจาก ในโหมด standalone, minimal-ui หรือ window-control-overlay ที่ติดตั้ง

ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้นใช้งาน ให้ตรวจสอบว่า PWA เป็นไปตามข้อกำหนดด้านความสามารถในการติดตั้ง ซึ่งโดยทั่วไปแล้วจะต้องมีไฟล์ Manifest ของเว็บแอป

โปรโมตการติดตั้ง

เพื่อแสดงว่า Progressive Web App ของคุณติดตั้งได้ และระบุ ขั้นตอนการติดตั้งแอป

1. ฟังเหตุการณ์ beforeinstallprompt
2. บันทึกเหตุการณ์ beforeinstallprompt เพื่อให้ทริกเกอร์ขั้นตอนการติดตั้งได้ ในภายหลัง
3. แจ้งให้ผู้ใช้ทราบว่า PWA ของคุณติดตั้งได้ และระบุปุ่มหรือองค์ประกอบอื่นๆ เพื่อเริ่มขั้นตอนการติดตั้งในแอป

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

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

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

ขั้นตอนการติดตั้งแอป

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

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

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

ตรวจหาเมื่อติดตั้ง PWA สำเร็จ

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

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

ตรวจหาวิธีเปิดตัว PWA

คิวรี่สื่อ display-mode ของ CSS จะระบุวิธีเปิดตัว PWA ไม่ว่าจะใน แท็บเบราว์เซอร์ หรือ PWA ที่ติดตั้งไว้ วิธีนี้ช่วยให้คุณใช้สไตล์ที่แตกต่างกันได้ ทั้งนี้ขึ้นอยู่กับวิธีที่เปิดแอป เช่น กำหนดค่า เพื่อซ่อนปุ่มติดตั้งเสมอ และแสดงปุ่มย้อนกลับเมื่อเปิดเป็น ติดตั้ง PWA แล้ว

ติดตามการเปิดตัว PWA

หากต้องการติดตามวิธีที่ผู้ใช้เปิดตัว PWA ให้ใช้ matchMedia() เพื่อทดสอบ คิวรี่สื่อ display-mode

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

ติดตามเมื่อโหมดการแสดงผลเปลี่ยนแปลง

หากต้องการติดตามว่าผู้ใช้เปลี่ยนระหว่าง browser กับโหมดการแสดงผลอื่นๆ หรือไม่ ให้คอยฟังการเปลี่ยนแปลงในคําค้นหาสื่อ display-mode

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

อัปเดต UI ตามโหมดการแสดงผลปัจจุบัน

ใช้สีพื้นหลังอื่นสำหรับ PWA เมื่อเปิดเป็นแอปที่ติดตั้งแล้ว PWA ให้ใช้ CSS แบบมีเงื่อนไข

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

อัปเดตไอคอนและชื่อแอป

หากจำเป็นต้องอัปเดตชื่อแอปหรือระบุไอคอนใหม่ ดูวิธีที่ Chrome จัดการการอัปเดตไฟล์ Manifest ของเว็บแอป เพื่อดูว่าการเปลี่ยนแปลงเหล่านั้นจะปรากฏใน Chrome เมื่อใดและอย่างไร