Browser Notification Companion & Guide

লাইভ টেস্ট জোন (Playground)

এখানে সরাসরি ব্রাউজার নোটিফিকেশন টেস্ট করে দেখতে পারেন।

ধাপ ১: পারমিশন রিকোয়েস্ট আবশ্যক

নোটিফিকেশন দেখানোর জন্য প্রথমে ইউজারের সম্মতি বা Permission নিতে হবে।

ধাপ ২: নোটিফিকেশন কাস্টমাইজ করুন

নোটিফিকেশন টাইটেল (Title)

নোটিফিকেশনের বডি (Body)

আইকন URL (Icon URL)

ধাপ ৩: নোটিফিকেশন ট্রিগার করুন

মেসেজটি ট্রিগার করে দ্রুত ট্যাব মিনিমাইজ করে বা অন্য উইন্ডোতে গিয়ে ব্যাকগ্রাউন্ড নোটিফিকেশন পরখ করুন।

কাজের টিপস:

যদি ব্রাউজারে নোটিফিকেশন ব্লক করা থাকে, তবে ব্রাউজারের URL-এর পাশে থাকা **Lock 🔒 আইকন** এ ক্লিক করে পারমিশন পুনরায় ‘Allow’ করুন।
মোবাইলে টেস্ট করার সময় ফোনের **Do Not Disturb (DND)** মোড বন্ধ রাখুন।

ডেভেলপমেন্ট গাইড ও কোড ব্লক

আপনার প্রজেক্টে নোটিফিকেশন যুক্ত করার সহজতম বাংলা গাইডলাইন।

ইউজার যখন আপনার ওয়েবসাইটটিতে সচল থাকবে, তখন নোটিফিকেশন দেখানোর জন্য কোনো এক্সটার্নাল সার্ভারের প্রয়োজন হয় না। সরাসরি ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট দিয়েই এটি হ্যান্ডেল করা যায়।

notification-handler.js

// ১. প্রথমে পারমিশন রিকোয়েস্ট করুন
async function requestUserPermission() {
    if (!("Notification" in window)) {
        console.log("এই ব্রাউজার নোটিফিকেশন সাপোর্ট করে না।");
        return;
    }
    
    const permission = await Notification.requestPermission();
    if (permission === "granted") {
        console.log("পারমিশন মঞ্জুর হয়েছে!");
    }
}

// ২. নোটিফিকেশন সেন্ড করুন
function sendLocalNotification(title, bodyText, iconUrl) {
    if (Notification.permission === "granted") {
        const notif = new Notification(title, {
            body: bodyText,
            icon: iconUrl || 'https://example.com/logo.png',
            vibrate: [200, 100, 200] // ভাইব্রেশন প্যাটার্ন
        });

        // নোটিফিকেশনে ক্লিক করলে ওই উইন্ডো ফোকাস হবে
        notif.onclick = function() {
            window.focus();
            window.open("https://yourwebsite.com/dashboard", "_blank");
        };
    }
}

ইউজার যদি ব্রাউজার বা ওয়েবসাইট বন্ধ করে দেয়, তবুও যদি নোটিফিকেশন পাঠাতে চান তাহলে একটি **Service Worker** ব্যাকগ্রাউন্ডে সেট করতে হবে এবং আপনার ব্যাকএন্ড সার্ভার (PHP/Node.js) থেকে পুশ ইভেন্ট পাঠাতে হবে।

১

সার্ভিস ওয়ার্কার রেজিস্টার করুন (Main JS ফাইল):

আপনার প্রধান স্ক্রিপ্ট ফাইলে এটি যুক্ত করুন:

navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('Service Worker Active!', reg));

২

ব্যাকগ্রাউন্ড হ্যান্ডলার ফাইল তৈরি করুন (`sw.js`):

আপনার ডিরেক্টরির রুট ফোল্ডারে `sw.js` নামে একটি ফাইল খুলে নিচের কোডটি রাখুন:

sw.js

self.addEventListener('push', function(event) {
    let payload = { title: 'নতুন নোটিফিকেশন!', body: 'ডিটেইলস লোড হচ্ছে...' };
    
    if (event.data) {
        try {
            payload = event.data.json();
        } catch (e) {
            payload.body = event.data.text();
        }
    }

    const options = {
        body: payload.body,
        icon: '/images/icon.png',
        badge: '/images/badge.png',
        vibrate: [100, 50, 100],
        data: {
            url: payload.url || '/'
        }
    };

    event.waitUntil(
        self.registration.showNotification(payload.title, options)
    );
});

// নোটিফিকেশনে ক্লিক ইভেন্ট হ্যান্ডল করুন
self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data.url)
    );
});

৩

সার্ভার পুশ (FCM বা Web-Push):

আপনার PHP/Laravel বা Node.js সার্ভার থেকে Web-Push লাইব্রেরি দিয়ে VAPID কী এর মাধ্যমে রিকোয়েস্ট পাঠালে উপরোক্ত `push` ইভেন্টটি ট্রিগার হবে।