الإشعار requestInteraction - إشعار أكثر سلاسة على تجربة المستخدم على سطح المكتب

لقد تعلمنا الكثير منذ بدء دخول "الإشعارات" و"المراسلة الفورية" في Chrome. وكانت إحدى الملاحظات المحددة حول الأجهزة المتوفرة على مستوى أجهزة سطح المكتب هي أن الإشعارات ستظل موجودة ومرئية على شاشة المستخدم حتى يغلقها المستخدم بشكل نشط.

عند فتح الصفحة، يمكن إنشاء مؤقت JavaScript بسيط يتم من خلاله إغلاق الإشعار تلقائيًا. لكننا نعيش الآن في عالم مع مشغّلي الخدمات: حيث يمكن لتطبيقات الويب البقاء على قيد الحياة بعد استخدام النوافذ، وليتمكّن عاملو الخدمة من النوم في أسرع وقت ممكن لتوفير الموارد. هذا يعني أنّنا بحاجة إلى طريقة أخرى لإنشاء تجربة جيدة للمستخدمين.

تم تعديل مواصفات الإشعارات مؤخرًا لمنح المطوّر إمكانية الإشارة إلى أنّه يجب عدم إغلاق الإشعار تلقائيًا من خلال النظام.

يتضمّن الإشعار علامة مرتبطة بتفضيل التفاعل، والتي لم يتم ضبطها في البداية. عند ضبط هذه السياسة، يشير ذلك إلى أنّه على الأجهزة ذات الشاشة الكبيرة بما فيه الكفاية، يجب أن يظل الإشعار متاحًا بسهولة إلى أن يفعّل المستخدم الإشعار أو يغلقه.

قد يبدو هذا غريبًا، ولكن ما يعنيه أنّه يجب إزالة الإشعار بعد فترة قصيرة، ما لم يتم إخبارك بخلاف ذلك.

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

جرِّب الإصدار التجريبي.