পুশ বিজ্ঞপ্তির জন্য কোনও ব্যবহারকারীকে সাবস্ক্রাইব করা

Matt Gaunt

পুশ মেসেজ পাঠাতে, আপনাকে প্রথমে ব্যবহারকারীর থেকে অনুমতি নিতে হবে এবং তারপর তার ডিভাইসকে পুশ পরিষেবায় সাবস্ক্রাইব করতে হবে। এর মধ্যে PushSubscription অবজেক্ট পেতে জাভাস্ক্রিপ্ট API ব্যবহার করা অন্তর্ভুক্ত, যা আপনি পরে আপনার সার্ভারে পাঠান।

JavaScript API এই প্রসেসটি সরাসরি ম্যানেজ করে। এই নির্দেশিকা ফিচার শনাক্তকরণ, অনুমতির অনুরোধ করা এবং সাবস্ক্রিপশন প্রসেস ম্যানেজ করা সহ সম্পূর্ণ ফ্লো ব্যাখ্যা করে।

ফিচার শনাক্তকরণ

প্রথমে, ব্রাউজারে পুশ মেসেজিং কাজ করে কিনা তা চেক করুন। আপনি দুটি চেক করে পুশ সাপোর্ট চেক করতে পারেন:

• navigator অবজেক্টে serviceWorker চেক করুন।
• window অবজেক্টে PushManager চেক করুন।

if (!('serviceWorker' in navigator)) {
  // Service Worker isn't supported on this browser, disable or hide UI.
  return;
}

if (!('PushManager' in window)) {
  // Push isn't supported on this browser, disable or hide UI.
  return;
}

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

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

ফিচার শনাক্তকরণের পরে, আপনি জানতে পারবেন যে সার্ভিস ওয়ার্কার ও পুশ মেসেজিং কাজ করে। এরপর, আপনার সার্ভিস ওয়ার্কার রেজিস্টার করুন।

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

সার্ভিস ওয়ার্কার রেজিস্টার করতে, navigator.serviceWorker.register() কল করুন এবং আপনার ফাইলের পাথ পাস করুন। যেমন:

function registerServiceWorker() {
  return navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      console.log('Service worker successfully registered.');
      return registration;
    })
    .catch(function (err) {
      console.error('Unable to register service worker.', err);
    });
}

এই ফাংশন ব্রাউজারকে আপনার সার্ভিস ওয়ার্কার ফাইলের লোকেশন জানায়। এখানে, সার্ভিস ওয়ার্কার ফাইল /service-worker.js-এ আছে। আপনি register() কল করার পরে, ব্রাউজার এইসব ধাপ পারফর্ম করে:

1. সার্ভিস ওয়ার্কার ফাইল ডাউনলোড করুন।

2. জাভাস্ক্রিপ্ট রান করুন।

3. ফাইলটি কোনও সমস্যা ছাড়াই সঠিকভাবে রান করলে, register()-এর মাধ্যমে রিটার্ন করা প্রমিস রিজলভ হয়ে যায়। সমস্যা হলে, প্রমিস বাতিল হয়ে যায়।

মনে রাখবেন: register() বাতিল করলে, Chrome DevTools-এ আপনার জাভাস্ক্রিপ্টে টাইপো বা ভুল আছে কিনা তা চেক করুন।

register() সমাধান করলে, এটি ServiceWorkerRegistration রিটার্ন করে। PushManager API অ্যাক্সেস করতে আপনি এই রেজিস্ট্রেশন ব্যবহার করেন।

PushManager API ব্রাউজার কম্প্যাটিবিলিটি

Browser Support

• 42
• 17
• 44
• 16

Source

অনুমতির জন্য অনুরোধ করা হচ্ছে

আপনার সার্ভিস ওয়ার্কার রেজিস্টার করা এবং অনুমতি পাওয়ার পরে, পুশ মেসেজ পাঠানোর জন্য ব্যবহারকারীর থেকে অনুমতি নিন।

অনুমতি পাওয়ার API সহজ। তবে, API সম্প্রতি কলব্যাক নেওয়া থেকে প্রমিস রিটার্ন করার পদ্ধতিতে পরিবর্তন করা হয়েছে। ব্রাউজার কোন API ভার্সন প্রয়োগ করে তা আপনি নির্ধারণ করতে পারবেন না বলে, আপনাকে দুটি ভার্সনই প্রয়োগ ও ম্যানেজ করতে হবে।

