Push Notifications (পুশ নোটিফিকেশন) ব্যবহারকারীদের রিয়েল-টাইমে তথ্য প্রদান করতে এবং অ্যাপ্লিকেশনের ইঙ্গেজমেন্ট বৃদ্ধি করতে সাহায্য করে। Framework7-এর মাধ্যমে Push Notifications সেটআপ এবং কনফিগার করা বেশ সহজ, তবে এটি নির্ভর করে আপনি কোন প্ল্যাটফর্মে অ্যাপটি ডেভেলপ করছেন তার উপর—যেমন PWA/Web অ্যাপ, Cordova মোবাইল অ্যাপ, অথবা Capacitor মোবাইল অ্যাপ।
এই গাইডে আমরা দুটি প্রধান পদ্ধতি আলোচনা করব:
- PWA/Web অ্যাপের জন্য Push Notifications: Firebase Cloud Messaging (FCM) ব্যবহার করে।
- মোবাইল অ্যাপের জন্য Push Notifications: Cordova বা Capacitor প্লাগইন ব্যবহার করে।
১. PWA/Web অ্যাপের জন্য Push Notifications সেটআপ
Firebase Cloud Messaging (FCM) হলো Google-এর একটি ফ্রি সার্ভিস যা Push Notifications পাঠাতে এবং গ্রহণ করতে ব্যবহার করা হয়। এখানে Framework7 PWA/Web অ্যাপে FCM সেটআপ করার ধাপগুলো আলোচনা করা হলো।
ধাপ ১: Firebase প্রজেক্ট তৈরি করা
- Firebase Console এ যান এবং একটি নতুন প্রজেক্ট তৈরি করুন।
- প্রজেক্টের নাম দিন এবং প্রয়োজনীয় সেটিংস নির্বাচন করুন।
- প্রজেক্ট তৈরি হওয়ার পর, প্রোজেক্ট ড্যাশবোর্ডে যান।
ধাপ ২: Firebase Cloud Messaging সক্রিয় করা
- Firebase Console-এ গিয়ে Cloud Messaging সেকশনটি নির্বাচন করুন।
- এখানে আপনি Server key এবং Sender ID পাবেন, যা পরবর্তীতে প্রয়োজন হবে।
ধাপ ৩: সার্ভিস ওয়ার্কার (Service Worker) তৈরি করা
PWA/Web অ্যাপের জন্য Push Notifications কার্যকর করতে একটি সার্ভিস ওয়ার্কার প্রয়োজন। নিচে একটি সাধারণ সার্ভিস ওয়ার্কার উদাহরণ দেওয়া হলো:
service-worker.js
importScripts('https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js');
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID",
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
// Handle background messages
messaging.onBackgroundMessage(function(payload) {
console.log('[service-worker.js] Received background message ', payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
icon: '/firebase-logo.png'
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});
ধাপ ৪: ফ্রন্টএন্ডে Firebase এবং Push Notifications ইন্টিগ্রেট করা
index.html অথবা আপনার প্রধান HTML ফাইলে Firebase এবং সার্ভিস ওয়ার্কার লোড করুন:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Framework7 PWA Push Notifications</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css">
</head>
<body>
<div id="app">
<!-- Framework7 App Structure -->
</div>
<script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js"></script>
<script>
// Firebase configuration
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
// Request permission to send notifications
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Notification permission granted.');
// Get registration token
messaging.getToken({ vapidKey: 'YOUR_PUBLIC_VAPID_KEY' }).then((currentToken) => {
if (currentToken) {
console.log('FCM Token:', currentToken);
// Send the token to your server and update the UI if necessary
} else {
console.log('No registration token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
} else {
console.log('Unable to get permission to notify.');
}
});
// Handle incoming messages
messaging.onMessage((payload) => {
console.log('Message received. ', payload);
// Customize notification here
app.dialog.alert(payload.notification.body, payload.notification.title);
});
// Register service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(err) {
console.log('Service Worker registration failed:', err);
});
}
// Initialize Framework7
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'auto',
// Additional parameters
});
</script>
</body>
</html>
নোট:
YOUR_API_KEY,YOUR_PROJECT_ID,YOUR_SENDER_ID,YOUR_APP_ID, এবংYOUR_PUBLIC_VAPID_KEYআপনার Firebase প্রজেক্টের তথ্য অনুযায়ী প্রতিস্থাপন করুন।- VAPID কী তৈরির জন্য Firebase Console-এ Cloud Messaging সেকশনে যান এবং VAPID কী তৈরি করুন।
ধাপ ৫: Push Notifications পাঠানো
Push Notifications পাঠাতে Firebase Console-এ যান এবং Cloud Messaging সেকশনে একটি নতুন নোটিফিকেশন তৈরি করুন। আপনি এখানে টাইটেল, বডি, এবং অন্যান্য সেটিংস কনফিগার করতে পারবেন।
২. মোবাইল অ্যাপের জন্য Push Notifications সেটআপ
মোবাইল অ্যাপ (iOS ও Android) তৈরি করার জন্য Framework7-এর সাথে Cordova বা Capacitor ব্যবহার করতে পারেন। এখানে Cordova প্লাগইন ব্যবহার করে Push Notifications সেটআপ করার ধাপগুলো আলোচনা করা হলো।
ধাপ ১: Cordova ইনস্টল করা
প্রথমে নিশ্চিত করুন যে আপনার সিস্টেমে Cordova ইনস্টল করা আছে।
npm install -g cordova
ধাপ ২: নতুন Cordova প্ল্যাটফর্ম যোগ করা
আপনার Framework7 প্রজেক্টে Cordova প্ল্যাটফর্ম যোগ করুন:
cordova platform add android
cordova platform add ios
ধাপ ৩: Push Notifications প্লাগইন ইনস্টল করা
Cordova Push Notifications প্লাগইন ইনস্টল করুন:
cordova plugin add phonegap-plugin-push
ধাপ ৪: Firebase প্রজেক্ট সেটআপ করা
- Firebase Console এ যান এবং একটি নতুন প্রজেক্ট তৈরি করুন।
- আপনার অ্যাপ (Android এবং/অথবা iOS) Firebase প্রজেক্টে যোগ করুন।
- Cloud Messaging সেকশন থেকে প্রয়োজনীয় সেটিংস সংগ্রহ করুন, যেমন
google-services.json(Android) এবংGoogleService-Info.plist(iOS)।
ধাপ ৫: ফ্রন্টএন্ডে Push Notifications ইন্টিগ্রেট করা
index.html অথবা আপনার প্রধান JavaScript ফাইলে Push Notifications কোড যোগ করুন:
document.addEventListener('deviceready', function () {
var push = PushNotification.init({
android: {
senderID: "YOUR_SENDER_ID"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
}
});
push.on('registration', function(data) {
console.log("Registration ID:", data.registrationId);
// Send registrationId to your server to send push notifications
});
push.on('notification', function(data) {
console.log("Notification received:", data);
app.dialog.alert(data.message, data.title);
push.finish(function() {
console.log('processing of push data is finished');
});
});
push.on('error', function(e) {
console.error("Push error:", e.message);
});
}, false);
নোট:
YOUR_SENDER_IDআপনার Firebase প্রজেক্টের Sender ID যা FCM থেকে পাওয়া যায়।- Android এবং iOS এর জন্য আলাদা কনফিগারেশন ফাইল যোগ করতে ভুলবেন না (যেমন
google-services.jsonএবংGoogleService-Info.plist)।
ধাপ ৬: Android ও iOS কনফিগারেশন
Android:
- Firebase Console থেকে
google-services.jsonডাউনলোড করুন। - এটি আপনার Cordova প্রজেক্টের
platforms/android/app/ডিরেক্টরিতে রাখুন।
iOS:
- Firebase Console থেকে
GoogleService-Info.plistডাউনলোড করুন। - এটি Xcode-এ আপনার প্রজেক্টে যোগ করুন।
ধাপ ৭: অ্যাপ বিল্ড এবং রান করা
Android এবং iOS এর জন্য অ্যাপ বিল্ড করুন:
cordova build android
cordova build ios
এবার আপনার মোবাইল ডিভাইসে অ্যাপটি ইনস্টল করুন এবং Push Notifications টেস্ট করুন।
উপসংহার
Framework7-এর সাথে Push Notifications সেটআপ এবং কনফিগার করা বেশ সহজ। আপনি PWA/Web অ্যাপের জন্য Firebase Cloud Messaging ব্যবহার করতে পারেন এবং মোবাইল অ্যাপের জন্য Cordova বা Capacitor প্লাগইন ব্যবহার করতে পারেন। Push Notifications আপনার অ্যাপের ইঙ্গেজমেন্ট এবং ব্যবহারকারীদের অভিজ্ঞতা উন্নত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।
সতর্কতা:
- Push Notifications ব্যবহারের জন্য ব্যবহারকারীর অনুমতি প্রয়োজন।
- নিরাপত্তা এবং ডেটা সুরক্ষা নিশ্চিত করতে Push Notifications-কে সঠিকভাবে হ্যান্ডল করুন।
- Firebase Cloud Messaging এবং Cordova প্লাগইনের ডকুমেন্টেশন অনুসরণ করে আরও বিস্তারিত কনফিগারেশন ও ফিচার ইন্টিগ্রেশন করুন।
রেফারেন্স
Read more
