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

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

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

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

```bash title="Pushwoosh Web Push Notifications SDK ইনস্টল করুন"
npm install web-push-notifications
```

<Aside type="caution" title="SDK ভার্সনিং সম্পর্কিত গুরুত্বপূর্ণ নোট (v3.45.0+)">
  **3.45.0** সংস্করণ থেকে, Pushwoosh Web SDK কোর SDK এবং এর UI উইজেটগুলি ইম্পোর্ট করার জন্য একটি মডুলার পদ্ধতি চালু করেছে।

  - **আলাদা ইম্পোর্ট:** এখন আপনাকে প্রধান `Pushwoosh` ক্লাস এবং যেকোনো কাঙ্ক্ষিত উইজেট (যেমন `PWSubscriptionButtonWidget`, `PWSubscribePopupWidget`, ইত্যাদি) আলাদাভাবে ইম্পোর্ট করতে হবে। এই সংস্করণের আগে, সমস্ত কম্পোনেন্ট সাধারণত একটি একক ইম্পোর্টে বান্ডিল করা থাকত।
  - **ES2020 কম্পাইলেশন:** এই সংস্করণ থেকে SDK টি ES2020 JavaScript স্পেসিফিকেশনে কম্পাইল করা হয়েছে। অনুগ্রহ করে নিশ্চিত করুন যে আপনার বিল্ড এনভায়রনমেন্ট এবং টার্গেট ব্রাউজারগুলি ES2020 ফিচার সমর্থন করে।
</Aside>

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

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

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

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

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

```javascript
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` প্লাগইনটি ব্যবহার করতে পারেন:


```javascript
// 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
        }
      ]
    })
  ]
});
```
অন্যান্য বিল্ড সিস্টেমের জন্য, সার্ভিস ওয়ার্কারটি আপনার ওয়েবসাইটের রুটে উপলব্ধ আছে তা নিশ্চিত করতে তাদের নিজ নিজ ফাইল কপি করার পদ্ধতি ব্যবহার করুন।

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

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

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

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

2.  **সাবস্ক্রিপশন বাটন (`PWSubscriptionButtonWidget`)**
এই উইজেটটি আপনার সাইটে একটি ফ্লোটিং বাটন (প্রায়শই একটি বেল আইকন) যোগ করে, যা ব্যবহারকারীদের সহজেই সাবস্ক্রাইব করতে বা তাদের নোটিফিকেশন পছন্দগুলি পরিচালনা করতে দেয়।
*   **কনফিগারেশন:** এই উইজেটের জন্য সেটিংস `init` কলে `subscribeWidget` অবজেক্টের অধীনে পরিচালিত হয়।
*   **আরও জানুন:** [পুশ সাবস্ক্রিপশন বাটন](/bn/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/)

3.  **কাস্টম সাবস্ক্রিপশন পপআপ (`PWSubscribePopupWidget`)**
একটি কাস্টমাইজযোগ্য পপ-আপ যা নেটিভ ব্রাউজার প্রম্পট দেখানোর আগে নোটিফিকেশন অনুমতির জন্য জিজ্ঞাসা করার একটি আরও আকর্ষণীয় উপায় প্রদান করে।
*   **কনফিগারেশন:** `init` কলে `subscribePopup` অবজেক্ট ব্যবহার করে এর চেহারা এবং আচরণ কাস্টমাইজ করুন।
*   **আরও জানুন:** [কাস্টম সাবস্ক্রিপশন পপআপ](/bn/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/)

4.  **ইনবক্স উইজেট (`PWInboxWidget`)**
এই উইজেটটি একটি ইন-অ্যাপ মেসেজ সেন্টারকে একীভূত করে, যা ব্যবহারকারীদের রিচ পুশ নোটিফিকেশনের একটি ইতিহাস দেখতে দেয়।
*   **কনফিগারেশন:** `init` কলে `inboxWidget` অবজেক্টের মাধ্যমে পরিচালিত হয়।
*   **আরও জানুন:** [ওয়েব ইনবক্স উইজেট](/bn/developer/pushwoosh-sdk/web-push-notifications/web-inbox-widget/)

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

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

```javascript title="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);
  }
});
```

## লিঙ্ক

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