function askPermission() {
  return new Promise(function (resolve, reject) {
    const permissionResult = Notification.requestPermission(function (result) {
      resolve(result);
    });

    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  }).then(function (permissionResult) {
    if (permissionResult !== 'granted') {
      throw new Error("We weren't granted permission.");
    }
  });
}

আগের কোডে, Notification.requestPermission()-এ কল ব্যবহারকারীকে একটি প্রম্পট দেখায়:

ব্যবহারকারী অনুমতি দিন, ব্লক করুন বিকল্প বেছে নিয়ে অথবা বন্ধ করে দিয়ে অনুমতি প্রম্পটের সাথে ইন্টার‍্যাক্ট করার পরে, আপনি স্ট্রিং হিসেবে ফলাফল পাবেন: 'granted', 'default' অথবা 'denied'।

স্যাম্পেল কোডে, অনুমতি দেওয়া হলে askPermission()-এর মাধ্যমে রিটার্ন করা প্রমিস রিজলভ হয়; অন্যথায়, এটি একটি সমস্যা দেখায় এবং প্রমিস বাতিল করে দেয়।

ব্যবহারকারী ব্লক করুন বোতামে ক্লিক করলে, এজ কেস ম্যানেজ করুন। এটি ঘটলে, আপনার ওয়েব অ্যাপ ব্যবহারকারীর কাছে আবার অনুমতি চাইতে পারবে না। ব্যবহারকারীকে সেটিংস প্যানেলে গিয়ে আপনার অ্যাপের অনুমতির স্ট্যাটাস পরিবর্তন করে ম্যানুয়ালি অ্যাপটি আনব্লক করতে হবে। কখন এবং কীভাবে অনুমতি চাইবেন তা সাবধানে বিবেচনা করুন, কারণ কোনও ব্যবহারকারী ব্লক করুন বিকল্পে ক্লিক করলে, সেই সিদ্ধান্ত পরিবর্তন করা সহজ নয়।

অ্যাপ কেন অনুমতি চাইছে তা বুঝতে পারলে বেশিরভাগ ব্যবহারকারী অনুমতি দেন।

এই ডকুমেন্টে আলোচনা করা হয়েছে যে কীভাবে কিছু জনপ্রিয় সাইট এই ডকুমেন্টের পরে অনুমতি চায়।

PushManager-এর মাধ্যমে কোনও ব্যবহারকারীকে সাবস্ক্রাইব করা

আপনার সার্ভিস ওয়ার্কার রেজিস্টার করা এবং অনুমতি পাওয়ার পরে, আপনি registration.pushManager.subscribe()-এ কল করে কোনও ব্যবহারকারীকে সাবস্ক্রাইব করতে পারবেন।

function subscribeUserToPush() {
  return navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      const subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(
          'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
        ),
      };

      return registration.pushManager.subscribe(subscribeOptions);
    })
    .then(function (pushSubscription) {
      console.log(
        'Received PushSubscription: ',
        JSON.stringify(pushSubscription),
      );
      return pushSubscription;
    });
}

আপনি subscribe() মেথড কল করলে, আপনি একটি options অবজেক্ট পাস করেন যাতে প্রয়োজনীয় ও ঐচ্ছিক প্যারামিটার থাকে।

এই বিভাগে আপনি যেসব বিকল্প পাস করতে পারবেন সেগুলি বর্ণনা করা হয়েছে।

userVisibleOnly বিকল্প

ব্রাউজারে যখন প্রথম পুশ মেসেজিং যোগ করা হয়েছিল, তখন ডেভেলপাররা বিজ্ঞপ্তি না দেখিয়ে পুশ মেসেজ পাঠানোর ব্যাপারে নিশ্চিত ছিলেন না। এটিকে সাধারণত সাইলেন্ট পুশ বলা হয়, কারণ ব্যাকগ্রাউন্ডে কোনও ইভেন্ট ঘটেছে কিনা তা ব্যবহারকারী জানতে পারেন না।

চিন্তার বিষয় হল, ব্যবহারকারীর অজান্তেই ডেভেলপাররা তার লোকেশন ক্রমাগত ট্র্যাক করতে পারেন।

এই পরিস্থিতি এড়াতে এবং স্পেক লেখকদের এই ফিচারটি কীভাবে সবচেয়ে ভালোভাবে সাপোর্ট করা যায় তা বিবেচনা করার অনুমতি দিতে, userVisibleOnly বিকল্পটি যোগ করা হয়েছে। true ভ্যালু পাস করার অর্থ হল ব্রাউজারের সাথে একটি প্রতীকী চুক্তি করা যে ওয়েব অ্যাপটি প্রতিবার পুশ মেসেজ (অর্থাৎ, সাইলেন্ট পুশ নয়) পাওয়ার সময় একটি বিজ্ঞপ্তি দেখাবে।

