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

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

מה משתנה?

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

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

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

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

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