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

Pete LePage

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

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

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

คิวรี่สื่อของ CSS display-mode จะระบุการเปิดตัว 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 เมื่อใดและอย่างไร