בקשה להתקנת אפליקציה

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

שיפור תיבת הדו-שיח להתקנה

דפדפנים מספקים בקשות התקנה שמוגדרות כברירת מחדל כשאפליקציות PWA עומדות בקריטריונים להתקנה. כדי ליצור את ההנחיה, הדפדפן משתמש במאפיינים name ו-icons מהמניפסט של אפליקציית האינטרנט.

בקשה להתקנה של Microsoft Edge.

דפדפנים מסוימים משפרים את חוויית בקשות ההתקנה באמצעות שדות קידום המכירות שבמניפסט, כולל description, categories ו-screenshots. לדוגמה, ב-Chrome ב-Android, אם אפליקציית PWA מספקת ערכים לשדות description ו-screenshots, חוויית תיבת הדו-שיח של ההתקנה תשתנה מסרגל מידע קטן של הוספה למסך הבית לתיבת דו-שיח גדולה ומפורטת יותר, בדומה להנחיות ההתקנה מחנות אפליקציות.

הצגת השדות של קידום המכירות בפעולה:

האירוע beforeinstallprompt

בקשות ההתקנה של הדפדפן הן השלב הראשון בעידוד המשתמשים להתקין את ה-PWA. כדי להטמיע את חוויית ההתקנה שלך, האפליקציה שלך עדיין צריכה לעמוד בקריטריונים להתקנה: כשהדפדפן מזהה שאפשר להתקין את האפליקציה, הוא מפעיל את האירוע beforeinstallprompt. עליכם להטמיע את הגורם המטפל באירועים כדי להתאים אישית את חוויית המשתמש. לשם כך:

  1. האזנה לאירוע beforeinstallprompt.
  2. שומרים (צריך להשתמש בו מאוחר יותר).
  3. מפעילים אותו דרך ממשק המשתמש.

בקוד שבהמשך מוצגת דוגמה ל-event listener לאירוע beforeinstallprompt, לתיעוד שלו ולשימוש מותאם אישית מאוחר יותר.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

לאחר מכן, אם המשתמש ילחץ על לחצן ההתקנה המותאם אישית שלך, עליך להשתמש בשיטה deferredPrompt שנשמרה בעבר ולקרוא ל-method של prompt(), כי המשתמש עדיין צריך לבצע את התהליך של הדפדפן כדי להתקין את האפליקציה. הפעולה שביצעת היא השהיית האירוע עד שנתת למשתמש את ההקשר הנכון שמעודד אותו להתקין את ה-PWA.

תיעוד האירוע מאפשר להוסיף רמזים ותמריצים למשתמשים שיתקינו את האפליקציה שלכם, ולבקש מהמשתמשים להתקין את האפליקציה כשיודעים שהמשתמשים מביעים יותר עניין באפליקציה.

האירוע לא יופעל אם:

  • המשתמש כבר התקין את ה-PWA הנוכחית (תקף רק למחשב ו-WebAPK ב-Android).
  • האפליקציה לא עומדת בקריטריונים להתקנת PWA.
  • אי אפשר להתקין את ה-PWA במכשיר הנוכחי מסיבות אחרות (למשל, מכשיר במצב קיוסק או בלי הרשאות).

המקום הטוב ביותר לקבלת הנחיות

המיקום של ההצעה לפעולה תלוי באפליקציה שלכם ובשעות שבהן המשתמשים מקיימים הכי הרבה עניין עם התוכן והשירותים שלכם. אחרי שמצלמים את beforeinstallprompt, אפשר להסביר למשתמשים למה כדאי להמשיך להשתמש באפליקציה ומה היתרונות שיכולים להפיק ממנה. אפשר לבחור להציג טיפים להתקנה בכל מקום באפליקציה. דוגמאות לדפוסים נפוצים: בתפריט הצד, אחרי תהליך קריטי שעוברים משתמשים, כמו השלמת הזמנה או אחרי דף הרשמה. מידע נוסף על כך זמין במאמר תבניות לקידום התקנת PWA.

מתבצע איסוף של ניתוח הנתונים

השימוש בניתוח נתונים יעזור לכם להבין טוב יותר איפה ומתי להציג את ההנחיות שלכם. אפשר להשתמש בנכס userChoice מהאירוע beforeinstallprompt. userChoice הוא הבטחה שתפתור את הפעולה שהמשתמש ביצע.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

ראו הדגמה

מנסים את הדוגמה הבאה בפעולה בדפדפן Chromium (במחשב או ב-Android).

חלופי

אם הדפדפן לא תומך ב-beforeinstallprompt או שהאירוע לא מופעל, אין דרך אחרת להפעיל את בקשת ההתקנה של הדפדפן. עם זאת, בפלטפורמות שמאפשרות למשתמש להתקין אפליקציות PWA באופן ידני, כמו iOS, אפשר להציג את ההוראות האלה למשתמש.

יש לעבד את ההוראות האלה רק במצב דפדפן; אפשרויות תצוגה אחרות, כמו standalone או fullscreen, מציינות שהמשתמש כבר התקין את האפליקציה.

כדי לעבד את הרכיב רק במצב דפדפן, משתמשים בשאילתת המדיה display-mode:

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

ספריות

כדאי לעיין בספריות הבאות כדי לקבל עזרה ברינדור של בקשת התקנה מותאמת אישית:

משאבים