ওয়েব পুশ ব্যবহার করুন

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

পুশ এপিআই ব্যবহার করার অনুমতি নিন।

যখন আপনি একটি সাধারণ ওয়েবসাইটে একটি পুশ সার্ভার রেজিস্টার করেন, তখন ব্যবহারকারীকে অনুমতি দেওয়ার বা না দেওয়ার জন্য একটি প্রম্পট দেখানো হয়। এক্সটেনশনের ক্ষেত্রে সেই প্রম্পটটি দেখানো হবে না। আপনার এক্সটেনশনে পুশ এপিআই ব্যবহার করার জন্য, আপনাকে আপনার manifest.json ফাইলে notifications পারমিশন সেট করতে হবে।

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

আপনার এই অনুমতিটি না থাকলে, registration.pushManager সাথে যেকোনো ইন্টারঅ্যাকশনের ফলে তাৎক্ষণিক একটি ত্রুটি দেখা দেবে, যা ব্যবহারকারী অনুমতিটি প্রত্যাখ্যান করলে যা হতো ঠিক তেমনই। এছাড়াও, মনে রাখবেন যে notifications অনুমতিটি ইনস্টলের সময় একটি অনুমতি সতর্কীকরণ প্রদর্শন করবে। ব্যবহারকারী নতুন অনুমতির অনুরোধটি অনুমোদন না করা পর্যন্ত Chrome বিদ্যমান যেকোনো ইনস্টলের জন্য এক্সটেনশনটি নিষ্ক্রিয় করে দেবে। অনুমতি সতর্কীকরণ নির্দেশিকা থেকে আপনি এটি কীভাবে সামলাতে হয় সে সম্পর্কে আরও জানতে পারবেন।

পুশ প্রদানকারী এবং পুশ পরিষেবা

একবার আপনি আপনার manifest.json-এ অনুমতি যোগ করে নিলে, আপনাকে আপনার ব্যাকএন্ড এবং এক্সটেনশনের মধ্যে সংযোগটি কনফিগার করতে হবে। এই সংযোগটিকে দুটি অংশে ভাবা যেতে পারে - পুশ প্রোভাইডার এবং পুশ সার্ভিস। প্রোভাইডার হলো সেই SDK যা আপনি পুশ সার্ভিসে বার্তা পাঠানোর জন্য ব্যবহার করেন। বিভিন্ন ধরনের বিকল্প রয়েছে, এবং যেকোনো পুশ প্রোভাইডার পুশ API-এর জন্য কাজ করতে পারে (যদিও তারা এমন কোনো SDK নাও দিতে পারে যা ইন্টিগ্রেট করা সহজ করে তোলে)। কী কী করা সম্ভব তা দেখতে আপনাকে আপনার প্রোভাইডারের SDK নিয়ে পরীক্ষা-নিরীক্ষা করতে হবে। পুশ সার্ভিস হলো সেই ব্যবস্থা যার সাথে শেষ ব্যবহারকারীর ডিভাইসটি নিবন্ধিত থাকে, যাতে পুশ প্রোভাইডারের পাঠানো যেকোনো পুশ বার্তার জন্য তাকে সতর্ক করা যায়। এটি এমন একটি বিষয় যার উপর আপনার কোনো নিয়ন্ত্রণ নেই, কারণ এটি প্রতিটি ব্রাউজারে হার্ডকোড করা থাকে। ক্রোমের জন্য, ফায়ারবেস ক্লাউড মেসেজিং হলো পুশ সার্ভিস। কোনো ক্রোম ব্যবহারকারীর কাছে পুশ করা যেকোনো বার্তা এর মাধ্যমেই পাঠানো হবে।

সেলফ হোস্টিং একটি পুশ প্রোভাইডার

যেকোনো পুশ প্রোভাইডারই কাজ করতে পারে , তবে সব প্রোভাইডার সার্ভিস ওয়ার্কারে কাজ করে এমন এসডিকে (SDK) প্রদান করে না। এটি চালু করতে সমস্যা হলে আপনাকে আপনার প্রোভাইডারের সাথে পরামর্শ করতে হবে। তবে, আপনাকে কোনো পাবলিক প্রোভাইডার ব্যবহার করতে হবে না। web-push-এর মতো লাইব্রেরি ব্যবহার করে আপনি নিজের ব্যাকএন্ড হোস্ট করতে পারেন।

আপনি web-push-codelab.glitch.me ব্যবহার করে এই লাইব্রেরিটি পরীক্ষা করে দেখতে পারেন। বিশেষত, ব্রাউজারে পুশ সাবস্ক্রিপশন তৈরি করার জন্য আপনাকে পুশ সার্ভারের VAPID পাবলিক কী কপি করতে হবে। এই পাবলিক কী আসলে একটি base64 এনকোডেড বাইনারি ভ্যালু, যা ব্রাউজারের পুশ ম্যানেজারের সাথে রেজিস্টার করার জন্য ডিকোড করে একটি Uint8Array- তে রূপান্তর করতে হবে। এই কাজটি করার জন্য লাইব্রেরি রয়েছে, কিন্তু শুধুমাত্র নিম্নলিখিত বিষয়গুলোই প্রয়োজন।

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

প্রদত্ত মানটি পুশ ম্যানেজারে পাঠানো হয়।

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

subscribe ফাংশনটি একটি PushSubscription অবজেক্ট রিটার্ন করে, যেটিতে Push সার্ভারের মেটাডেটা থাকে। যেহেতু আপনি web-push-codelab.glitch.me ব্যবহার করছেন, তাই এই ভ্যালুটি পেজের Push Subscription অংশে কপি করতে হবে।

একবার আপনার কাছে PushSubscription থাকলে, আপনি আমাদের এক্সটেনশনের সার্ভিস ওয়ার্কারে পুশ মেসেজের জন্য একটি লিসেনার রেজিস্টার করতে প্রস্তুত।

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

আপনার লিসেনারটি চালু হয়ে গেলে, আপনি web-push-codelab.glitch.me- তে একটি মেসেজ সাবমিট করতে পারবেন, এবং মেসেজগুলো সার্ভিস ওয়ার্কারের কনসোলে লগ হয়ে যাবে।

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

নীরব ধাক্কা

ক্রোম ৮৮-এ ম্যানিফেস্ট ভি৩ চালু হওয়ার পর থেকেই আপনি আপনার ম্যানিফেস্ট ভি৩ এক্সটেনশনে পুশ নোটিফিকেশন গ্রহণ করতে পারতেন। তবে, নোটিফিকেশনটিতে ওয়েব নোটিফিকেশনের মতো ব্যবহারকারীর কাছে দৃশ্যমান কোনো প্রম্পট দেখানোর একটি শর্ত সবসময়ই ছিল। এর ফলে, ব্যবহারকারীকে অপ্রয়োজনীয় তথ্য দিয়ে বিরক্ত না করে আপনার এক্সটেনশনে কমান্ড বা ডেটা আপডেট পুশ করার ক্ষেত্রে এটি তেমন কার্যকর ছিল না। ক্রোম ১২১ থেকে, এক্সটেনশনগুলো userVisibleOnly- কে false সেট করতে পারে। এখন আপনি আপনার ব্যবহারকারীদের কাছে সাইলেন্ট, অর্থাৎ ব্যবহারকারীর দৃষ্টিগোচর নয় এমন পুশ নোটিফিকেশন পাঠাতে পারবেন। এটি ব্যবহার করার জন্য, যখন আপনি pushManager.subscribe কল করবেন, তখন userVisibleOnly কে false সেট করুন।

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});