# ওয়েব পুশ SDK 3.0

<Aside type="note">
#### পূর্বশর্ত

আপনার HTTPS ওয়েবসাইটে ওয়েব পুশ SDK ইন্টিগ্রেশন শুরু করার জন্য, আপনাকে নিম্নলিখিত কাজগুলো করতে হবে:

1. আপনার Pushwoosh অ্যাপ্লিকেশন কোডটি খুঁজে বের করুন।
2. Chrome এবং Firefox: আপনার Firebase API কী এবং সেন্ডার আইডি খুঁজে বের করুন। এটি করার জন্য, অনুগ্রহ করে [Chrome এবং Firefox কনফিগারেশন](/bn/developer/first-steps/connect-messaging-services/chrome-configuration/) গাইডের ১-৩ ধাপ অনুসরণ করুন।
3. Safari: আপনার [ওয়েবসাইট পুশ আইডি](/bn/developer/first-steps/connect-messaging-services/safari-configuration/#1-registering-with-apple) খুঁজে বের করুন।
4. [Pushwoosh ওয়েব পুশ SDK](https://cdn.pushwoosh.com/webpush/v3/PushwooshWebSDKFiles.zip) ডাউনলোড করুন।
</Aside>

<Aside type="caution">
* Chrome পুশ **স্ব-স্বাক্ষরিত** সার্টিফিকেট (https/ssl) দিয়ে কাজ করবে না। আপনার বিশ্বস্ত কর্তৃপক্ষ দ্বারা স্বাক্ষরিত SSL সার্টিফিকেট প্রয়োজন হবে।
* পুশ নোটিফিকেশন ইনকগনিটো এবং গেস্ট মোড উভয় ক্ষেত্রেই কাজ করে না।
* Safari-এর জন্য অটো সাবস্ক্রিপশন উপলব্ধ নয়।
</Aside>

## ইন্টিগ্রেশন

<Aside type="note" title="npm ব্যবহার করছেন?">
  আপনি যদি প্যাকেজ ম্যানেজমেন্টের জন্য npm ব্যবহার করতে পছন্দ করেন, তাহলে আপনি npm-এর মাধ্যমেও Pushwoosh Web SDK ইনস্টল এবং ইন্টিগ্রেট করতে পারেন। বিস্তারিত নির্দেশাবলীর জন্য অনুগ্রহ করে আমাদের [npm-এর সাথে ব্যবহার নির্দেশিকা](/bn/developer/pushwoosh-sdk/web-push-notifications/usage-with-npm/) দেখুন।
</Aside>

[**GitHub-এ ইন্টিগ্রেশন নমুনা**](https://github.com/Pushwoosh/web-push-notifications-sample)

### Pushwoosh Web Push SDK পান এবং এটি আনজিপ করুন। আপনার কাছে নিম্নলিখিত ফাইলগুলো থাকা উচিত:

* **pushwoosh-service-worker.js**

### এই সমস্ত ফাইলগুলো আপনার ওয়েবসাইটের ডিরেক্টরির টপ-লেভেল রুটে রাখুন।

<Aside type="note">
নিশ্চিত করুন যে নিম্নলিখিত URL গুলো সর্বজনীনভাবে অ্যাক্সেসযোগ্য:

* [https://yoursite.com/pushwoosh-service-worker.js](https://yoursite.com/pushwoosh-service-worker.js)
</Aside>

### SDK ইনিশিয়ালাইজ করুন:

1. আমাদের CDN থেকে SDK _অ্যাসিঙ্ক্রোনাসভাবে_ অন্তর্ভুক্ত করুন।

<Aside title="Google Tag Manager সমর্থিত">

আপনি যদি Google Tag Manager ব্যবহার করেন তবে [এখানে ক্লিক করুন](#installing-from-google-tag-manager)।
</Aside>

```txt
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
```

2. ওয়েব পুশ SDK ইনিশিয়ালাইজ করুন এবং নিশ্চিত করুন যে SDK সম্পূর্ণরূপে লোড না হওয়া পর্যন্ত ইনিশিয়ালাইজেশনটি কিউতে থাকবে।
<Aside type="note">
ওয়েব পুশ SDK ইনিশিয়ালাইজ করার জন্য, আপনাকে `apiToken` প্যারামিটারে একটি [ডিভাইস API টোকেন](/bn/developer/api-reference/api-access-token/#device-api-token) অন্তর্ভুক্ত করতে হবে।

**গুরুত্বপূর্ণ:** নিশ্চিত করুন যে টোকেনটি আপনার Pushwoosh কন্ট্রোল প্যানেলে সঠিক অ্যাপ্লিকেশনে অ্যাক্সেস করতে পারে। [আরও জানুন](/bn/developer/api-reference/api-access-token/#edit-token)
</Aside>
```html
<script type="text/javascript">
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
    logLevel: 'info', // সম্ভাব্য মান: error, info, debug
    applicationCode: 'XXXXX-XXXXX', // Pushwoosh কন্ট্রোল প্যানেল থেকে আপনার অ্যাপ্লিকেশন কোড
    apiToken: 'XXXXXXX', //  ডিভাইস API টোকেন
    safariWebsitePushID: 'web.com.example.domain', //  আপনার Apple ডেভেলপার পোর্টালে প্রাপ্ত একটি অনন্য রিভার্স-ডোমেন স্ট্রিং। শুধুমাত্র যদি আপনি Safari ব্রাউজারে পুশ নোটিফিকেশন পাঠান তবেই প্রয়োজন
    defaultNotificationTitle: 'Pushwoosh', // পুশ নোটিফিকেশনের জন্য একটি ডিফল্ট শিরোনাম সেট করে
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // কাস্টম নোটিফিকেশন ইমেজের URL
    autoSubscribe: false, // অথবা true। যদি true হয়, SDK ইনিশিয়ালাইজেশনের সময় ব্যবহারকারীকে পুশের জন্য সাবস্ক্রাইব করতে অনুরোধ করে
    subscribeWidget: {
      enable: true
    },
    userId: 'user_id', // ঐচ্ছিক, কাস্টম ইউজার আইডি সেট করুন
    tags: {
        'Name': 'John Smith'   	// ঐচ্ছিক, কাস্টম ট্যাগ সেট করুন
    }
}]);
</script>
```

#### ওয়েব পপআপ

আপনার সাইটে [ওয়েব পপআপ ক্যাম্পেইন](/bn/product/messaging-channels/web-popups/#start-working-with-web-popups) সক্রিয় করতে আপনার `init` অবজেক্টে `webPopups` যোগ করুন।

```javascript
webPopups: {
  enable: true,
},
```

ওয়েব পপআপ ক্যাম্পেইনগুলো কন্ট্রোল প্যানেলে আপনার কনফিগার করা ওভারলে প্রদর্শন করে, যেমন প্রোমো, ঘোষণা বা লিড ক্যাপচার ফর্ম। [কাস্টম সাবস্ক্রিপশন পপআপ](/bn/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/) (`subscribePopup`)-এর বিপরীতে, যা শুধুমাত্র ওয়েব পুশ অপ্ট-ইন পরিচালনা করে, ওয়েব পপআপ ক্যাম্পেইনগুলো আপনার কনফিগার করা যেকোনো বিষয়বস্তু প্রদর্শন করতে পারে।
কন্ট্রোল প্যানেলে সেটআপের জন্য, দেখুন [ওয়েব পপআপ বোঝা](/bn/product/messaging-channels/web-popups/)।

#### পুশ সাবস্ক্রিপশন বোতাম

আপনার ব্যবহারকারীদের পুশ নোটিফিকেশনের জন্য সাবস্ক্রাইব করতে উৎসাহিত করার জন্য, আমরা আপনার ওয়েবসাইটে একটি [পুশ সাবস্ক্রিপশন বোতাম](/bn/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/) বাস্তবায়নের সুপারিশ করি। ব্যবহারকারীর অভিজ্ঞতা উন্নত করুন এবং আরও সাবস্ক্রাইবার পান!


## কনফিগারেশন

আপনার ওয়েবসাইটে পুশ নোটিফিকেশন বাস্তবায়ন শেষ করতে, আপনাকে আমাদের ধাপে ধাপে নির্দেশিকা অনুসরণ করে আপনার Pushwoosh কন্ট্রোল প্যানেলে ওয়েব প্ল্যাটফর্মগুলো কনফিগার করতে হবে:

* [Chrome কনফিগারেশন](/bn/developer/first-steps/connect-messaging-services/chrome-configuration/)
* [Firefox কনফিগারেশন](/bn/developer/first-steps/connect-messaging-services/chrome-configuration/)
* [Safari কনফিগারেশন](/bn/developer/first-steps/connect-messaging-services/safari-configuration/)

<Aside type="note">
FCM সেন্ডার আইডি এবং API কী পেতে, অনুগ্রহ করে [Android কনফিগারেশন গাইডের](/bn/developer/first-steps/connect-messaging-services/android-configuration/android-firebase-configuration/) ১-৩ ধাপ অনুসরণ করুন।
</Aside>

## একটি ভিন্ন স্কোপে সার্ভিস ওয়ার্কার নিবন্ধন করা

কখনও কখনও আপনি সার্ভিস ওয়ার্কার ফাইলটি ওয়েবসাইটের রুট ডিরেক্টরিতে না রেখে একটি সাবডিরেক্টরিতে রাখতে পারেন।

এই ক্ষেত্রে, একটি প্যারামিটার যোগ করে কনফিগারেশনটি পরিবর্তন করুন (**ধাপ ৪.৩**):

`serviceWorkerUrl: “/push-notifications/pushwoosh-service-worker.js”`

যেখানে `/push-notifications/pushwoosh-service-worker.js` হল `pushwoosh-service-worker.js` ফাইলের পাথ।

## ইভেন্ট হ্যান্ডলার

Pushwoosh Web SDK 3.0-এ আপনি নির্দিষ্ট ইভেন্টগুলো ট্র্যাক করার জন্য সাবস্ক্রাইব করতে পারেন**,** অথবা যদি আপনার আর ট্র্যাক করার প্রয়োজন না থাকে তবে ইভেন্টগুলো থেকে আনসাবস্ক্রাইব করতে পারেন।

Web SDK 3.0 লোড ট্র্যাক করতে, `onLoad` ইভেন্টটি নিম্নরূপ ফায়ার করুন:

```javascript
// Load Event
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh load!');
}]);
```

সঠিক Web SDK ইনিশিয়ালাইজেশন ট্র্যাক করতে, `onReady` ইভেন্টটি ফায়ার করুন:

```javascript
// Ready Event
Pushwoosh.push((api) => {
  console.log('Pushwoosh ready!');
});
```

SDK-এর যেকোনো ইভেন্টে সাবস্ক্রাইব বা আনসাবস্ক্রাইব করতে, SDK লোড হওয়ার পরে হ্যান্ডলারগুলো ব্যবহার করুন:

```javascript
Pushwoosh.push(['onLoad', (api) => {
  function onEventNameHandler() {
    console.log('Triggered event: event-name!');
  }

  // একটি ইভেন্টে সাবস্ক্রাইব করতে:
  Pushwoosh.addEventHandler('event-name', onEventNameHandler)

  // একটি ইভেন্ট থেকে আনসাবস্ক্রাইব করতে:
  Pushwoosh.removeEventHandler('event-name', onEventNameHandler)
}]);
```

### SDK ইভেন্ট

#### সাবস্ক্রাইব ইভেন্ট

একজন ব্যবহারকারী পুশ নোটিফিকেশন পেতে সম্মত হওয়ার পরে কার্যকর হয়।

```javascript
Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('subscribe', (payload) => {
    console.log('Triggered event: subscribe');
  });
}]);
```

#### আনসাবস্ক্রাইব ইভেন্ট

একটি ডিভাইস নোটিফিকেশন থেকে আনরেজিস্টার হওয়ার পরে কার্যকর হয়।

```javascript
Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('unsubscribe', (payload) => {
    console.log('Triggered event: unsubscribe');
  });
}]);
```

#### সাবস্ক্রিপশন উইজেট ইভেন্ট

একটি সাবস্ক্রিপশন প্রম্পট উইজেট প্রদর্শন ট্র্যাক করুন।

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // সাবস্ক্রিপশন প্রম্পট উইজেট প্রদর্শনের সময় কার্যকর হয়
  Pushwoosh.addEventHandler('show-subscription-widget', (payload) => {
    console.log('Triggered event: show-subscription-widget');
  });

  // সাবস্ক্রিপশন প্রম্পট উইজেট লুকানোর সময় কার্যকর হয়
  Pushwoosh.addEventHandler('hide-subscription-widget', (payload) => {
    console.log('Triggered event: hide-subscription-widget');
  });
}]);
```

#### নোটিফিকেশন পারমিশন ডায়ালগ ইভেন্ট

নেটিভ সাবস্ক্রিপশন ডায়ালগ প্রদর্শন ট্র্যাক করুন।

```javascript
Pushwoosh.push(['onLoad', function (api) {
  // পারমিশন ডায়ালগ প্রদর্শনের সময় কার্যকর হয়
  Pushwoosh.addEventHandler('show-notification-permission-dialog', (payload) => {
    console.log('Triggered event: show-notification-permission-dialog');
  });

  // তিনটি সম্ভাব্য স্ট্যাটাসের একটি দিয়ে পারমিশন ডায়ালগ লুকানোর সময় কার্যকর হয়:
  // 1. default - ডায়ালগ বন্ধ করা হয়েছে
  // 2. granted - অনুমতি দেওয়া হয়েছে
  // 3. denied - অনুমতি প্রত্যাখ্যান করা হয়েছে
  Pushwoosh.addEventHandler('hide-notification-permission-dialog', (payload) => {
    console.log('Triggered event: hide-notification-permission-dialog', payload.permission);
  });
}]);
```

#### পারমিশন ইভেন্ট

SDK ইনিশিয়ালাইজেশনের সময় পুশ নোটিফিকেশন পারমিশনের স্ট্যাটাস পরীক্ষা করুন; যখনই এই স্ট্যাটাসের আপডেট হয় তা ট্র্যাক করুন।

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // SDK ইনিশিয়ালাইজেশনের সময় কার্যকর হয় যদি 'autoSubscribe: false' হয় বা/এবং যদি একজন ব্যবহারকারী পুশ নোটিফিকেশন প্রম্পট উপেক্ষা করে।
  Pushwoosh.addEventHandler('permission-default', (payload) => {
    console.log('Triggered event: permission-default');
  });

  // SDK ইনিশিয়ালাইজেশনের সময় কার্যকর হয় যদি নোটিফিকেশন ব্লক করা থাকে বা একবার একজন ব্যবহারকারী পুশ নোটিফিকেশন ব্লক করে।
  Pushwoosh.addEventHandler('permission-denied', (payload) => {
    console.log('Triggered event: permission-denied');
  });

  // SDK ইনিশিয়ালাইজেশনের সময় কার্যকর হয় যদি নোটিফিকেশন অনুমোদিত থাকে বা একবার একজন ব্যবহারকারী পুশ নোটিফিকেশন অনুমোদন করে।
  Pushwoosh.addEventHandler('permission-granted', (payload) => {
    console.log('Triggered event: permission-granted');
  });
}]);
```

#### পুশ গ্রহণ ইভেন্ট

একটি ডিভাইসে পুশ ডেলিভারি ট্র্যাক করুন।

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // যখন একটি পুশ নোটিফিকেশন প্রদর্শিত হয় তখন কার্যকর হয়।
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('Triggered event: receive-push', payload.notification);
  });
}]);
```

#### নোটিফিকেশন ইভেন্ট

একজন ব্যবহারকারী দ্বারা একটি পুশ নোটিফিকেশন খোলা বা বন্ধ করা হয়েছে কিনা তা ট্র্যাক করুন।

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // যখন একজন ব্যবহারকারী নোটিফিকেশনে ক্লিক করে তখন কার্যকর হয়।
  Pushwoosh.addEventHandler('open-notification', (payload) => {
    console.log('Triggered event: open-notification', payload.notification);
  });

  // যখন একজন ব্যবহারকারী একটি পুশ নোটিফিকেশন বন্ধ করে তখন কার্যকর হয়।
  Pushwoosh.addEventHandler('hide-notification', (payload) => {
    console.log('Triggered event: hide-notification', payload.notification);
  });
}]);
```

