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

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

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

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

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