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

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

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

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

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

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

ב-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'
        });
        });
    }
    });
}

רוצים לנסות את ההדגמה?