আপনাকে true-এর ভ্যালু অবশ্যই পাস করতে হবে। আপনি userVisibleOnly কী বা পাস false অন্তর্ভুক্ত না করলে, নিম্নলিখিত সমস্যার মেসেজ পাবেন:

Chrome currently only supports the Push API for subscriptions that will result
in user-visible messages. You can indicate this by calling
`pushManager.subscribe({userVisibleOnly: true})` instead. See
[https://goo.gl/yqv4Q4](https://goo.gl/yqv4Q4) for more details.

Chrome শুধুমাত্র সেইসব সাবস্ক্রিপশনের জন্য Push API সমর্থন করে যার ফলে ব্যবহারকারী-দৃশ্যমান মেসেজ পাওয়া যায়। pushManager.subscribe({userVisibleOnly: true})-এ কল করে এটি জানান। আরও তথ্যের জন্য, https://goo.gl/yqv4Q4 দেখুন।

মনে হচ্ছে, Chrome-এ ব্ল্যাঙ্কেট সাইলেন্ট পুশ প্রয়োগ করা হবে না। পরিবর্তে, স্পেক লেখকরা একটি বাজেট API এক্সপ্লোর করছেন যা ওয়েব অ্যাপগুলিকে ওয়েব অ্যাপ ব্যবহারের উপর ভিত্তি করে নির্দিষ্ট সংখ্যক সাইলেন্ট পুশ মেসেজ পাঠাতে দেয়।

applicationServerKey বিকল্প

এই ডকুমেন্টে আগে অ্যাপ্লিকেশন সার্ভার কী উল্লেখ করা ছিল। কোনও ব্যবহারকারীকে সাবস্ক্রাইব করা অ্যাপ্লিকেশন শনাক্ত করতে এবং একই অ্যাপ্লিকেশন যাতে সেই ব্যবহারকারীকে মেসেজ পাঠায় তা নিশ্চিত করতে, পুশ পরিষেবা অ্যাপ্লিকেশন সার্ভার কী ব্যবহার করে।

অ্যাপ্লিকেশন সার্ভার কী হল সর্বজনীন ও ব্যক্তিগত কী পেয়ার যা আপনার অ্যাপ্লিকেশনের জন্য অনন্য। আপনার অ্যাপ্লিকেশনের জন্য ব্যক্তিগত কী গোপন রাখুন এবং সর্বজনীন কী অবাধে শেয়ার করুন।

subscribe() কলে পাস করা applicationServerKey বিকল্পটি হল আপনার অ্যাপ্লিকেশনের পাবলিক কী। ব্যবহারকারী সাবস্ক্রাইব করার সময় ব্রাউজার এই কী পুশ পরিষেবায় পাস করে, যা পুশ পরিষেবাকে আপনার অ্যাপ্লিকেশনের সর্বজনীন কী ব্যবহারকারীর PushSubscription-এর সাথে যুক্ত করতে দেয়।

নিচের ডায়াগ্রাম থেকে এই ধাপগুলি সম্পর্কে জানতে পারবেন।

1. ব্রাউজারে আপনার ওয়েব অ্যাপ লোড করুন এবং আপনার পাবলিক অ্যাপ্লিকেশন সার্ভার কী পাস করে subscribe() কল করুন।
2. ব্রাউজার তখন পুশ পরিষেবার জন্য নেটওয়ার্ক রিকোয়েস্ট করে, যা একটি এন্ডপয়েন্ট তৈরি করে, এই এন্ডপয়েন্টকে আপনার অ্যাপ্লিকেশনের সর্বজনীন কী-এর সাথে যুক্ত করে এবং এন্ডপয়েন্টটি ব্রাউজারে ফেরত পাঠায়।
3. ব্রাউজার এই এন্ডপয়েন্টকে PushSubscription-এ যোগ করে, যা subscribe() প্রমিস রিটার্ন করে।

আপনি পুশ মেসেজ পাঠানোর সময়, একটি অনুমোদন হেডার তৈরি করুন যাতে আপনার অ্যাপ্লিকেশন সার্ভারের ব্যক্তিগত কী দিয়ে সাইন করা তথ্য থাকে। পুশ মেসেজ পাঠানোর জন্য পুশ পরিষেবা কোনও অনুরোধ পেলে, অনুরোধ পাওয়া এন্ডপয়েন্টের সাথে লিঙ্ক করা সর্বজনীন কী খুঁজে দেখার মাধ্যমে এটি এই স্বাক্ষরিত Authorization হেডার যাচাই করে। স্বাক্ষরটি সঠিক হলে, পুশ পরিষেবা বুঝতে পারে যে অনুরোধটি ম্যাচ করা ব্যক্তিগত কী সহ অ্যাপ্লিকেশন সার্ভার থেকে এসেছে। এটি একটি নিরাপত্তা ব্যবস্থা যা অন্যদের আপনার অ্যাপ্লিকেশনের ব্যবহারকারীদের মেসেজ পাঠাতে বাধা দেয়।

টেকনিক্যালি, applicationServerKey ঐচ্ছিক। তবে, Chrome-এ সবচেয়ে সহজ ইমপ্লিমেন্টেশনের জন্য এটি প্রয়োজন এবং ভবিষ্যতে অন্যান্য ব্রাউজারের ক্ষেত্রেও এটি প্রয়োজন হতে পারে। Firefox-এ এটি ঐচ্ছিক।

VAPID স্পেসিফিকেশন অ্যাপ্লিকেশন সার্ভার কী নির্ধারণ করে। আপনি যখন অ্যাপ্লিকেশন সার্ভার কী বা VAPID কী-এর উল্লেখ দেখতে পান, তখন মনে রাখবেন যে সেগুলি একই।

অ্যাপ্লিকেশন সার্ভার কী তৈরি করুন

আপনি ওয়েব-পুশ কমান্ড লাইন ব্যবহার করে অ্যাপ্লিকেশন সার্ভার 'কী'-এর পাবলিক ও প্রাইভেট সেট তৈরি করতে পারবেন, যাতে নিম্নলিখিত উপায়ে 'কী' জেনারেট করা যায়:

    $ npm install -g web-push
    $ web-push generate-vapid-keys

আপনার অ্যাপ্লিকেশনের জন্য এই কীগুলি একবারই তৈরি করুন এবং ব্যক্তিগত কীটি ব্যক্তিগত রাখতে ভুলবেন না।

অনুমতি এবং subscribe()

subscribe()-কে কল করার একটি পার্শ্ব প্রতিক্রিয়া আছে। আপনি subscribe()-কে কল করার সময় আপনার ওয়েব অ্যাপের কাছে বিজ্ঞপ্তি দেখানোর অনুমতি না থাকলে, ব্রাউজার আপনার হয়ে অনুমতি চাইবে। আপনার UI এই ফ্লোয়ের সাথে কাজ করলে এটি উপযোগী হয়, তবে আপনি আরও কন্ট্রোল চাইলে (যা বেশিরভাগ ডেভেলপার চান), এই ডকুমেন্টে আগে আলোচনা করা Notification.requestPermission() API ব্যবহার করুন।

PushSubscription ওভারভিউ

আপনি subscribe() কল করেন, বিকল্প পাস করেন এবং একটি প্রমিস পান যা PushSubscription-এ সমাধান করে। যেমন:

function subscribeUserToPush() {
  return navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      const subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(
          'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
        ),
      };

      return registration.pushManager.subscribe(subscribeOptions);
    })
    .then(function (pushSubscription) {
      console.log(
        'Received PushSubscription: ',
        JSON.stringify(pushSubscription),
      );
      return pushSubscription;
    });
}

