Electron অ্যাপ্লিকেশন তৈরি করার সময় আপনি Notification API ব্যবহার করে ডেস্কটপ নোটিফিকেশন পাঠাতে পারেন। এই API ব্রাউজার ভিত্তিক অ্যাপ্লিকেশনগুলোতে কিভাবে নোটিফিকেশন প্রদর্শন করা হয় ঠিক তেমনই ডেস্কটপ অ্যাপ্লিকেশনেও এটি কাজ করে। এটি ব্যবহারকারীকে বার্তা বা তথ্য জানাতে সহায়ক।
১. Notification API কনফিগারেশন
Electron এ Notification API ব্যবহারের জন্য new Notification() ব্যবহার করা হয়। title এবং body সহ একটি নোটিফিকেশন তৈরি করা হয়, যা ব্যবহারকারীর স্ক্রীনে প্রদর্শিত হবে।
নোটিফিকেশন তৈরি করার জন্য যে ফিচারগুলো দরকার:
title: নোটিফিকেশনের শিরোনাম।body: নোটিফিকেশনের বর্ণনা বা বার্তা।icon: নোটিফিকেশনের আইকন (যদি প্রয়োজন হয়)।
২. Electron এ Notification API ব্যবহার করা
উদাহরণ: Main Process - main.js
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
});
mainWindow.loadFile('index.html');
// নোটিফিকেশন তৈরি করা
new Notification({
title: 'Welcome to Electron!',
body: 'This is a simple desktop notification.',
icon: 'icon.png' // এটি একটি আইকন ফাইল হতে পারে
}).show(); // নোটিফিকেশনটি প্রদর্শন করবে
});
এই উদাহরণে, new Notification() দিয়ে একটি নতুন নোটিফিকেশন তৈরি করা হচ্ছে, যার মধ্যে শিরোনাম, বডি এবং একটি আইকন নির্ধারণ করা হয়েছে। এরপর show() ফাংশনটি ব্যবহার করে নোটিফিকেশনটি প্রদর্শন করা হচ্ছে।
৩. Renderer Process থেকে নোটিফিকেশন পাঠানো
এছাড়া, Renderer Process থেকে Main Process এ IPC (Inter-Process Communication) ব্যবহার করে নোটিফিকেশন পাঠানো যায়।
উদাহরণ: Main Process - main.js (IPC ব্যবহারের মাধ্যমে)
const { app, BrowserWindow, ipcMain } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
});
mainWindow.loadFile('index.html');
// Renderer থেকে নোটিফিকেশন বার্তা গ্রহণ
ipcMain.on('send-notification', (event, data) => {
new Notification({
title: data.title,
body: data.body,
icon: data.icon
}).show();
});
});
Renderer Process - index.html (IPC এর মাধ্যমে নোটিফিকেশন পাঠানো)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron Notification</title>
</head>
<body>
<h1>Electron Notification Example</h1>
<button id="notifyBtn">Show Notification</button>
<script>
const { ipcRenderer } = require('electron');
document.getElementById('notifyBtn').addEventListener('click', () => {
// Main Process-এ নোটিফিকেশন পাঠানো
ipcRenderer.send('send-notification', {
title: 'Hello from Renderer!',
body: 'This notification was triggered from the Renderer process.',
icon: 'icon.png'
});
});
</script>
</body>
</html>
এখানে, Renderer Process থেকে একটি বাটনে ক্লিক করলে Main Process-এ নোটিফিকেশন পাঠানো হচ্ছে IPC ব্যবহার করে।
৪. নোটিফিকেশন ক্লিক ইভেন্ট
আপনি Notification অবজেক্টে ক্লিক ইভেন্টও যোগ করতে পারেন, যাতে ব্যবহারকারী নোটিফিকেশনটি ক্লিক করলে কিছু নির্দিষ্ট কাজ সম্পন্ন হয়।
উদাহরণ: নোটিফিকেশন ক্লিক ইভেন্ট
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
});
mainWindow.loadFile('index.html');
// নোটিফিকেশন তৈরি
const notification = new Notification({
title: 'New Message',
body: 'You have a new message!',
icon: 'icon.png'
});
notification.show();
// নোটিফিকেশন ক্লিক ইভেন্ট
notification.onclick = () => {
console.log('Notification clicked!');
mainWindow.focus(); // উইন্ডো ফোকাস করা
};
});
এই উদাহরণে, যখন ব্যবহারকারী নোটিফিকেশনটিতে ক্লিক করবেন, তখন onclick ইভেন্ট ট্রিগার হবে এবং উইন্ডোটি ফোকাস হবে।
৫. নোটিফিকেশন কাস্টমাইজেশন
নোটিফিকেশনটির অন্যান্য কাস্টমাইজেশন যেমন বাটন এবং এনিমেশন যোগ করার জন্য Electron-এর Notification API-তে সীমাবদ্ধতা রয়েছে। তবে, আপনি নিজে কাস্টম UI তৈরি করতে পারেন, যেখানে একটি custom window ব্যবহার করে সম্পূর্ণ কাস্টম স্টাইল দেওয়া যেতে পারে।
সারাংশ
- Electron এর Notification API ব্যবহার করে ডেস্কটপ নোটিফিকেশন তৈরি করা যায়।
- নোটিফিকেশন তৈরির জন্য
new Notification()ব্যবহার করা হয়, যেখানে শিরোনাম, বডি এবং আইকন নির্ধারণ করা হয়। - Renderer Process থেকে Main Process-এ নোটিফিকেশন পাঠানোর জন্য IPC ব্যবহৃত হয়।
- নোটিফিকেশন ক্লিক ইভেন্টের মাধ্যমে আপনি ব্যবহারকারীর অ্যাকশনের উপর ভিত্তি করে অ্যাপ্লিকেশনে কিছু কাজ করতে পারেন।
এভাবে, আপনি আপনার Electron অ্যাপ্লিকেশন থেকে ব্যবহারকারীকে সক্রিয়ভাবে নোটিফিকেশন পাঠাতে পারবেন, যা তাদের জন্য একটি উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করবে।
Read more
