Progressive Web App: การแจ้งและการวัดการติดตั้ง

1. ยินดีต้อนรับ

ในแล็บนี้ คุณจะได้ใช้ PWA ที่ติดตั้งได้ที่มีอยู่แล้วและเพิ่มปุ่มติดตั้งในแอปที่กำหนดเอง นี่เป็น Codelab ประกอบชุดที่ 5 สำหรับเวิร์กชอป Progressive Web App Codelab ก่อนหน้านี้คือ From Tab to Taskbar ยังมี Codelab อีก 3 รายการในชุดนี้

สิ่งที่คุณจะได้เรียนรู้

  • สร้างปุ่มติดตั้ง PWA ในแอปที่กำหนดเอง

สิ่งที่ควรทราบ

  • JavaScript

สิ่งที่คุณจะต้องมี

2. เตรียมตัว

เริ่มต้นด้วยการโคลนหรือดาวน์โหลดโค้ดเริ่มต้นที่จำเป็นต่อการทำ Codelab นี้ให้เสร็จสมบูรณ์

หากโคลนที่เก็บ โปรดตรวจสอบว่าคุณอยู่ในสาขา pwa04--prompt-measure-install ไฟล์ ZIP มีโค้ดสำหรับสาขานั้นด้วย

โค้ดเบสนี้ต้องใช้ Node.js 14 ขึ้นไป เมื่อมีโค้ดแล้ว ให้เรียกใช้ npm ci จากบรรทัดคำสั่งในโฟลเดอร์ของโค้ดเพื่อติดตั้งการอ้างอิงทั้งหมดที่คุณต้องใช้ จากนั้นเรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์สำหรับพัฒนาสำหรับโค้ดแล็บ

ไฟล์ README.md ของซอร์สโค้ดจะอธิบายไฟล์ที่เผยแพร่ทั้งหมด นอกจากนี้ ไฟล์สำคัญที่มีอยู่ซึ่งคุณจะต้องใช้ตลอดทั้งโค้ดแล็บนี้มีดังนี้

ไฟล์สำคัญ

  • js/main.js - ไฟล์ JavaScript ของแอปพลิเคชันหลัก

3. ตั้งค่าปุ่มติดตั้ง

ก่อนเพิ่มข้อความแจ้งให้ติดตั้งและบันทึกเหตุการณ์การติดตั้ง คุณต้องทำการตั้งค่าบางอย่างก่อน ก่อนอื่นให้สร้างไฟล์ js/lib/install.js แล้วเพิ่มโค้ดต่อไปนี้

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

จากนั้นใน js/main.js ที่ด้านล่างของเหตุการณ์ DOMContentLoaded ให้เพิ่มโค้ดต่อไปนี้

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

คำอธิบาย

โค้ดนี้จะตั้งค่าคลาสการติดตั้งที่จะใช้ในขั้นตอนถัดไป และแนบคลาสดังกล่าวกับแอปพลิเคชันที่กำลังทำงาน

4. เพิ่มเครื่องมือฟังข้อความแจ้งให้ติดตั้ง

หากต้องการใช้ทริกเกอร์ปุ่มติดตั้งเพื่อทริกเกอร์ PWA ให้ติดตั้งจริง คุณต้องบันทึกข้อความแจ้งให้ติดตั้ง เมื่อติดตั้งแล้ว คุณต้องรีเซ็ตข้อความแจ้งให้ติดตั้งที่บันทึกไว้ โดยเขียนโค้ดเพื่อทำสิ่งต่อไปนี้ใน constructor ในคลาส Install ใน js/lib/install.js

บันทึกข้อความแจ้งการติดตั้ง

  • ฟังการแข่งขันbeforeinstallpromptได้ที่ window
  • ป้องกันไม่ให้เหตุการณ์เริ่มทำงาน
  • บันทึกพรอมต์
  • แสดงทริกเกอร์ปุ่มติดตั้ง

รีเซ็ตข้อความแจ้งเมื่อติดตั้ง

  • ฟังการแข่งขันappinstalledได้ที่ window
  • รีเซ็ตพรอมต์ที่บันทึกไว้
  • ซ่อนทริกเกอร์ปุ่มติดตั้ง

5. ทริกเกอร์การติดตั้งจากปุ่มในแอป

เมื่อบันทึกข้อความแจ้งแล้ว ปุ่มติดตั้งของ PWA จะต้องทริกเกอร์ข้อความแจ้งได้ โดยเพิ่มข้อมูลต่อไปนี้ลงในInstall class ใน js/lib/install.js

  • async วิธีทริกเกอร์การติดตั้งที่
    • ใช้พรอมต์ที่บันทึกไว้เพื่อแจ้งให้ติดตั้ง
    • await ตัวเลือกพรอมต์ของผู้ใช้
    • รีเซ็ตพรอมต์
    • ซ่อนปุ่มติดตั้งหากผู้ใช้ยอมรับข้อความแจ้งให้ติดตั้ง
  • เพิ่ม click event listener ลงในปุ่มติดตั้งใน constructor ของคลาสที่เรียกทริกเกอร์การติดตั้ง

6. ยินดีด้วย

คุณได้เรียนรู้วิธีทริกเกอร์การติดตั้ง PWA จากปุ่มติดตั้งในแอปของคุณเองแล้ว

Codelab ถัดไปในซีรีส์นี้คือเพิ่มประสิทธิภาพ PWA