معرفی Notification API

آموزش جاوااسکریپت

مقدمه

Notification API به وب اپلیکیشن‌ها اجازه می‌دهد تا اعلان‌هایی را در سطح سیستم عامل کاربر نمایش دهند. این اعلان‌ها می‌توانند حتی زمانی که کاربر در تب مربوط به سایت ما نیست یا پنجره مرورگرش کوچک (minimize) شده است، نمایش داده شوند. این قابلیت یک ابزار قدرتمند برای اطلاع‌رسانی به کاربر در مورد رویدادهای مهم مانند دریافت یک پیام جدید، یادآوری یک قرار ملاقات، یا اتمام یک فرآیند طولانی است.

دریافت مجوز از کاربر

از آنجایی که نمایش اعلان در دسکتاپ کاربر می‌تواند مزاحمت ایجاد کند، این API دارای یک مدل مجوز (permission model) سخت‌گیرانه است. یک وب‌سایت نمی‌تواند بدون کسب اجازه صریح از کاربر، هیچ اعلانی را نمایش دهد. این فرآیند معمولاً شامل سه مرحله است.

  1. بررسی وضعیت فعلی مجوز: با خواندن پراپرتی استاتیک Notification.permission می‌توانیم وضعیت فعلی را بررسی کنیم که یکی از سه مقدار رشته‌ای زیر است: 'granted' (مجوز داده شده)، 'denied' (مجوز رد شده) یا 'default' (کاربر هنوز تصمیمی نگرفته).
  2. درخواست مجوز: اگر وضعیت 'default' باشد، باید با فراخوانی متد استاتیک Notification.requestPermission() از کاربر درخواست مجوز کنیم. این متد یک `Promise` برمی‌گرداند که با انتخاب کاربر ('granted' یا 'denied') حل می‌شود.
  3. ایجاد اعلان: تنها در صورتی که وضعیت مجوز 'granted' باشد، می‌توانیم یک اعلان جدید ایجاد کنیم.
Copy Icon JAVASCRIPT 
const notifyBtn = document.getElementById('notify-btn');

function requestAndShowNotification() {
    // Check if the browser supports notifications
    if (!("Notification" in window)) {
        alert("This browser does not support desktop notifications.");
    } 
    // Check if permission is already granted
    else if (Notification.permission === "granted") {
        createNotification('Welcome Back!', 'You can continue where you left off.');
    } 
    // Otherwise, ask for permission
    else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(permission => {
            if (permission === "granted") {
                createNotification('Thanks!', 'You will now receive notifications.');
            }
        });
    }
}

notifyBtn.addEventListener('click', requestAndShowNotification);

این کد الگوی کامل درخواست مجوز را پیاده‌سازی می‌کند. ابتدا پشتیبانی مرورگر را بررسی کرده، سپس وضعیت مجوز فعلی را چک می‌کند و تنها در صورتی که کاربر هنوز تصمیمی نگرفته باشد، با requestPermission() درخواست مجوز را نمایش می‌دهد.

ایجاد و نمایش یک اعلان

پس از اینکه مجوز از سوی کاربر دریافت شد، ساخت یک اعلان به سادگی ایجاد یک نمونه جدید از شیء Notification است. سازنده آن به شکل new Notification(title, options) می‌باشد.

  • title: عنوان اصلی اعلان که به صورت برجسته نمایش داده می‌شود.
  • options: یک شیء اختیاری برای پیکربندی اعلان، که می‌تواند شامل پراپرتی‌های زیر باشد:
    • body: متن اصلی و توضیحات اعلان.
    • icon: آدرس URL یک تصویر کوچک برای نمایش به عنوان آیکون.
    • image: آدرس URL یک تصویر بزرگتر برای نمایش در بدنه اعلان.
    • requireInteraction: اگر true باشد، اعلان تا زمانی که کاربر با آن تعامل کند (روی آن کلیک یا آن را رد کند) روی صفحه باقی می‌ماند.
Copy Icon JAVASCRIPT 
function createNotification(title, body) {
    const options = {
        body: body,
        icon: '/images/icon.png',
        requireInteraction: true
    };

    const notification = new Notification(title, options);

    // Handle clicks on the notification
    notification.onclick = (event) => {
        // Example: focus the window and navigate to a specific page
        window.focus();
        window.location.href = 'https://example.com/messages';
        notification.close(); // Close the notification after click
    };
}

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

در این درس با Notification API و چگونگی ارسال اعلان‌های مؤثر و کاربرپسند از وب‌سایت‌ها آشنا شدیم. دیدیم که چگونه با رعایت مدل کسب اجازه از کاربر، می‌توانیم اعلان‌هایی را برای اطلاع‌رسانی‌های مهم نمایش دهیم. این ابزار به ما کمک می‌کند تا حتی زمانی که کاربر در صفحه ما حضور ندارد، با او در ارتباط باشیم. در درس بعدی، به سراغ یک مفهوم قدرتمند برای کار با داده‌های جریانی، یعنی Streams API، خواهیم رفت.