PushSubscription অবজেক্টে সেই ব্যবহারকারীকে পুশ মেসেজ পাঠানোর জন্য প্রয়োজনীয় সব তথ্য থাকে। আপনি JSON.stringify() ব্যবহার করে কন্টেন্ট প্রিন্ট করলে, নিম্নলিখিত তথ্য দেখতে পাবেন:

    {
      "endpoint": "https://some.pushservice.com/something-unique",
      "keys": {
        "p256dh":
    "BIPUL12DLfytvTajnryr2PRdAgXS3HGKiLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WAkAPIxr4gK0_dQds4yiI=",
        "auth":"FPssNDTKnInHVndSTdbKFw=="
      }
    }

endpoint হল পুশ পরিষেবার URL। পুশ মেসেজ ট্রিগার করতে, এই URL-এ POST অনুরোধ করুন।

keys অবজেক্টে পুশ মেসেজের সাথে পাঠানো মেসেজ ডেটা এনক্রিপ্ট করার জন্য ব্যবহৃত মান থাকে। (এই ডকুমেন্টে পরে মেসেজ এনক্রিপশন সম্পর্কে আলোচনা করা হয়েছে।)

আপনার সার্ভারে সাবস্ক্রিপশন পাঠান

আপনার কাছে পুশ সাবস্ক্রিপশন থাকলে, এটি আপনার সার্ভারে পাঠান। আপনি কীভাবে এটি পাঠাবেন তা নির্ধারণ করেন, তবে একটি পরামর্শ হল সাবস্ক্রিপশন অবজেক্ট থেকে সমস্ত প্রয়োজনীয় ডেটা বের করতে JSON.stringify() ব্যবহার করুন। অন্যথায়, আপনি ম্যানুয়ালি একই ফলাফল একত্রিত করতে পারেন, যেমন:

