نیاز به اعلان تعامل - یک UX اعلان روان تر روی دسکتاپ

از زمانی که Notifications و Push Messaging در کروم قرار گرفت، چیزهای زیادی یاد گرفته ایم. یک بازخورد خاص در مورد دستگاه‌های کلاس دسک‌تاپ این بود که اعلان‌ها تا زمانی که کاربر به طور فعال رد نشود، در صفحه کاربر باقی می‌ماند و قابل مشاهده است.

هنگامی که صفحه باز است، می توان یک تایمر ساده جاوا اسکریپت ایجاد کرد که به طور خودکار اعلان را می بندد. اما ما اکنون در جهانی با سرویس‌کار زندگی می‌کنیم: جایی که برنامه‌های وب می‌توانند بیش از عمر یک پنجره زندگی کنند و کارکنان خدمات در سریع‌ترین زمان ممکن برای صرفه‌جویی در منابع به خواب می‌روند. این بدان معناست که ما به راه دیگری برای ایجاد یک تجربه خوب برای کاربران نیاز داریم.

مشخصات اعلان اخیراً به‌روزرسانی شده است تا به برنامه‌نویس این امکان را بدهد که نشان دهد اعلان نباید به طور خودکار توسط سیستم رد شود .

یک اعلان دارای یک پرچم اولویت تعاملی است که در ابتدا تنظیم نشده است. هنگامی که تنظیم شود، نشان می دهد که در دستگاه هایی با صفحه نمایش به اندازه کافی بزرگ، اعلان باید به راحتی در دسترس باشد تا زمانی که کاربر اعلان را فعال یا رد کند.

این ممکن است عجیب به نظر برسد، اما چیزی که نشان می‌دهد این است که مگر اینکه خلاف آن گفته شود، اعلان باید پس از مدت کوتاهی از دید حذف شود.

کروم 47 (بتا در اکتبر 2015) اکنون از گزینه requireInteraction پشتیبانی می کند. مگر اینکه صریحاً ارائه شده باشد و روی true تنظیم شود، همه اعلان‌های روی دسکتاپ بعد از تقریباً 20 ثانیه رد می‌شوند. با این حال، بخش جالب این است که Chrome اخیراً مرکز اعلان‌ها را از همه پلتفرم‌های دسک‌تاپ (اما ChromeOS) حذف کرده است، این بدان معناست که اعلان‌های کوچک‌شده نادیده گرفته می‌شوند و در تماس با getNotifications در یک سرویس‌کار قابل دسترسی نیستند.

در Chrome for 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'
        });
        });
    }
    });
}

نسخه ی نمایشی را امتحان کنید .