התראה דורשתInteraction – חוויית משתמש חלקה יותר בהתראות במחשב

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

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

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

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

זה אולי נשמע מוזר, אבל המשמעות היא שאם לא תקבלו הודעה אחרת, ההתראה אמורה להיעלם לאחר פרק זמן קצר.

ב-Chrome 47 (גרסת בטא באוקטובר 2015) יש עכשיו תמיכה באפשרות requireInteraction. אלא אם הוא מסופק באופן מפורש ומוגדר כ-true, כל ההתראות ב-מחשב ייסגרו אחרי כ-20 שניות. עם זאת, החלק המעניין הוא ש-Chrome הסיר לאחרונה את מרכז ההתראות מכל הפלטפורמות למחשב (חוץ מ-ChromeOS). המשמעות היא שהתראות שהוצגו במצב ממוזער נחשבות כסגורות, ולא ניתן לגשת אליהן בקריאה ל-getNotifications ב-service worker.

ב-Chrome ל-Android, המערכת מתעלמת מהאפשרות requireInteraction כי ההתראות מוקטנות באזור של מגש ההתראות.

navigator.serviceWorker.register('sw.js');

function showNotifications() {
    Notification.requestPermission(function(result) {
    if (result === 'granted') {
        navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('requireInteraction: true', {
            body: 'Requires interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: true,
            tag: 'require-interaction'
        });

        registration.showNotification('requireInteraction: false', {
            body: 'Does not require interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: false,
            tag: 'no-require-interaction'
        });
        });
    }
    });
}

לצפייה בהדגמה