const subscriptionObject = {
  endpoint: pushSubscription.endpoint,
  keys: {
    p256dh: pushSubscription.getKeys('p256dh'),
    auth: pushSubscription.getKeys('auth'),
  },
};

// The above is the same output as:

const subscriptionObjectToo = JSON.stringify(pushSubscription);

ওয়েব পেজ থেকে সাবস্ক্রিপশন পাঠাতে, নিম্নলিখিত পদ্ধতি অনুসরণ করুন:

function sendSubscriptionToBackEnd(subscription) {
  return fetch('/api/save-subscription/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(subscription),
  })
    .then(function (response) {
      if (!response.ok) {
        throw new Error('Bad status code from server.');
      }

      return response.json();
    })
    .then(function (responseData) {
      if (!(responseData.data && responseData.data.success)) {
        throw new Error('Bad response from server.');
      }
    });
}

Node.js সার্ভার এই অনুরোধ গ্রহণ করে এবং পরে ব্যবহারের জন্য ডেটাবেসে ডেটা সেভ করে।

app.post('/api/save-subscription/', function (req, res) {
  if (!isValidSaveRequest(req, res)) {
    return;
  }

  return saveSubscriptionToDatabase(req.body)
    .then(function (subscriptionId) {
      res.setHeader('Content-Type', 'application/json');
      res.send(JSON.stringify({data: {success: true}}));
    })
    .catch(function (err) {
      res.status(500);
      res.setHeader('Content-Type', 'application/json');
      res.send(
        JSON.stringify({
          error: {
            id: 'unable-to-save-subscription',
            message:
              'The subscription was received but we were unable to save it to our database.',
          },
        }),
      );
    });
});

আপনার সার্ভারে PushSubscription-এর বিবরণ থাকলে, আপনি যেকোনও সময় আপনার ব্যবহারকারীকে মেসেজ পাঠাতে পারবেন।

মেয়াদ শেষ হওয়া আটকাতে নিয়মিত আবার সাবস্ক্রাইব করুন

পুশ বিজ্ঞপ্তির জন্য সাবস্ক্রাইব করার সময়, আপনি প্রায়ই null-এর PushSubscription.expirationTime পান। তত্ত্বগতভাবে, এর অর্থ হল সাবস্ক্রিপশনের মেয়াদ কখনও শেষ হয় না। (এর বিপরীতে, DOMHighResTimeStamp মেয়াদ শেষ হওয়ার সঠিক সময় নির্দেশ করে।) তবে, বাস্তবে ব্রাউজার সাধারণত সাবস্ক্রিপশনের মেয়াদ শেষ হতে দেয়। যেমন, অনেকক্ষণ ধরে কোনও পুশ বিজ্ঞপ্তি না পেলে অথবা ব্রাউজার যদি শনাক্ত করে যে ব্যবহারকারী এমন কোনও অ্যাপ ব্যবহার করছেন না যার পুশ বিজ্ঞপ্তি পাঠানোর অনুমতি আছে, তাহলে এটি হতে পারে। এটি আটকানোর একটি উপায় হল, প্রতিটি বিজ্ঞপ্তি পাওয়ার পরে ব্যবহারকারীকে আবার সাবস্ক্রাইব করা, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে। এর জন্য আপনাকে ঘন ঘন বিজ্ঞপ্তি পাঠাতে হবে যাতে ব্রাউজার অটোমেটিক সাবস্ক্রিপশন বন্ধ না করে দেয়। সাবস্ক্রিপশনের মেয়াদ শেষ হওয়া আটকানোর জন্য ব্যবহারকারীকে অনিচ্ছাকৃত স্প্যামিং করার পরিবর্তে বৈধ বিজ্ঞপ্তি পাঠানোর প্রয়োজনীয়তার সুবিধা ও অসুবিধাগুলি আপনার সাবধানে বিবেচনা করা উচিত। সর্বোপরি, অনেকদিন আগে সাবস্ক্রাইব করা বিজ্ঞপ্তি থেকে ব্যবহারকারীকে সুরক্ষিত রাখার জন্য ব্রাউজারের প্রচেষ্টাকে এড়িয়ে যাওয়ার চেষ্টা করবেন না।

