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

יכול להיות שהמשתמשים לא מכירים את תהליך ההתקנה של 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 שנשמר בעבר ולבצע קריאה לשיטת 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

ספריות

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

מקורות מידע