Web Development Firebase Cloud Messaging (FCM) এর মাধ্যমে Push Notifications গাইড ও নোট

Firebase Cloud Messaging (FCM) হল গুগলের একটি ফ্রি সার্ভিস যা ডেভেলপারদের মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে Push Notifications পাঠাতে সহায়তা করে। FCM ব্যবহার করে আপনি ব্যবহারকারীদের কাছে রিয়েল-টাইমে তথ্য, নোটিফিকেশন বা ডেটা পাঠাতে পারেন, যা ইউজার অভিজ্ঞতা উন্নত করে এবং অ্যাপের অ্যাক্টিভিটি বাড়ায়।

কেন Push Notifications ব্যবহার করবেন?

• ইউজার এনগেজমেন্ট বাড়ানো: গুরুত্বপূর্ণ আপডেট বা তথ্য সরাসরি ব্যবহারকারীর ডিভাইসে পৌঁছাতে পারে।
• রিয়েল-টাইম যোগাযোগ: ব্যবহারকারীদের সাথে তৎক্ষণাত যোগাযোগ স্থাপন করা যায়।
• ব্যবহারকারী রিটেনশন: নিয়মিত নোটিফিকেশন ব্যবহারকারীদের অ্যাপে ফিরতে উৎসাহিত করে।
• ইউজার পার্সোনালাইজেশন: ব্যক্তিগতকৃত নোটিফিকেশন পাঠিয়ে ইউজার অভিজ্ঞতা উন্নত করা যায়।

Framework7 এর সাথে FCM একীভূত করার ধাপসমূহ

১. Firebase প্রজেক্ট তৈরি করা

1. Firebase Console এ যান: Firebase Console এ লগইন করুন।
2. নতুন প্রজেক্ট তৈরি করুন:
   • Add project ক্লিক করুন।
   • আপনার প্রজেক্টের নাম দিন এবং Continue ক্লিক করুন।
   • প্রজেক্ট সেটআপ সম্পন্ন করুন।
3. অ্যাপ যোগ করুন:
   • Add app ক্লিক করুন এবং আপনার অ্যাপের প্ল্যাটফর্ম নির্বাচন করুন (যেমন: Android, iOS, Web)।
   • প্রতিটি প্ল্যাটফর্মের জন্য প্রয়োজনীয় কনফিগারেশন ফাইল (যেমন: google-services.json for Android, GoogleService-Info.plist for iOS) ডাউনলোড করুন।

২. Framework7 প্রজেক্টে Firebase SDK যুক্ত করা

মোবাইল অ্যাপ (Cordova/Capacitor) এর জন্য:

1. Cordova প্লাগইন ইনস্টল করা:

   cordova plugin add cordova-plugin-firebase
   

   অথবা Capacitor ব্যবহার করলে:

   npm install @capacitor/firebase
   npx cap sync
   

2. কনফিগারেশন ফাইল যোগ করা:
   • ডাউনলোড করা google-services.json ফাইলটি platforms/android/app ডিরেক্টরিতে রাখুন।
   • iOS এর জন্য GoogleService-Info.plist ফাইলটি Xcode প্রজেক্টে যোগ করুন।

ওয়েব অ্যাপের জন্য:

1. Firebase SDK যোগ করা: আপনার index.html ফাইলে Firebase SDK লিঙ্ক যুক্ত করুন:

   <!-- Firebase App (required) -->
   <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"></script>
   <!-- Firebase Messaging -->
   <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging-compat.js"></script>
   

2. Firebase কনফিগারেশন যুক্ত করা:

   <script>
     // Your web app's Firebase configuration
     var 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);
   </script>
   

৩. Push Notifications সেটআপ করা

মোবাইল অ্যাপের জন্য:

1. টোকেন রেজিস্টার করা:

   document.addEventListener('deviceready', function () {
     const firebase = cordova.plugins.firebase;
   
     // Get FCM token
     firebase.getToken(function(token) {
       console.log("FCM Token:", token);
       // সার্ভারে টোকেন সংরক্ষণ করুন
     }, function(error) {
       console.error("Error getting token:", error);
     });
   
     // টোকেন রিফ্রেশ হ্যান্ডল করা
     firebase.onTokenRefresh(function(token) {
       console.log("Refreshed FCM Token:", token);
       // সার্ভারে নতুন টোকেন আপডেট করুন
     }, function(error) {
       console.error("Error on token refresh:", error);
     });
   
     // মেসেজ হ্যান্ডল করা
     firebase.onMessageReceived(function(message) {
       console.log("Received a notification:", message);
       // নোটিফিকেশন প্রদর্শন করুন
     }, function(error) {
       console.error("Error on message received:", error);
     });
   });
   

ওয়েব অ্যাপের জন্য:

1. Service Worker তৈরি করা: আপনার প্রোজেক্টের মূল ডিরেক্টরিতে firebase-messaging-sw.js ফাইল তৈরি করুন:

   importScripts('https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js');
   importScripts('https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging-compat.js');
   
   firebase.initializeApp({
     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",
   });
   
   const messaging = firebase.messaging();
   
   messaging.onBackgroundMessage(function(payload) {
     console.log('[firebase-messaging-sw.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);
   });
   

2. Service Worker নিবন্ধন করা: আপনার index.html বা মূল JavaScript ফাইলে:

   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/firebase-messaging-sw.js')
     .then(function(registration) {
       console.log('Service Worker registered with scope:', registration.scope);
       messaging.useServiceWorker(registration);
     }).catch(function(err) {
       console.error('Service Worker registration failed:', err);
     });
   }
   
   const messaging = firebase.messaging();
   
   // ইউজার থেকে অনুমতি নিন
   messaging.requestPermission()
     .then(function() {
       console.log('Notification permission granted.');
       return messaging.getToken();
     })
     .then(function(token) {
       console.log('FCM Token:', token);
       // সার্ভারে টোকেন সংরক্ষণ করুন
     })
     .catch(function(err) {
       console.error('Unable to get permission to notify.', err);
     });
   
   // মেসেজ হ্যান্ডল করা
   messaging.onMessage(function(payload) {
     console.log('Message received. ', payload);
     // নোটিফিকেশন প্রদর্শন করুন
   });
   

৪. Push Notifications পাঠানো

Firebase Console ব্যবহার করে:

1. Firebase Console এ যান এবং আপনার প্রজেক্ট নির্বাচন করুন।
2. Cloud Messaging সেকশনে যান।
3. Send your first message ক্লিক করুন।
4. Message details পূরণ করুন (টাইটেল, মেসেজ ইত্যাদি)।
5. Target নির্বাচন করুন (সকল ইউজার বা নির্দিষ্ট ডিভাইস)।
6. Send message ক্লিক করুন।

সার্ভার সাইড থেকে Push Notifications পাঠানো:

আপনি সার্ভার থেকে HTTP POST রিকোয়েস্ট ব্যবহার করে Push Notifications পাঠাতে পারেন।

1. Server Key সংগ্রহ করা:
   • Firebase Console এ Project Settings > Cloud Messaging সেকশনে যান।
   • Server key কপি করুন।

2. HTTP POST রিকোয়েস্ট উদাহরণ (Node.js ব্যবহার করে):

   const fetch = require('node-fetch');
   
   const sendPushNotification = async (token, title, body) => {
     const message = {
       notification: {
         title: title,
         body: body,
       },
       to: token,
     };
   
     const response = await fetch('https://fcm.googleapis.com/fcm/send', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         'Authorization': 'key=YOUR_SERVER_KEY',
       },
       body: JSON.stringify(message),
     });
   
     const data = await response.json();
     console.log('Push notification sent:', data);
   };
   
   // ব্যবহার:
   sendPushNotification('USER_FCM_TOKEN', 'Hello!', 'This is a push notification.');
   

৫. নিরাপত্তা এবং সঠিকতা

• টোকেন সুরক্ষিত রাখা: FCM টোকেনগুলি সংরক্ষণ এবং ব্যবহার করার সময় সুরক্ষিত থাকতে হবে।
• ডাইনামিক টোকেন আপডেট: ব্যবহারকারীর টোকেন পরিবর্তন হলে সার্ভারকে আপডেট করতে হবে।
• নোটিফিকেশন সঠিকভাবে হ্যান্ডল করা: ক্লায়েন্ট সাইডে নোটিফিকেশন গ্রহণ এবং প্রদর্শনের সঠিক নিয়ম মেনে চলুন।

সারাংশ

Firebase Cloud Messaging (FCM) ব্যবহার করে Framework7 অ্যাপ্লিকেশনে Push Notifications ইন্টিগ্র

Full Example: Framework7 Web App with FCM Integration

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Framework7 FCM Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css">
</head>
<body>
  <div id="app">
    <div class="view view-main">
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">FCM Example</div>
          </div>
        </div>
        <div class="page-content">
          <p>Welcome to Framework7 with FCM!</p>
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging-compat.js"></script>
  <script>
    // Firebase configuration
    var 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();

    // Initialize Framework7
    var app = new Framework7({
      root: '#app',
      name: 'FCM Example',
      theme: 'auto',
      // other parameters
    });

    // Register Service Worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js')
      .then(function(registration) {
        console.log('Service Worker registered with scope:', registration.scope);
        messaging.useServiceWorker(registration);
      }).catch(function(err) {
        console.error('Service Worker registration failed:', err);
      });
    }

    // Request Notification Permission and Get Token
    messaging.requestPermission()
      .then(function() {
        console.log('Notification permission granted.');
        return messaging.getToken();
      })
      .then(function(token) {
        console.log('FCM Token:', token);
        // Send token to your server and update the UI if necessary
      })
      .catch(function(err) {
        console.error('Unable to get permission to notify.', err);
      });

    // Handle incoming messages
    messaging.onMessage(function(payload) {
      console.log('Message received. ', payload);
      // Customize notification here
      app.dialog.alert(payload.notification.body, payload.notification.title);
    });
  </script>
</body>
</html>

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.22.1/firebase-messaging-compat.js');

firebase.initializeApp({
  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",
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.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 Cloud Messaging (FCM) ব্যবহার করে Framework7 অ্যাপ্লিকেশনে Push Notifications ইন্টিগ্রেট করা বেশ সহজ। এটি আপনাকে ব্যবহারকারীদের সাথে কার্যকর যোগাযোগ স্থাপন করতে এবং অ্যাপের ইউজার অভিজ্ঞতা উন্নত করতে সহায়তা করে। উপরোক্ত ধাপগুলো অনুসরণ করে আপনি আপনার Framework7 অ্যাপে FCM সফলভাবে ইন্টিগ্রেট করতে পারবেন।