/* In the Service Worker. */

self.addEventListener('push', function(event) {
  console.log('Received a push message', event);

  // Display notification or handle data
  // Example: show a notification
  const title = 'New Notification';
  const body = 'You have new updates!';
  const icon = '/images/icon.png';
  const tag = 'simple-push-demo-notification-tag';

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
    })
  );

  // Attempt to resubscribe after receiving a notification
  event.waitUntil(resubscribeToPush());
});

function resubscribeToPush() {
  return self.registration.pushManager.getSubscription()
    .then(function(subscription) {
      if (subscription) {
        return subscription.unsubscribe();
      }
    })
    .then(function() {
      return self.registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY_HERE')
      });
    })
    .then(function(subscription) {
      console.log('Resubscribed to push notifications:', subscription);
      // Optionally, send new subscription details to your server
    })
    .catch(function(error) {
      console.error('Failed to resubscribe:', error);
    });
}

প্রায়শই জিজ্ঞাসিত প্রশ্ন

এখানে কিছু সাধারণ প্রশ্ন দেওয়া হল:

ব্রাউজার যে পুশ পরিষেবা ব্যবহার করে তা কি আপনি পরিবর্তন করতে পারবেন?

না, ব্রাউজার পুশ পরিষেবা বেছে নেয়। এই ডকুমেন্টে subscribe() কলের সাথে আলোচনা করা হয়েছে, ব্রাউজার PushSubscription তৈরি করে এমন বিবরণ পেতে পুশ পরিষেবাতে নেটওয়ার্ক অনুরোধ করে।

বিভিন্ন পুশ পরিষেবা কি বিভিন্ন API ব্যবহার করে?

সব পুশ পরিষেবা একই API প্রত্যাশা করে।

এই সাধারণ API-কে ওয়েব পুশ প্রোটোকল বলা হয় এবং এটি পুশ মেসেজ ট্রিগার করার জন্য আপনার অ্যাপ্লিকেশন যে নেটওয়ার্ক রিকোয়েস্ট করে তা বর্ণনা করে।

আপনি যদি কোনও ব্যবহারকারীকে তার ডেস্কটপে সাবস্ক্রাইব করেন, তাহলে কি তিনি তার ফোনেও সাবস্ক্রাইব করেছেন?

না। ব্যবহারকারীকে প্রতিটি ব্রাউজারে পুশ মেসেজিংয়ের জন্য রেজিস্টার করতে হবে যেখানে তিনি মেসেজ পেতে চান। এছাড়াও, এর জন্য ব্যবহারকারীকে প্রতিটি ডিভাইসে অনুমতি দিতে হবে।

পরবর্তী ধাপ

• ওয়েব থেকে পাঠানো পুশ বিজ্ঞপ্তির ওভারভিউ
• পুশ মেসেজিং কীভাবে কাজ করে
• কোনও ব্যবহারকারীকে সাবস্ক্রাইব করা
• অনুমতি সংক্রান্ত ব্যবহারকারীর অভিজ্ঞতা
• ওয়েব পুশ লাইব্রেরির মাধ্যমে মেসেজ পাঠানো
• ওয়েব পুশ প্রোটোকল
• পুশ ইভেন্ট ম্যানেজ করা
• বিজ্ঞপ্তি দেখানো
• বিজ্ঞপ্তির আচরণ
• সাধারণ বিজ্ঞপ্তির প্যাটার্ন
• পুশ বিজ্ঞপ্তি সংক্রান্ত প্রায়শই জিজ্ঞাসিত প্রশ্ন
• সাধারণ সমস্যা এবং বাগ সম্পর্কে অভিযোগ করা

কোডল্যাবস

• পুশ বিজ্ঞপ্তি ক্লায়েন্ট তৈরি করা
• পুশ বিজ্ঞপ্তি সার্ভার তৈরি করা