لقد تعلمنا الكثير منذ طرح ميزة الإشعارات والرسائل الفورية في Chrome. أحد التعليقات العميقة التي وردت بشأن الأجهزة من فئة أجهزة الكمبيوتر المكتبي هو أنّ الإشعارات ستظل ظاهرة على شاشة المستخدم إلى أن يغلقها المستخدم بشكل نشط.
عندما تكون الصفحة مفتوحة، من الممكن إنشاء موقّت JavaScript بسيط يؤدي إلى إغلاق الإشعار تلقائيًا. ولكننا نعيش الآن في عالم يتضمّن مهام الخدمة: حيث يمكن لتطبيقات الويب استمرّاء العمل بعد انتهاء صلاحية النافذة ويتم إيقاف مهام الخدمة في أسرع وقت ممكن لتوفير الموارد. وهذا يعني أنّنا بحاجة إلى طريقة أخرى لتوفير تجربة جيدة للمستخدمين.
تم تعديل مواصفات الإشعارات مؤخرًا لمنح المطوّر إمكانية الإشارة إلى أنّه يجب ألا يغلِق النظام الإشعار تلقائيًا.
يحتوي الإشعار على علامة تفضيل مرتبطة تتطلب التفاعل، وهي مُلغاة في البداية. عند ضبط هذا الخيار، يعني ذلك أنّه على الأجهزة التي تحتوي على شاشة كبيرة بما يكفي، يجب أن يظل الإشعار متاحًا بسهولة إلى أن يفعّله المستخدم أو يغلقه.
قد يبدو هذا الأمر غريبًا، ولكن ما يعنيه ذلك هو أنّه ما لم يتم إبلاغك بخلاف ذلك، من المفترض أن تتم إزالة الإشعار من العرض بعد فترة زمنية قصيرة.
يتيح الإصدار 47 من Chrome (الإصدار التجريبي في تشرين الأول (أكتوبر) 2015) الآن خيار requireInteraction. ما لم يتم تحديده صراحةً
و ضبطه على true، سيتم إغلاق جميع الإشعارات على سطح المكتب بعد
20 ثانية تقريبًا. والجزء المثير للاهتمام هو أنّ Chrome قد أزال
مؤخرًا مركز الإشعارات من جميع منصات أجهزة الكمبيوتر المكتبي (باستثناء ChromeOS)، وهذا يعني أنّه
يتم اعتبار الإشعارات المُصغّرة مُغلقة ولا يمكن الوصول إليها من خلال طلب getNotifications
في عامل الخدمة.
في متصفّح 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'
});
});
}
});
}