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

এক্সটেনশনগুলিতে আপনি পুশ বিজ্ঞপ্তি এবং বার্তা পাঠাতে যেকোনো পুশ প্রদানকারী ব্যবহার করতে পারেন। Push API থেকে একটি পুশ আপনার পরিষেবা কর্মী দ্বারা প্রাপ্ত হওয়ার সাথে সাথে প্রক্রিয়া করা হবে। যদি পরিষেবা কর্মীকে স্থগিত করা হয়, একটি পুশ এটিকে জাগিয়ে তুলবে। এক্সটেনশনে এটি ব্যবহার করার প্রক্রিয়াটি আপনি খোলা ওয়েবে যা ব্যবহার করবেন ঠিক একই রকম।

Push API ব্যবহার করার অনুমতি পান

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

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

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

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

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

একটি পুশ প্রদানকারী স্বয়ং হোস্টিং

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

আপনি 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 ফাংশনটি একটি পুশসাবস্ক্রিপশন প্রদান করে, একটি বস্তু যাতে পুশ সার্ভারের মেটাডেটা থাকে। যেহেতু আপনি web-push-codelab.glitch.me ব্যবহার করছেন, তাই এই মানটিকে পৃষ্ঠার পুশ সাবস্ক্রিপশন অংশে কপি করতে হবে।

একবার আপনার পুশসাবস্ক্রিপশন হয়ে গেলে, আপনি আমাদের এক্সটেনশনের পরিষেবা কর্মীতে পুশ বার্তাগুলির জন্য একজন শ্রোতা নিবন্ধন করতে প্রস্তুত৷

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

আপনার শ্রোতার জায়গায়, আপনি web-push-codelab.glitch.me এ একটি বার্তা জমা দিতে পারেন এবং বার্তাগুলি পরিষেবা কর্মী কনসোলে লগ ইন করা হবে৷

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

নীরব ধাক্কা

ক্রোম 88-এ Manifest v3 চালু হওয়ার পর থেকে আপনি আপনার ম্যানিফেস্ট v3 এক্সটেনশনে একটি পুশ বিজ্ঞপ্তি পেতে সক্ষম হয়েছেন। যাইহোক, সবসময় প্রয়োজন ছিল যে বিজ্ঞপ্তিটি একটি ওয়েব বিজ্ঞপ্তির মতো ব্যবহারকারীর দৃশ্যমান প্রম্পট দেখায়। আপনি যদি ব্যবহারকারীকে অপ্রয়োজনীয় তথ্য নিয়ে বিরক্ত না করে আপনার এক্সটেনশনে কমান্ড বা ডেটা আপডেটগুলি পুশ করতে চান তবে এটি এটিকে অনেক কম উপযোগী করে তুলেছে। ক্রোম 121 অনুসারে, এক্সটেনশনগুলি ব্যবহারকারীর দৃশ্যমান শুধুমাত্র false সেট করতে সক্ষম। আপনি এখন নীরব, নন ইউজার ফেসিং পুশ নোটিফিকেশন আপনার ব্যবহারকারীদের পাঠাতে পারেন। এটি ব্যবহার করার জন্য, আপনি pushManager.subscribe কল করার সময় userVisibleOnly false সেট করুন।

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