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

Pete LePage

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

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

ปุ่มติดตั้งแอปที่มีอยู่ใน PWA ของ Spotify
ปุ่ม "ติดตั้งแอป" ที่มีอยู่ใน PWA ของ Spotify

เมื่อพิจารณาว่าจะโปรโมตการติดตั้งหรือไม่ ให้พิจารณาถึงลักษณะการใช้งาน 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

คำค้นหาสื่อของ CSS display-mode ระบุวิธีเปิดใช้งาน 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 เมื่อใดและอย่างไร