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

Pete LePage

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

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

วันที่

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

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

ก่อนเริ่มต้นใช้งาน โปรดตรวจสอบว่า 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 Safari บน iOS ยังไม่รองรับฟีเจอร์นี้ คุณจึงต้อง ตรวจสอบ navigator.standalone แทน ซึ่งจะส่งคืนบูลีนที่ระบุว่า เบราว์เซอร์ทำงาน ในโหมดสแตนด์อโลน

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

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

หากต้องการติดตามว่าผู้ใช้มีการเปลี่ยนแปลงระหว่างวันที่ standalone ถึง browser tab หรือไม่ ให้ฟัง เปลี่ยนเป็นคิวรี่สื่อ display-mode

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

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

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

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

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

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