آموزش HTML5 Notifications API و پوش نوتیفیکیشن

Notifications API چیست؟

HTML5 Notifications API به برنامه‌های وب امکان می‌دهد اعلان‌هایی مانند اعلان‌های اپلیکیشن‌های موبایل را به کاربر نمایش دهند. این اعلان‌ها حتی زمانی که کاربر تب مرورگر را باز ندارد نیز قابل نمایش هستند. Notifications API برای یادآوری‌ها، پیام‌ها، اخبار فوری و هشدارها بسیار مفید است.

درخواست مجوز

async function requestPermission() {
    if (!("Notification" in window)) {
        alert("این مرورگر از اعلان پشتیبانی نمی‌کند");
        return;
    }
    
    if (Notification.permission === "granted") {
        // قبلاً اجازه داده شده
        showNotification();
    } else if (Notification.permission !== "denied") {
        // درخواست مجوز
        const permission = await Notification.requestPermission();
        if (permission === "granted") {
            showNotification();
        }
    }
}

// وضعیت‌های مجوز:
// "granted" - اجازه داده شده
// "denied" - رد شده
// "default" - هنوز تصمیم نگرفته

ایجاد اعلان ساده

function showNotification() {
    const notification = new Notification("پیام جدید!", {
        body: "یک پیام جدید از طرف احمد دریافت کردید.",
        icon: "/icons/message.png",
        badge: "/icons/badge.png",
        image: "/images/preview.jpg",
        tag: "new-message",
        requireInteraction: true,
        silent: false,
        vibrate: [200, 100, 200]
    });
    
    notification.onclick = function() {
        window.focus();
        notification.close();
        // رفتن به صفحه مربوطه
        window.location.href = "/messages";
    };
    
    notification.onclose = function() {
        console.log("اعلان بسته شد");
    };
    
    // بستن خودکار بعد از 5 ثانیه
    setTimeout(() => notification.close(), 5000);
}

محصول اورجینال INZIP

قالب وردپرس باریستا مخصوص کافه تم نسکافه ای روشن (دو زبانه)

دانلود پوسته وردپرس باریستا؛ قالب کافیشاپ، رُستری قهوه و فروشگاه قهوه دوزبانه با منوی رومیزی، رزرو آنلاین میز با کد پیامکی و ووکامرس. طراحی اختصاصی inzip.ir

تحویل آنی آپدیت رایگان بدون قفل لایسنس پشتیبانی واقعی

۳,۹۹۰,۰۰۰ تومان ۲,۹۶۰,۰۰۰ تومان

بازدید و دانلود آنی

٪۲۶

تخفیف ویژه

سود شما

۱,۰۳۰,۰۰۰ تومان

Push Notifications با Service Worker

// index.html
async function subscribeToPush() {
    const registration = await navigator.serviceWorker.ready;
    
    const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array("YOUR_VAPID_KEY")
    });
    
    // ارسال subscription به سرور
    await fetch("/api/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(subscription)
    });
}

function urlBase64ToUint8Array(base64String) {
    const padding = "=".repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
        .replace(/-/g, "+")
        .replace(/_/g, "/");
    const rawData = window.atob(base64);
    return Uint8Array.from([...rawData].map(c => c.charCodeAt(0)));
}

Service Worker برای Push

// sw.js
self.addEventListener("push", function(event) {
    const data = event.data ? event.data.json() : {};
    
    const options = {
        body: data.body || "پیام جدید",
        icon: "/icons/app-icon.png",
        badge: "/icons/badge-icon.png",
        image: data.image,
        data: { url: data.url || "/" },
        actions: [
            { action: "view", title: "مشاهده" },
            { action: "dismiss", title: "رد کردن" }
        ]
    };
    
    event.waitUntil(
        self.registration.showNotification(data.title || "اعلان جدید", options)
    );
});

self.addEventListener("notificationclick", function(event) {
    event.notification.close();
    
    if (event.action === "view") {
        event.waitUntil(clients.openWindow(event.notification.data.url));
    }
});

ثبت Service Worker

// main.js
if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/sw.js")
        .then(reg => {
            console.log("Service Worker ثبت شد:", reg.scope);
            subscribeToPush();
        })
        .catch(err => console.error("خطا:", err));
}

جمع‌بندی

HTML5 Notifications API و Push Notifications ابزارهای قدرتمندی برای تعامل با کاربران خارج از سایت هستند. با پیاده‌سازی Service Worker می‌توانید اعلان‌های Push حتی در غیاب کاربر ارسال کنید.