#### ইনবক্স ইভেন্ট

ইনবক্সে পাঠানো নোটিফিকেশন ট্র্যাক করুন।

```javascript
Pushwoosh.push(['onLoad', (api) => {
  // ইনবক্স মেসেজ পাওয়ার এবং indexedDB-তে সেভ করার পরে সার্ভিস ওয়ার্কার দ্বারা কার্যকর হয়।
  Pushwoosh.addEventHandler('receive-inbox-message', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.message);
  });

  // পৃষ্ঠা লোড হওয়ার সময় ইনবক্স স্বয়ংক্রিয়ভাবে আপডেট হওয়ার পরে কার্যকর হয়।
  Pushwoosh.addEventHandler('update-inbox-messages', (payload) => {
    console.log('Triggered event: receive-inbox-message', payload.messages);
  });
}]);
```

#### কাস্টম সাবস্ক্রিপশন পপআপ ইভেন্ট

কাস্টম সাবস্ক্রিপশন পপআপ ইভেন্ট হ্যান্ডলিং সম্পর্কে বিস্তারিত জানতে, অনুগ্রহ করে [কাস্টম সাবস্ক্রিপশন পপআপ ইভেন্টস গাইড](/bn/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/#custom-subscription-popup-events) দেখুন।

## API

ওয়েব পুশ SDK ইনিশিয়ালাইজ হওয়ার পরে, আপনি Pushwoosh API-তে নিম্নলিখিত কলগুলো করতে পারেন। সমস্ত মেথড [**Promise**](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) অবজেক্ট রিটার্ন করে।

```javascript
Pushwoosh.push((api) => {
  // একজন ব্যবহারকারীর জন্য ট্যাগ সেট করুন
  api.setTags({
    'Tag Name 1': 'value1',
    'Tag Name 2': 'value2'
  });

  // সার্ভার থেকে একজন ব্যবহারকারীর জন্য ট্যাগ পান
  api.getTags();

  // ইউজার আইডি নিবন্ধন করুন
  api.registerUser('user123');

    // ইউজার ইমেল নিবন্ধন করুন
  api.registerEmail('user@example.com');

  // SMS নম্বর নিবন্ধন করুন
  api.registerSmsNumber('+15551234567');

  // WhatsApp নম্বর নিবন্ধন করুন
  api.registerWhatsappNumber('+1234567890');

  // একটি ইভেন্ট পোস্ট করুন
  api.postEvent('myEventName', {attributeName: 'attributeValue'});

  //নোটিফিকেশন থেকে আনরেজিস্টার করুন
  api.unregisterDevice();

  // ডিভাইসের ভাষা সেট করুন ("Language" ট্যাগের মান ওভাররাইড করে)
  api.setLanguage('es');

  // বিকল্পভাবে ডিভাইস এবং চ্যানেল সহ ব্যবহারকারীকে মাল্টি-রেজিস্টার করুন
  api.multiRegisterDevice({
    user_id: 'user123',
    email: 'user@example.com',
    sms_phone_number: '+1234567890',
    tags: {
      'UserType': { operation: TTagOperationSet, value: 'Premium' },
      'Interests': { operation: TTagOperationAppend, values: ['sports', 'technology'] }
    }
  });
});
```

### multiRegisterDevice

উন্নত রেজিস্ট্রেশন পদ্ধতি যা একটি একক API কলে একাধিক ডিভাইস এবং মেসেজিং চ্যানেল সহ একটি ব্যবহারকারী প্রোফাইল নিবন্ধন করার অনুমতি দেয়। এই পদ্ধতিটি বিশেষ করে ক্রস-প্ল্যাটফর্ম অ্যাপ্লিকেশন বা যখন ওমনিচ্যানেল মেসেজিং কৌশল বাস্তবায়ন করা হয় তখন কার্যকর।

```javascript
Pushwoosh.push((api) => {
  api.multiRegisterDevice({
    user_id: 'user123',              // ঐচ্ছিক: ব্যবহারকারী শনাক্তকারী
    email: 'user@example.com',       // ঐচ্ছিক: ইমেল মেসেজিংয়ের জন্য ইমেল
    sms_phone_number: '+1234567890', // ঐচ্ছিক: SMS ফোন নম্বর (E.164 ফরম্যাট)
    whatsapp_phone_number: '+1234567890', // ঐচ্ছিক: WhatsApp নম্বর (E.164 ফরম্যাট)
    kakao_phone_number: '+1234567890',    // ঐচ্ছিক: KakaoTalk নম্বর (E.164 ফরম্যাট)
    language: 'en',                  // ঐচ্ছিক: ভাষা কোড (ISO 639-1)
    timezone: 'America/New_York',    // ঐচ্ছিক: টাইমজোন শনাক্তকারী
    city: 'New York',               // ঐচ্ছিক: টার্গেটিংয়ের জন্য শহর
    country: 'US',                  // ঐচ্ছিক: টার্গেটিংয়ের জন্য দেশ
    state: 'NY',                    // ঐচ্ছিক: টার্গেটিংয়ের জন্য রাজ্য
    tags: {                         // ঐচ্ছিক: অপারেশন সহ ট্যাগ মান
      'UserType': {
        operation: TTagOperationSet,     // ট্যাগ মান সেট করুন (0)
        value: 'Premium'
      },
      'Interests': {
        operation: TTagOperationAppend,  // ট্যাগ মানে যোগ করুন (1)
        values: ['sports', 'technology']
      },
      'LoginCount': {
        operation: TTagOperationIncrement, // ট্যাগ মান বৃদ্ধি করুন (3)
        value: '1'
      }
    },
    push_devices: [                 // ঐচ্ছিক: পুশ ডিভাইসের অ্যারে
      {
        hwid: 'web-device-456',
        platform: TPlatformChrome, // Chrome প্ল্যাটফর্ম (11)
        push_token: 'fcm-token-here',
        app_version: '2.1.0',
        platformData: {
          public_key: 'web-push-public-key',
          auth_token: 'web-push-auth-token',
          browser: 'chrome'
        }
      }
    ]
  })
  .then((response) => {
    console.log('Multi-registration successful:', response);
  })
  .catch((error) => {
    console.error('Multi-registration failed:', error);
  });
});
```

**প্ল্যাটফর্মের ধরন:**
- `TPlatformSafari` (10): Safari প্ল্যাটফর্ম
- `TPlatformChrome` (11): Chrome প্ল্যাটফর্ম
- `TPlatformFirefox` (12): Firefox প্ল্যাটফর্ম

**ট্যাগ অপারেশনের ধরন:**
- `TTagOperationSet` (0): ট্যাগ মান সেট করুন (বিদ্যমান মান প্রতিস্থাপন করুন)
- `TTagOperationAppend` (1): ট্যাগ মানে যোগ করুন (তালিকায় যোগ করুন)
- `TTagOperationRemove` (2): ট্যাগ মান সরান (তালিকা থেকে সরান)
- `TTagOperationIncrement` (3): ট্যাগ মান বৃদ্ধি করুন (সাংখ্যিক বৃদ্ধি)

**সুবিধাসমূহ:**
- **একক API কল**: একবারে একাধিক ডিভাইস এবং চ্যানেল নিবন্ধন করুন
- **অ্যাটমিক অপারেশন**: সমস্ত রেজিস্ট্রেশন একসাথে সফল বা ব্যর্থ হয়
- **ব্যবহারকারী-কেন্দ্রিক**: সমস্ত ডিভাইস একটি একক ব্যবহারকারী প্রোফাইলের সাথে যুক্ত করে
- **উন্নত ট্যাগিং**: জটিল ট্যাগ অপারেশন সমর্থন করে
- **ক্রস-প্ল্যাটফর্ম**: একই সাথে একাধিক প্ল্যাটফর্ম পরিচালনা করুন

Pushwoosh-এ ট্যাগ পাঠানোর উদাহরণ:

```javascript
Pushwoosh.push((api) => {
  var myCustomTags = {
    'Tag 1': 123,
    'Tag 2': 'some string'
  };
  api.setTags(myCustomTags)
    .then((res) => {
      var skipped = res && res.skipped || [];
      if (!skipped.length) {
        console.log('success');
      }
      else {
        console.warn('skipped tags:', skipped);
      }
    })
    .catch((err) => {
      console.error('setTags error:', err);
    });
});
```

### ট্যাগ মান বৃদ্ধি করুন

একটি নাম্বার ট্যাগের মান **বৃদ্ধি করতে**, `operation` প্যারামিটারটি ‘increment’ মান সহ নিম্নরূপ ব্যবহার করুন:

```javascript
Pushwoosh.push((api) => {
  api.setTags({
    'Tag 1': {
      operation: 'increment',
      value: 1
    }
  })
});
```

### ট্যাগ মান যোগ করুন

বিদ্যমান লিস্ট ট্যাগে **নতুন মান যোগ করতে**, `operation` প্যারামিটারটি ‘append’ মান সহ নিম্নরূপ ব্যবহার করুন:

```javascript
Pushwoosh.push((api) => {
  api.setTags({
    'Tag 3': {
      operation: 'append',
      value: ['Value3']
    }
  })
});
```

### ট্যাগ মান সরান

একটি লিস্ট ট্যাগ থেকে একটি **মান সরাতে**, `operation` প্যারামিটারটি ‘remove’ মান সহ নিম্নরূপ ব্যবহার করুন:

```javascript
Pushwoosh.push((api) =>{
  api.setTags({
    'Tag 3': {
      operation: 'remove',
      value: ['Value2']
    }
  })
});
```

## পাবলিক মেথড

<Aside type="caution">
অনুগ্রহ করে মনে রাখবেন যে **Safari ব্যবহারকারীদের জন্য অটো সাবস্ক্রিপশন উপলব্ধ নয়**। অনুগ্রহ করে `Pushwoosh.subscribe()` মেথড কল করে Safari ব্যবহারকারীদের পুশ নোটিফিকেশনে সাবস্ক্রাইব করার কথা বিবেচনা করুন।
</Aside>

**Pushwoosh.subscribe()**

এই মেথডটি ব্যবহারকারীর পুশ নোটিফিকেশনের জন্য অনুমতি চাইতে ব্যবহৃত হয়। যদি একজন ব্যবহারকারী ইতিমধ্যে সাবস্ক্রাইব করা থাকে, তাহলে মেথডটি কার্যকর হওয়া বন্ধ করে দেবে।

যদি একজন ব্যবহারকারী এখনও পুশের জন্য সাবস্ক্রাইব না করে থাকে:

১. পুশ নোটিফিকেশনের জন্য অনুমতি চাওয়া হয়।

<img src="/web-push-notifications-web-push-sdk-3.0-1.webp" alt=""/>

২. যদি একজন ব্যবহারকারী নোটিফিকেশন অনুমোদন করে, তাহলে `onSubscribe` ইভেন্টটি ট্রিগার হয়।

SDK ইনিশিয়ালাইজেশনের সময় `autoSubscribe: true` সেট করা থাকলে `Pushwoosh.subscribe()` স্বয়ংক্রিয়ভাবে কার্যকর হয়।

ইনিশিয়ালাইজেশনের সময় `autoSubscribe: false` প্যারামিটার ব্যবহার করে ব্যবহারকারীকে পুশের জন্য সাবস্ক্রাইব করতে ম্যানুয়ালি প্রম্পট করার সিদ্ধান্ত নিলে এই মেথডটি কল করুন:

```html
<button onclick="Pushwoosh.subscribe()">Subscribe</button>
<script>
  Pushwoosh.push(['onSubscribe', (api) => {
    console.log('User successfully subscribed');
  }]);
</script>
```

**Pushwoosh.unsubscribe()**

১. `/unregisterDevice` মেথডটি কার্যকর হয়।
২. `onUnsubscribe` ইভেন্টটি ট্রিগার হয়।

```html
<button onclick="Pushwoosh.unsubscribe()">Unsubscribe</button>
<script type="text/javascript">
  Pushwoosh.push(['onUnsubscribe', (api) => {
    console.log('User successfully unsubscribed');
  }]);
</script>
```

**Pushwoosh.isSubscribed()**

একজন ব্যবহারকারী সাবস্ক্রাইব করা আছে কিনা তা পরীক্ষা করে এবং true/false ফ্ল্যাগ রিটার্ন করে।

```javascript
Pushwoosh.isSubscribed().then((isSubscribed) => {
  console.log('isSubscribed', isSubscribed);
});
```

**Pushwoosh.getHWID()**

Pushwoosh HWID রিটার্ন করে।

```javascript
Pushwoosh.getHWID().then((hwid) => {
  console.log('hwid:', hwid);
});
```

**Pushwoosh.getPushToken()**

পুশ টোকেন উপলব্ধ থাকলে তা রিটার্ন করে।

```javascript
Pushwoosh.getPushToken().then((pushToken) => {
  console.log('pushToken:', pushToken);
});
```

**Pushwoosh.getUserId()**

উপলব্ধ থাকলে [**ইউজার আইডি**](/bn/developer/pushwoosh-knowledge-hub/users-userids/users-userids/) রিটার্ন করে।

```javascript
Pushwoosh.getUserId().then((userId) => {
  console.log('userId:', userId);
});
```

**Pushwoosh.getParams()**

নিম্নলিখিত প্যারামিটারগুলোর একটি তালিকা রিটার্ন করে:

```javascript
Pushwoosh.getParams().then((params) => {
  params = params || {};
  var hwid = params.hwid;
  var pushToken = params.pushToken;
  var userId = params.userId;
});
```

**Pushwoosh.isAvailableNotifications()**

একটি ব্রাউজার Pushwoosh WebSDK 3.0 সমর্থন করে কিনা তা পরীক্ষা করে, ‘true’ বা ‘false’ রিটার্ন করে।

```
Pushwoosh.isAvailableNotifications() // true/false
```

### InboxMessages মেথড

**messagesWithNoActionPerformedCount(): Promise\<number>**

খোলা মেসেজের সংখ্যা রিটার্ন করে।

```javascript
Pushwoosh.pwinbox.messagesWithNoActionPerformedCount()
  .then((count) => {
    console.log(`${count} messages opened`);
  });
```

**unreadMessagesCount()**

অপঠিত মেসেজের সংখ্যা রিটার্ন করে।

```javascript
Pushwoosh.pwinbox.unreadMessagesCount()
  .then((count) => {
    console.log(`${count} messages unread`);
  });
```

**messagesCount(): Promise\<number>**

মোট মেসেজের সংখ্যা রিটার্ন করে।

```javascript
Pushwoosh.pwinbox.messagesCount()
  .then((count) => {
    console.log(`${count} messages`);
  });
```

**loadMessages(): Promise\<Array>**

ডিলিট না করা মেসেজের তালিকা লোড করে।

```javascript
Pushwoosh.pwinbox.loadMessages()
  .then(() => {
    console.log('Messages have been loaded');
  });
```

**readMessagesWithCodes(codes: Array\<string>): Promise\<void>**

Inbox_Ids দ্বারা মেসেজগুলোকে পঠিত হিসাবে চিহ্নিত করে।

```javascript
Pushwoosh.pwinbox.readMessagesWithCodes(codes)
  .then(() => {
    console.log('Messages have been read');
  });
```

**performActionForMessageWithCode(code: string): Promise\<void>**

একটি মেসেজে নির্ধারিত অ্যাকশনটি সম্পাদন করে এবং মেসেজটিকে পঠিত হিসাবে চিহ্নিত করে।

```javascript
Pushwoosh.pwinbox.performActionForMessageWithCode(code)
  .then(() => {
    console.log('Action has been performed');
  });
```

**deleteMessagesWithCodes(codes: Array\<string>): Promise\<void>**

মেসেজগুলোকে ডিলিট করা হিসাবে চিহ্নিত করে।

```javascript
Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
  .then(() => {
    console.log('Messages have been deleted');
  });
```

**syncMessages(): Promise\<void>**

সার্ভারের সাথে মেসেজ সিঙ্ক্রোনাইজ করে।

```javascript
Pushwoosh.pwinbox.syncMessages()
  .then(() => {
    console.log('Messages have been synchronized');
  });
```

## প্রগ্রেসিভ ওয়েব অ্যাপ সমর্থন

আপনার প্রগ্রেসিভ ওয়েব অ্যাপ্লিকেশনে (PWA) Pushwoosh ইন্টিগ্রেট করতে, নিচে বর্ণিত ধাপগুলো অনুসরণ করুন।

**১**. আপনার সার্ভিস ওয়ার্কার ফাইলের পাথ কপি করুন:

```javascript
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') // <- আপনার সার্ভিস ওয়ার্কার url
  });
}
```

তারপর, WebSDK ইনিশিয়ালাইজ করার সময় `serviceWorkerUrl` প্যারামিটারটি নিম্নরূপ ব্যবহার করুন:

```javascript
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
  logLevel: 'error',
  applicationCode: 'XXXXX-XXXXX',
  safariWebsitePushID: 'web.com.example.domain',
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // <- আপনার সার্ভিস ওয়ার্কার url
}]);
```

WebSDK নতুন সার্ভিস ওয়ার্কারটি অবিলম্বে নিবন্ধন করে না; একটি সার্ভিস ওয়ার্কার যখন প্রয়োজন হয় তখন নিবন্ধিত হয়:

* যখন একটি ডিভাইস একটি পুশ টোকেন পায় (ডিভাইস রেজিস্ট্রেশন বা পুনরায় সাবস্ক্রিপশনের সময়),
* যখন একটি পুশ টোকেন ডিলিট করা হয় (ব্যবহারকারী বেস থেকে একটি ডিভাইস সরানোর সময়)।

এটি সার্ভার অনুরোধের সংখ্যা কমিয়ে আপনার পৃষ্ঠা লোডিং গতি বাড়ায়।

ব্রাউজারগুলো একই সময়ে দুটি ভিন্ন সার্ভিস ওয়ার্কার নিবন্ধিত করার অনুমতি দেয় না (আরও পড়ুন: [https://github.com/w3c/ServiceWorker/issues/921](https://github.com/w3c/ServiceWorker/issues/921)), তাই আপনার PWA সঠিকভাবে কাজ করার জন্য, আপনার কোডবেস এবং Pushwoosh কোডবেসের জন্য একটি সাধারণ সার্ভিস ওয়ার্কার নিবন্ধিত করা উচিত।

**২**. আপনার সার্ভিস ওয়ার্কারে নিম্নলিখিত স্ট্রিংটি যোগ করুন (শুরুতে বা শেষে, এটা কোন ব্যাপার না):

```javascript
importScripts('https://cdn.pushwoosh.com/webpush/v3/pushwoosh-service-worker.js' + self.location.search);
```

এইভাবে আপনি আপনার সার্ভিস ওয়ার্কারের জন্য Pushwoosh পরিষেবাগুলোর মাধ্যমে পাঠানো পুশ নোটিফিকেশন গ্রহণ এবং প্রক্রিয়াকরণ সক্ষম করেন।

<Aside type="note">
Pushwoosh আপনার কোডবেসকে প্রভাবিত করবে না। আপনি সর্বদা আমাদের সার্ভিস ওয়ার্কারটি [https://github.com/Pushwoosh/web-push-notifications](https://github.com/Pushwoosh/web-push-notifications)-এ দেখতে পারেন।
</Aside>

## Google Tag Manager থেকে ইনস্টল করা

<Aside type="note">
Google Manager Tag-এ স্ক্রিপ্ট যোগ করার আগে এই গাইডের [১ থেকে ৪ ধাপ](#integration) অনুসরণ করতে ভুলবেন না!
</Aside>

Pushwoosh SDK ইনিশিয়ালাইজ করতে আপনার **Google Tag Manager**-এ নিম্নলিখিত কোডটি ব্যবহার করুন। একটি কাস্টম HTML ট্যাগ তৈরি করুন এবং নিচের কোডটি পেস্ট করুন। আপনার Pushwoosh অ্যাপ্লিকেশন কোড, Safari ওয়েবসাইট আইডি, এবং ডিফল্ট নোটিফিকেশন ইমেজ URL পরিবর্তন করতে ভুলবেন না।\
এছাড়াও উচ্চ **ট্যাগ ফায়ারিং** অগ্রাধিকার সেট করুন (যেমন: ১০০) এবং এটি **সমস্ত পৃষ্ঠা**-তে ট্রিগার করুন। একটি স্ক্রিনশটের জন্য নিচে দেখুন।কপি

```html
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script type="text/javascript">
  var Pushwoosh = Pushwoosh || [];
  Pushwoosh.push(['init', {
    logLevel: 'error',
    applicationCode: 'XXXXX-XXXXX',
    safariWebsitePushID: 'web.com.example.domain',
    defaultNotificationTitle: 'Pushwoosh',
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
    autoSubscribe: true,
    subscribeWidget: {
      enable: false
    },
    userId: 'user_id'
  }]);
</script>
```

<img src="/web-push-notifications-web-push-sdk-3.0-2.webp" alt=""/>