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

Pete LePage

เผยแพร่: 14 กุมภาพันธ์ 2020

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

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

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

Media Query ของ CSS display-mode จะระบุวิธีเปิด PWA ไม่ว่าจะใน แท็บเบราว์เซอร์หรือเป็น PWA ที่ติดตั้ง ซึ่งจะช่วยให้ใช้สไตล์ที่แตกต่างกันได้ตามวิธีเปิดแอป เช่น คุณสามารถกำหนดค่าให้ซ่อนปุ่มติดตั้งเสมอและแสดงปุ่มย้อนกลับเมื่อเปิดเป็น PWA ที่ติดตั้ง

ติดตามวิธีเปิดใช้ PWA

หากต้องการติดตามวิธีที่ผู้ใช้เปิด PWA ให้ใช้ matchMedia() เพื่อทดสอบ Media Query 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 กับโหมดการแสดงผลอื่นๆ หรือไม่ ให้ฟังการเปลี่ยนแปลงใน Media Query ของ 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 เมื่อใดและอย่างไร