אפליקציות Progressive Web App: הצגת הנחיה למשתמשים להתקין את האפליקציה ומדידת ההתקנה

1. שלום

בשיעור ה-Lab הזה תלמדו לקחת PWA קיים שאפשר להתקין ולהוסיף לו לחצן התקנה מותאם אישית בתוך האפליקציה. זוהי הסדנה החמישית בסדרת סדנאות קוד שנועדו ללוות את סדנת Progressive Web App. ה-codelab הקודם היה From Tab to Taskbar. יש עוד שלושה שיעורי Codelab בסדרה הזו.

מה תלמדו

  • יצירת כפתור מותאם אישית להתקנת PWA באפליקציה

מה חשוב לדעת

  • JavaScript

מה צריך

2. טיפים להגדרה

כדי להתחיל, משכפלים או מורידים את הקוד לתחילת הדרך שנדרש להשלמת ה-Codelab הזה:

אם משכפלים את המאגר, חשוב לוודא שנמצאים בהסתעפות pwa04--prompt-measure-install. קובץ ה-ZIP מכיל גם את הקוד של הענף הזה.

בסיס הקוד הזה דורש Node.js בגרסה 14 ומעלה. אחרי שהקוד זמין, מריצים את הפקודה npm ci משורת הפקודה בתיקיית הקוד כדי להתקין את כל התלויות שצריך. לאחר מכן, מריצים את הפקודה npm start כדי להפעיל את שרת הפיתוח של ה-codelab.

קובץ README.md של קוד המקור מספק הסבר לכל הקבצים המופצים. בנוסף, אלה הקבצים הקיימים העיקריים שתעבדו איתם במהלך ה-codelab הזה:

קבצים חשובים

  • ‫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:

הצעה להתקנה

  • מפעילים listener לאירוע של beforeinstallprompt ב-window.
  • מניעת הפעלת האירוע
  • העתקת ההנחיה
  • הצגת ההפעלה של לחצן ההתקנה

איפוס ההנחיה במהלך ההתקנה

  • מפעילים listener לאירוע של appinstalled ב-window.
  • איפוס ההנחיה שצולמה
  • הסתרת הטריגר של לחצן ההתקנה

5. הפעלת התקנה מלחצן בתוך האפליקציה

אחרי שההנחיה נשמרת, לחצן ההתקנה של ה-PWA צריך להיות מסוגל להפעיל אותה. כדי לעשות זאת, מוסיפים את הקוד הבא למחלקה Install ב-js/lib/install.js:

  • שיטה async להפעלת ההתקנה ש
    • משתמש בהנחיה שצולמה כדי להציע התקנה
    • await הבחירה של המשתמש בהודעה
    • איפוס ההנחיה
    • הסתרת לחצן ההתקנה אם המשתמש אישר את בקשת ההתקנה
  • מוסיפים click event listener לכפתור ההתקנה ב-constructor של המחלקה שקורא לטריגר ההתקנה.

6. מעולה!

למדתם איך להפעיל התקנה של PWA מלחצן התקנה משלכם בתוך האפליקציה.

ה-codelab הבא בסדרה הוא Empowering Your PWA