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

Pete LePage

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

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

เมื่อพิจารณาว่าจะโปรโมตการติดตั้งหรือไม่ ให้พิจารณาวิธีที่ผู้ใช้ใช้ 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 เมื่อใดและอย่างไร