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

Pete LePage

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

מה ישתנה?

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

באנר A2HS Chrome 67 וגרסאות ישנות יותר

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

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

או

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

סרגל מידע מינימלי Chrome 68 ואילך

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

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

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

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

A2HS Dialog

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

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

או

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

או

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

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

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

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

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

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

תיבת הדו-שיח &#39;הוספה למסך הבית&#39;.
תיבת הדו-שיח 'הוספה למסך הבית'

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