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

Pete LePage

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

מה ישתנה?

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

באנר A2HS ‫Chrome 67 ומטה

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

או

ההודעה מוצגת כשמתקשרים אל prompt() באירוע beforeinstallprompt.

סרגל מידע קטן גרסה Chrome 68 ואילך

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

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

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

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

A2HS Dialog

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

או

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

או

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

סרגל המידע הקצר

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

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

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

האזנה לאירוע 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 יוצג דו-שיח מודאלי שבו המשתמש יתבקש להוסיף את האפליקציה למסך הבית. לאחר מכן, מפעילים listener להבטחה שמוחזרת על ידי המאפיין 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
• מעקב אחרי התשובה של המשתמש להצעה להוסיף את האתר למסך הבית
• מעקב אחרי התקנת האפליקציה
• איך בודקים אם האפליקציה פועלת כאפליקציה מותקנת