שינויים להוספה בהתנהגות של מסך הבית

Pete LePage

מאז שהשקנו לראשונה את הבאנר 'הוספה למסך הבית', אנחנו פועלים כדי לתייג את Progressive Web Apps בצורה ברורה יותר, וכדי לפשט את הדרך שבה משתמשים יכולים להתקין אותן. המטרה הסופית שלנו היא לספק לחצן התקנה בסרגל הכתובות בכל הפלטפורמות, וב-Chrome 68 אנחנו מבצעים שינויים במטרה להשיג את המטרה הזו.

מה משתנה?

החל מגרסת Chrome 68 ב-Android (בגרסה יציבה ביולי 2018), לא תוצג יותר ב-Chrome הבאנר למסך הבית. אם האתר עומד בקריטריונים להוספה למסך הבית, Chrome יציג את מיני-סרגל המידע. לאחר מכן, אם המשתמש ילחץ על סרגל המידע המינימלי, או אם תקראו ל-prompt() באירוע beforeinstallprompt מתוך תנועת משתמש, Chrome יציג תיבת דו-שיח של הוספה למסך הבית.

באנר A2HS Chrome 67 ולפני

צילום מסך של באנר A2HS

מוצגים באופן אוטומטי כשהאתר עומד בקריטריונים להוספה למסך הבית, והאתר לא קורא לפונקציה preventDefault() באירוע beforeinstallprompt

או

יוצגו באמצעות חיוג למספר prompt() באירוע beforeinstallprompt.

Mini-infobar Chrome 68 ואילך

צילום מסך של סרגל המידע A2HS
מוצגת כשהאתר עומד בקריטריונים להוספה למסך הבית

אם משתמש סגר את ההצעה, היא לא תוצג עד לסיום פרק הזמן הנדרש (כ-3 חודשים).

מוצגת גם אם הופעלה קריאה אל preventDefault() באירוע beforeinstallprompt.

העיצוב הזה של ממשק המשתמש יוסר בגרסה עתידית של Chrome כאשר לחצן ההתקנה של סרגל הכתובות יוצג.

תיבת דו-שיח A2HS

צילום מסך של תיבת דו-שיח A2HS

מוצגת על ידי קריאה ל-prompt() מתוך תנועת משתמש באירוע beforeinstallprompt ב-Chrome 68 ואילך.

או

מוצגת כשמשתמש מקיש על מיני-סרגל המידע ב-Chrome 68 ואילך.

או

מוצגת אחרי שהמשתמש לוחץ על 'הוספה למסך הבית' בתפריט Chrome בכל הגרסאות של Chrome.

סרגל המידע המיני

צילום המסך של המיני-סרגל המידע.
סרגל המידע הקטן

סרגל המידע המיני הוא רכיב בממשק המשתמש של Chrome ולא ניתן לשלוט בו באתר, אבל המשתמש יכול לסגור אותו בקלות. אחרי שהמשתמש יסגור את החשבון, הוא לא יופיע שוב עד שיחלוף מספיק זמן (כרגע 3 חודשים). המיני סרגל מידע יופיע כשהאתר עומד בקריטריונים להוספה למסך הבית, גם אם preventDefault() באירוע beforeinstallprompt וגם אם לא.

קונספט מוקדם של לחצן ההתקנה בסרגל הכתובות.
קונספט מוקדם של לחצן ההתקנה בסרגל הכתובות
המיני-סרגל הוא חוויה זמנית ל-Chrome ב-Android, בזמן שאנחנו עובדים כדי ליצור חוויה עקבית בכל הפלטפורמות שכוללות לחצן התקנה בסרגל הכתובות. ## הפעלת תיבת הדו-שיח 'הוספה למסך הבית'
לחצן להתקנה ב-Progressive Web App למחשב.
לחצן ההתקנה ב-Progressive Web App למחשב

במקום לבקש מהמשתמש בזמן טעינת הדף (פעולה אנטי-דפוס לבקשות הרשאה), אתם יכולים לציין שאפשר להתקין את האפליקציה שלכם באמצעות ממשק משתמש כלשהו, ואז תוצג חלון ההתקנה של האפליקציה. לדוגמה, ה-PWA הזו למחשב מוסיפה לחצן 'Install App' (התקנת האפליקציה) ממש מעל שם הפרופיל של המשתמש.

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

מתבצעת האזנה לאירוע beforeinstallprompt

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

let installPromptEvent;

window.addEventListener('beforeinstallprompt', event => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

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

מוצגת תיבת הדו-שיח עם prompt()

תיבת דו-שיח להוספה למסך הבית.
הוספה לתיבת הדו-שיח למסך הבית

כדי להציג את תיבת הדו-שיח של הוספה למסך הבית, קוראים ל-prompt() באירוע השמור מתוך תנועת משתמש. Chrome יציג את תיבת הדו-שיח של החלון, שבה המשתמש יתבקש להוסיף את האפליקציה למסך הבית. לאחר מכן, מקשיבים להבטחה שהוחזרה בנכס userChoice של האירוע beforeinstallprompt. ההבטחה מחזירה אובייקט עם מאפיין outcome אחרי שההצעה לפעולה מוצגת והמשתמש מגיב אליה.

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt');
    }
    // Clear the saved prompt since it can't be used again
    installPromptEvent = null;
  });
});

אפשר להפעיל את prompt() רק באירוע שנדחה פעם אחת. אם המשתמש לוחץ על 'ביטול' בתיבת הדו-שיח, תצטרכו לחכות עד שהאירוע beforeinstallprompt יופעל בניווט הבא בדף. בניגוד לבקשות הרשאה רגילות, לחיצה על 'ביטול' לא תחסום שיחות עתידיות ל-prompt() כי צריך לבצע את הקריאה לפעולה בתוך תנועת משתמש.

מקורות נוספים

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

  • פרטים על האירוע beforeinstallprompt
  • מעקב אחר תגובת המשתמש להצעה לפעולה של הוספת מסך הבית
  • מעקב אחר התקנת האפליקציה
  • איך לבדוק אם האפליקציה פועלת כאפליקציה מותקנת