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

פיט לה פייג'

Twitter GitHub Glitch Mastodon דף הבית

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

הערה: Chrome 68 סיים את שלב הבטא. במסמכי העזרה של Add to Home Screen תוכלו לראות את ההתנהגות הנוכחית.

מה ישתנה?

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

באנר A2HS ב-Chrome בגרסה 67 ומטה

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

או

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

מיני-סרגל מידע Chrome 68 ומעלה

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

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

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

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

תיבת דו-שיח A2HS

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

או

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

או

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

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

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

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

רעיון ראשוני של לחצן ההתקנה בסרגל הכתובות

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

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

שימו לב: יכול להיות שהאירוע beforeinstallprompt יופעל ללא תנועות של משתמשים, אבל כדי להפעיל את prompt() צריך להפעיל אותו.

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

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

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

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