বিষয়বস্তুতে যান
ব্যবহারকারী গাইডসাপোর্ট ডেমো অনুরোধ করুন সাইন ইন করুন
Pushwoosh.com

npm এর সাথে ব্যবহার

npm এর মাধ্যমে Pushwoosh Web Push SDK ইনস্টল করা

Anchor link to

এখানে npm ব্যবহার করে আপনার প্রজেক্টে Pushwoosh Web Push Notifications SDK কীভাবে ইনস্টল এবং ব্যবহার করবেন তা দেখানো হলো। এই গাইডটি предполагает যে আপনার npm এবং JavaScript মডিউল ইম্পোর্ট সম্পর্কে প্রাথমিক ধারণা আছে।

SDK ইনস্টল করুন:

Anchor link to
Pushwoosh Web Push Notifications SDK ইনস্টল করুন
npm install web-push-notifications

সার্ভিস ওয়ার্কার সেটআপ

Anchor link to

npm এর মাধ্যমে SDK ব্যবহার করার সময়, সার্ভিস ওয়ার্কার ফাইলটি এখানে অবস্থিত:

node_modules/web-push-notifications/service-worker.js

গুরুত্বপূর্ণ: আপনার বিল্ড বা ডেপ্লয়মেন্ট প্রক্রিয়ার সময়, আপনাকে অবশ্যই এই সার্ভিস ওয়ার্কার ফাইলটি আপনার ওয়েবসাইটের রুটে কপি করতে হবে। পুশ নোটিফিকেশন সঠিকভাবে কাজ করার জন্য এটি অত্যন্ত গুরুত্বপূর্ণ।

উদাহরণস্বরূপ, একটি webpack প্রজেক্টে, আপনি copy-webpack-plugin ব্যবহার করতে পারেন:

const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
  // ...other webpack config
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/web-push-notifications/service-worker.js',
          to: 'service-worker.js' // Copies to output directory root
        }
      ]
    })
  ]
};

আপনি যদি Vite ব্যবহার করেন, তাহলে আপনি vite-plugin-static-copy প্লাগইনটি ব্যবহার করতে পারেন:

vite.config.js
import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy'


export default defineConfig({
  // ...other vite config
  plugins: [
    // ...other plugins
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/web-push-notifications/service-worker.js',
          dest: '' // Copies to build output root
        }
      ]
    })
  ]
});

অন্যান্য বিল্ড সিস্টেমের জন্য, সার্ভিস ওয়ার্কারটি আপনার ওয়েবসাইটের রুটে উপলব্ধ আছে তা নিশ্চিত করতে তাদের নিজ নিজ ফাইল কপি করার পদ্ধতি ব্যবহার করুন।

বিল্ট-ইন উইজেট

Anchor link to

Pushwoosh Web SDK ব্যবহারকারীর ইন্টারঅ্যাকশন বাড়াতে এবং সাবস্ক্রিপশন প্রক্রিয়াকে সহজতর করার জন্য চারটি বিল্ট-ইন UI উইজেট সহ আসে। যদিও PWSubscriptionPromptWidget প্রধানত Pushwoosh কন্ট্রোল প্যানেল এবং ব্রাউজার সেটিংসের মাধ্যমে কনফিগার করা হয়, অন্য তিনটি উইজেট (PWSubscriptionButtonWidget, PWSubscribePopupWidget, এবং PWInboxWidget) SDK-এর init মেথডের মধ্যে সরাসরি বিস্তারিত কনফিগারেশন অপশন প্রদান করে।

এখানে প্রতিটি উইজেটের একটি সংক্ষিপ্ত বিবরণ দেওয়া হলো:

  1. সাবস্ক্রিপশন প্রম্পট (PWSubscriptionPromptWidget) এই উইজেটটি ব্যবহারকারীদের পুশ নোটিফিকেশন পাঠানোর অনুমতি চাওয়ার জন্য ব্রাউজারের নেটিভ প্রম্পট প্রদর্শন করার জন্য দায়ী। এর আচরণ মূলত ব্রাউজারের স্ট্যান্ডার্ড এবং আপনার Pushwoosh কন্ট্রোল প্যানেলে কনফিগার করা সেটিংস দ্বারা নিয়ন্ত্রিত হয়। pushwoosh.push(['init', {...}]) কলের মধ্যে এর কোনো নির্দিষ্ট কনফিগারেশন প্যারামিটার নেই।

  2. সাবস্ক্রিপশন বাটন (PWSubscriptionButtonWidget) এই উইজেটটি আপনার সাইটে একটি ফ্লোটিং বাটন (প্রায়শই একটি বেল আইকন) যোগ করে, যা ব্যবহারকারীদের সহজেই সাবস্ক্রাইব করতে বা তাদের নোটিফিকেশন পছন্দগুলি পরিচালনা করতে দেয়।

  1. কাস্টম সাবস্ক্রিপশন পপআপ (PWSubscribePopupWidget) একটি কাস্টমাইজযোগ্য পপ-আপ যা নেটিভ ব্রাউজার প্রম্পট দেখানোর আগে নোটিফিকেশন অনুমতির জন্য জিজ্ঞাসা করার একটি আরও আকর্ষণীয় উপায় প্রদান করে।
  1. ইনবক্স উইজেট (PWInboxWidget) এই উইজেটটি একটি ইন-অ্যাপ মেসেজ সেন্টারকে একীভূত করে, যা ব্যবহারকারীদের রিচ পুশ নোটিফিকেশনের একটি ইতিহাস দেখতে দেয়।

আপনি নীচের উদাহরণগুলিতে দেখানো হিসাবে এই উইজেটগুলি ইনিশিয়ালাইজ এবং রান করতে পারেন:

ইম্পোর্ট এবং ইনিশিয়ালাইজ করুন

Anchor link to
Pushwoosh ইম্পোর্ট এবং ইনিশিয়ালাইজ করুন
import { Pushwoosh } from 'web-push-notifications';
import { PWSubscriptionPromptWidget } from 'web-push-notifications/widget-subscription-prompt';
import { PWSubscriptionButtonWidget } from 'web-push-notifications/widget-subscription-button';
import { PWSubscribePopupWidget } from 'web-push-notifications/widget-subscribe-popup';
import { PWInboxWidget } from 'web-push-notifications/widget-inbox';


const pushwoosh = new Pushwoosh();


pushwoosh.push(['init', {
  applicationCode: 'XXXXX-XXXXX', // your Pushwoosh Application Code
  apiToken: 'XXXXXXX', // Device API Token
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // path to your copied service worker


  // Custom Subscription Popup settings
  subscribePopup: {
    enable: true // Enable the subscription popup
    // other options can be added here
  },


  // Push subscription button settings
  subscribeWidget: {
    enable: true // Enable the subscription button widget
    // other options can be added here
  },


  // Inbox widget settings
  inboxWidget: {
    enable: true // Enable the inbox widget
    // other options can be added here
  }
}]);


pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionPromptWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscriptionPromptWidget initialization failed:', error);
  }
});


pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionButtonWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscriptionButtonWidget initialization failed:', error);
  }
});


pushwoosh.push(async () => {
  try {
    const widget = new PWSubscribePopupWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscribePopupWidget initialization failed:', error);
  }
});


pushwoosh.push(async () => {
  try {
    const widget = new PWInboxWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWInboxWidget initialization failed:', error);
  }
});

লিঙ্ক

Anchor link to

React এবং Vite সহ একটি উদাহরণ অ্যাপ্লিকেশন দেখুন: https://github.com/Pushwoosh/websdk-npm-vite-react-example