יכול להיות שהמשתמשים לא מכירים את תהליך ההתקנה של PWA. המפתחים יודעים מתי הזמן הנכון להזמין את המשתמש להתקין את האפליקציה. אפשר גם לשפר את ההנחיות להתקנה בדפדפן שמוגדר כברירת מחדל. כדאי לעיין בכלים הזמינים.
שיפור תיבת הדו-שיח להתקנה
דפדפנים מספקים הנחיות התקנה כברירת מחדל כש-PWA עומד בקריטריונים להתקנה. הדפדפן משתמש במאפיינים name ו-icons מתוך מניפסט אפליקציית האינטרנט כדי ליצור את ההנחיה.
בדפדפנים מסוימים, חוויית ההתקנה משופרת באמצעות השדות השיווקיים במניפסט, כולל description, categories ו-screenshots. לדוגמה, אם משתמשים ב-Chrome ב-Android ואפליקציית ה-PWA מספקת ערכים לשדות description ו-screenshots, חלון הדו-שיח של ההתקנה משתנה מסרגל מידע קטן עם האפשרות הוספה למסך הבית לחלון דו-שיח גדול ומפורט יותר, בדומה להנחיות ההתקנה מחנות אפליקציות.
האירוע beforeinstallprompt
ההנחיות להתקנה בדפדפן הן הצעד הראשון שצריך לעשות כדי לגרום למשתמשים להתקין את ה-PWA. כדי להטמיע חוויית התקנה משלכם, האפליקציה עדיין צריכה לעמוד בקריטריונים להתקנה: כשהדפדפן מזהה שאפשר להתקין את האפליקציה, הוא מפעיל את האירוע beforeinstallprompt. צריך להטמיע את המטפל באירועים הזה כדי להתאים אישית את חוויית המשתמש. לשם כך:
- מאזינים לאירוע
beforeinstallprompt. - שומרים אותו (יהיה בו צורך בהמשך).
- מפעילים אותו מממשק המשתמש.
בדוגמה הבאה לקוד אפשר לראות 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.
תיעוד האירוע מאפשר לכם להוסיף רמזים ותמריצים למשתמשים להתקין את האפליקציה, ולבחור להציג בקשה להתקנה כשאתם יודעים שהמשתמשים מגלים יותר עניין.
האירוע לא יופעל אם:
- המשתמש כבר התקין את ה-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');
}
});
חלופי
אם הדפדפן לא תומך ב-beforeinstallprompt או שהאירוע לא מופעל, אין דרך אחרת להפעיל את הנחיית ההתקנה של הדפדפן. עם זאת, בפלטפורמות שמאפשרות למשתמש להתקין אפליקציות PWA באופן ידני, כמו iOS, אפשר להציג את ההוראות האלה למשתמש.
צריך להציג את ההוראות האלה רק במצב דפדפן. אם מוצגות אפשרויות אחרות, כמו standalone או fullscreen, המשמעות היא שהמשתמש כבר התקין את האפליקציה.
כדי להציג את הרכיב רק במצב דפדפן, משתמשים בשאילתת המדיה display-mode:
#installInstructions {
display: none
}
@media (display-mode: browser) {
#installInstructions {
display: block
}
}
Codelab
ספריות
כדי לקבל עזרה בעיבוד של הנחיה מותאמת אישית להתקנה, אפשר לעיין בספריות הבאות: