একজন সেবা কর্মীর কাছে মাইগ্রেট করুন

পটভূমি বা ইভেন্ট পৃষ্ঠাগুলিকে একজন পরিষেবা কর্মী দিয়ে প্রতিস্থাপন করা

ব্যাকগ্রাউন্ড কোড মূল থ্রেডের বাইরে থাকে তা নিশ্চিত করতে একজন পরিষেবা কর্মী এক্সটেনশনের পটভূমি বা ইভেন্ট পৃষ্ঠা প্রতিস্থাপন করেন। এটি শুধুমাত্র প্রয়োজনের সময় এক্সটেনশনগুলিকে চালাতে সক্ষম করে, সম্পদ সংরক্ষণ করে৷

ব্যাকগ্রাউন্ড পেজগুলি তাদের প্রবর্তনের পর থেকে এক্সটেনশনগুলির একটি মৌলিক উপাদান হয়েছে৷ সহজভাবে বলতে গেলে, পটভূমির পৃষ্ঠাগুলি এমন একটি পরিবেশ প্রদান করে যা অন্য কোনো উইন্ডো বা ট্যাব থেকে স্বাধীন থাকে। এটি এক্সটেনশনগুলিকে ইভেন্টগুলির প্রতিক্রিয়া হিসাবে পর্যবেক্ষণ এবং কাজ করার অনুমতি দেয়৷

এই পৃষ্ঠাটি ব্যাকগ্রাউন্ড পৃষ্ঠাগুলিকে এক্সটেনশন পরিষেবা কর্মীদের রূপান্তর করার কাজগুলি বর্ণনা করে৷ সাধারণত এক্সটেনশন পরিষেবা কর্মীদের সম্পর্কে আরও তথ্যের জন্য, পরিষেবা কর্মীদের সাথে ইভেন্ট পরিচালনা করুন এবং এক্সটেনশন পরিষেবা কর্মীদের সম্পর্কে বিভাগটি দেখুন।

ব্যাকগ্রাউন্ড স্ক্রিপ্ট এবং এক্সটেনশন পরিষেবা কর্মীদের মধ্যে পার্থক্য

কিছু প্রসঙ্গে আপনি 'ব্যাকগ্রাউন্ড স্ক্রিপ্ট' নামে পরিচিত এক্সটেনশন পরিষেবা কর্মীদের দেখতে পাবেন। যদিও এক্সটেনশন সার্ভিস কর্মীরা ব্যাকগ্রাউন্ডে দৌড়ায়, তাদের ব্যাকগ্রাউন্ড স্ক্রিপ্ট বলা অভিন্ন ক্ষমতা বোঝানোর মাধ্যমে কিছুটা বিভ্রান্তিকর। পার্থক্য নীচে বর্ণনা করা হয়.

পটভূমি পাতা থেকে পরিবর্তন

পটভূমির পৃষ্ঠাগুলির সাথে পরিষেবা কর্মীদের বেশ কয়েকটি পার্থক্য রয়েছে।

  • এগুলি প্রধান থ্রেডের বাইরে কাজ করে, যার অর্থ তারা এক্সটেনশন সামগ্রীতে হস্তক্ষেপ করে না৷
  • তাদের বিশেষ ক্ষমতা রয়েছে যেমন এক্সটেনশনের উত্সের ইভেন্টগুলিকে আটকানো, যেমন একটি টুলবার পপআপ থেকে।
  • তারা ক্লায়েন্ট ইন্টারফেসের মাধ্যমে যোগাযোগ করতে এবং অন্যান্য প্রসঙ্গের সাথে যোগাযোগ করতে পারে।

পরিবর্তনগুলি আপনাকে করতে হবে৷

ব্যাকগ্রাউন্ড স্ক্রিপ্ট এবং পরিষেবা কর্মীদের কাজ করার পদ্ধতির মধ্যে পার্থক্যের জন্য আপনাকে কয়েকটি কোড সামঞ্জস্য করতে হবে। শুরুতে, ম্যানিফেস্ট ফাইলে একজন পরিষেবা কর্মীকে যেভাবে নির্দিষ্ট করা হয় তা ব্যাকগ্রাউন্ড স্ক্রিপ্টগুলি কীভাবে নির্দিষ্ট করা হয় তার থেকে আলাদা৷ অতিরিক্তভাবে:

  • যেহেতু তারা DOM বা window ইন্টারফেস অ্যাক্সেস করতে পারে না, তাই আপনাকে এই ধরনের কলগুলিকে একটি ভিন্ন API বা একটি অফস্ক্রিন নথিতে স্থানান্তর করতে হবে।
  • ইভেন্ট শ্রোতাদের ফিরিয়ে দেওয়া প্রতিশ্রুতি বা ভিতরে ইভেন্ট কলব্যাকের প্রতিক্রিয়া হিসাবে নিবন্ধিত করা উচিত নয়।
  • যেহেতু তারা XMLHttpRequest() এর সাথে পশ্চাদমুখী সামঞ্জস্যপূর্ণ নয় তাই আপনাকে এই ইন্টারফেসে কলগুলিকে fetch() করতে কলগুলি দিয়ে প্রতিস্থাপন করতে হবে।
  • যেহেতু তারা ব্যবহার না করার সময় বন্ধ হয়ে যায়, তাই আপনাকে গ্লোবাল ভেরিয়েবলের উপর নির্ভর না করে অ্যাপ্লিকেশান স্টেট ধরে রাখতে হবে। পরিসেবা কর্মীরা শেষ করার আগেই টাইমার শেষ করতে পারে। আপনাকে এলার্ম দিয়ে প্রতিস্থাপন করতে হবে।

এই পৃষ্ঠাটি এই কাজগুলি বিস্তারিতভাবে বর্ণনা করে।

ম্যানিফেস্টে "পটভূমি" ক্ষেত্র আপডেট করুন

ম্যানিফেস্ট V3-এ, ব্যাকগ্রাউন্ড পৃষ্ঠাগুলি একজন পরিষেবা কর্মী দ্বারা প্রতিস্থাপিত হয়। ম্যানিফেস্ট পরিবর্তনগুলি নীচে তালিকাভুক্ত করা হয়েছে৷

  • manifest.json এ "background.service_worker" দিয়ে "background.scripts" প্রতিস্থাপন করুন। মনে রাখবেন যে "service_worker" ক্ষেত্রটি একটি স্ট্রিং নেয়, স্ট্রিংয়ের একটি অ্যারে নয়।
  • manifest.json থেকে "background.persistent" সরান।
ম্যানিফেস্ট V2 
{
  ...
  "background": {
    "scripts": [
      "backgroundContextMenus.js",
      "backgroundOauth.js"
    ],
    "persistent": false
  },
  ...
}
ম্যানিফেস্ট V3
{
  ...
  "background": {
    "service_worker": "service_worker.js",
    "type": "module"
  }
  ...
}

"service_worker" ক্ষেত্রটি একটি একক স্ট্রিং নেয়। যদি আপনি ES মডিউল ব্যবহার করেন ( import কীওয়ার্ড ব্যবহার করে) তাহলে আপনার শুধুমাত্র "type" ফিল্ডের প্রয়োজন হবে। এর মান সর্বদা "module" হবে। আরও তথ্যের জন্য, এক্সটেনশন পরিষেবা কর্মী বেসিক দেখুন

DOM এবং উইন্ডো কলগুলিকে একটি অফস্ক্রিন নথিতে সরান৷

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

অফস্ক্রিন API ব্যবহার করতে, পরিষেবা কর্মী থেকে একটি অফস্ক্রিন নথি তৈরি করুন৷

chrome.offscreen.createDocument({
  url: chrome.runtime.getURL('offscreen.html'),
  reasons: ['CLIPBOARD'],
  justification: 'testing the offscreen API',
});

অফস্ক্রিন নথিতে আপনি আগে একটি ব্যাকগ্রাউন্ড স্ক্রিপ্টে চালাতেন এমন কোনো কাজ সম্পাদন করুন। উদাহরণস্বরূপ, আপনি হোস্ট পৃষ্ঠায় নির্বাচিত পাঠ্য অনুলিপি করতে পারেন।

let textEl = document.querySelector('#text');
textEl.value = data;
textEl.select();
document.execCommand('copy');

বার্তা পাসিং ব্যবহার করে অফস্ক্রিন নথি এবং এক্সটেনশন পরিষেবা কর্মীদের মধ্যে যোগাযোগ করুন৷

স্থানীয় স্টোরেজকে অন্য প্রকারে রূপান্তর করুন

ওয়েব প্ল্যাটফর্মের Storage ইন্টারফেস ( window.localStorage থেকে অ্যাক্সেসযোগ্য) পরিষেবা কর্মী ব্যবহার করা যাবে না। এটি মোকাবেলা করার জন্য দুটি জিনিসের একটি করুন। প্রথমত, আপনি এটিকে অন্য স্টোরেজ মেকানিজমের কল দিয়ে প্রতিস্থাপন করতে পারেন। chrome.storage.local নেমস্পেস বেশিরভাগ ব্যবহারের ক্ষেত্রে পরিবেশন করবে, তবে অন্যান্য বিকল্পগুলি উপলব্ধ।

আপনি এটির কলগুলিকে একটি অফস্ক্রিন নথিতেও স্থানান্তর করতে পারেন৷ উদাহরণস্বরূপ, localStorage পূর্বে সংরক্ষিত ডেটা অন্য একটি পদ্ধতিতে স্থানান্তর করতে:

  1. একটি রূপান্তর রুটিন এবং একটি runtime.onMessage হ্যান্ডলার সহ একটি অফস্ক্রিন নথি তৈরি করুন৷
  2. অফস্ক্রিন নথিতে একটি রূপান্তর রুটিন যোগ করুন।
  3. এক্সটেনশন পরিষেবা কর্মী আপনার ডেটার জন্য chrome.storage চেক করুন৷
  4. যদি আপনার ডেটা পাওয়া না যায়, একটি অফস্ক্রিন নথি তৈরি করুন এবং রূপান্তর রুটিন শুরু করতে runtime.sendMessage() এ কল করুন।
  5. runtime.onMessage হ্যান্ডলারে যা আপনি অফস্ক্রিন নথিতে যোগ করেছেন, রূপান্তর রুটিন কল করুন।

ওয়েব স্টোরেজ API কিভাবে এক্সটেনশনে কাজ করে তার কিছু সূক্ষ্মতা রয়েছে। স্টোরেজ এবং কুকিজে আরও জানুন।

সিঙ্ক্রোনাসভাবে শ্রোতাদের নিবন্ধন করুন

অ্যাসিঙ্ক্রোনাসভাবে একজন শ্রোতাকে নিবন্ধন করা (উদাহরণস্বরূপ একটি প্রতিশ্রুতি বা কলব্যাকের ভিতরে) ম্যানিফেস্ট V3-এ কাজ করার নিশ্চয়তা দেওয়া হয় না। নিম্নলিখিত কোড বিবেচনা করুন.

chrome.storage.local.get(["badgeText"], ({ badgeText }) => {
  chrome.browserAction.setBadgeText({ text: badgeText });
  chrome.browserAction.onClicked.addListener(handleActionClick);
});

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

পরিবর্তে, ইভেন্ট শ্রোতা নিবন্ধনকে আপনার স্ক্রিপ্টের শীর্ষ স্তরে নিয়ে যান। এটি নিশ্চিত করে যে Chrome অবিলম্বে আপনার অ্যাকশনের ক্লিক হ্যান্ডলারকে খুঁজে পেতে এবং আহ্বান করতে সক্ষম হবে, এমনকি যদি আপনার এক্সটেনশনটি তার স্টার্টআপ লজিক চালানো শেষ না করে থাকে। 

chrome.action.onClicked.addListener(handleActionClick);

chrome.storage.local.get(["badgeText"], ({ badgeText }) => {
  chrome.action.setBadgeText({ text: badgeText });
});

XMLHttpRequest() কে গ্লোবাল ফেচ() দিয়ে প্রতিস্থাপন করুন

XMLHttpRequest() একটি পরিষেবা কর্মী, এক্সটেনশন বা অন্যথায় থেকে কল করা যাবে না। আপনার ব্যাকগ্রাউন্ড স্ক্রিপ্ট থেকে XMLHttpRequest() তে কলগুলিকে গ্লোবাল fetch() এ কল দিয়ে প্রতিস্থাপন করুন।

XMLHttpRequest() 
const xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState);

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState);

xhr.onload = () => {
    console.log('DONE', xhr.readyState);
};
xhr.send(null);
আনুন()
const response = await fetch('https://www.example.com/greeting.json'')
console.log(response.statusText);

স্থায়ী রাষ্ট্র

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

নিচের উদাহরণটি একটি নাম সংরক্ষণ করার জন্য একটি গ্লোবাল ভেরিয়েবল ব্যবহার করে। একজন পরিষেবা কর্মীর মধ্যে, এই ভেরিয়েবলটি ব্যবহারকারীর ব্রাউজার সেশনের সময় একাধিকবার রিসেট করা যেতে পারে।

ম্যানিফেস্ট V2 ব্যাকগ্রাউন্ড স্ক্রিপ্ট
let savedName = undefined;

chrome.runtime.onMessage.addListener(({ type, name }) => {
  if (type === "set-name") {
    savedName = name;
  }
});

chrome.browserAction.onClicked.addListener((tab) => {
  chrome.tabs.sendMessage(tab.id, { name: savedName });
});

ম্যানিফেস্ট V3-এর জন্য, স্টোরেজ API- তে একটি কল দিয়ে গ্লোবাল ভেরিয়েবল প্রতিস্থাপন করুন।

ম্যানিফেস্ট V3 পরিষেবা কর্মী 
chrome.runtime.onMessage.addListener(({ type, name }) => {
  if (type === "set-name") {
    chrome.storage.local.set({ name });
  }
});

chrome.action.onClicked.addListener(async (tab) => {
  const { name } = await chrome.storage.local.get(["name"]);
  chrome.tabs.sendMessage(tab.id, { name });
});

টাইমারকে অ্যালার্মে রূপান্তর করুন

setTimeout() বা setInterval() পদ্ধতি ব্যবহার করে বিলম্বিত বা পর্যায়ক্রমিক অপারেশনগুলি ব্যবহার করা সাধারণ। এই APIগুলি পরিষেবা কর্মীদের ব্যর্থ হতে পারে, যদিও, কারণ যখনই পরিষেবা কর্মীকে সমাপ্ত করা হয় তখন টাইমারগুলি বাতিল করা হয়৷

ম্যানিফেস্ট V2 ব্যাকগ্রাউন্ড স্ক্রিপ্ট
// 3 minutes in milliseconds
const TIMEOUT = 3 * 60 * 1000;
setTimeout(() => {
  chrome.action.setIcon({
    path: getRandomIconPath(),
  });
}, TIMEOUT);

পরিবর্তে, অ্যালার্ম API ব্যবহার করুন। অন্যান্য শ্রোতাদের মতো, অ্যালার্ম শ্রোতাদের আপনার স্ক্রিপ্টের শীর্ষ স্তরে নিবন্ধিত করা উচিত।

ম্যানিফেস্ট V3 পরিষেবা কর্মী 
async function startAlarm(name, duration) {
  await chrome.alarms.create(name, { delayInMinutes: 3 });
}

chrome.alarms.onAlarm.addListener(() => {
  chrome.action.setIcon({
    path: getRandomIconPath(),
  });
});

সেবা কর্মীকে বাঁচিয়ে রাখুন

পরিসেবা কর্মীরা সংজ্ঞা দ্বারা ইভেন্ট-চালিত এবং নিষ্ক্রিয়তার কারণে শেষ হয়ে যাবে। এইভাবে Chrome আপনার এক্সটেনশনের কর্মক্ষমতা এবং মেমরি খরচ অপ্টিমাইজ করতে পারে। আমাদের পরিষেবা কর্মী লাইফসাইকেল ডকুমেন্টেশনে আরও জানুন। ব্যতিক্রমী ক্ষেত্রে অতিরিক্ত ব্যবস্থার প্রয়োজন হতে পারে যাতে একজন পরিষেবা কর্মী দীর্ঘ সময়ের জন্য বেঁচে থাকে।

দীর্ঘমেয়াদী অপারেশন শেষ না হওয়া পর্যন্ত একজন পরিষেবা কর্মীকে জীবিত রাখুন

দীর্ঘ সময় ধরে চলা পরিষেবা কর্মী ক্রিয়াকলাপ যা এক্সটেনশন API কল করে না, পরিষেবা কর্মী মাঝামাঝি অপারেশন বন্ধ করে দিতে পারে। উদাহরণ অন্তর্ভুক্ত:

  • একটি fetch() অনুরোধ সম্ভাব্যভাবে পাঁচ মিনিটের বেশি সময় নেয় (যেমন একটি সম্ভাব্য দুর্বল সংযোগে একটি বড় ডাউনলোড)।
  • একটি জটিল অ্যাসিঙ্ক্রোনাস গণনা 30 সেকেন্ডের বেশি সময় নেয়৷

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

নিম্নলিখিত উদাহরণটি একটি waitUntil() সহায়ক ফাংশন দেখায় যা একটি প্রদত্ত প্রতিশ্রুতি সমাধান না হওয়া পর্যন্ত আপনার পরিষেবা কর্মীকে জীবিত রাখে:

async function waitUntil(promise) = {
  const keepAlive = setInterval(chrome.runtime.getPlatformInfo, 25 * 1000);
  try {
    await promise;
  } finally {
    clearInterval(keepAlive);
  }
}

waitUntil(someExpensiveCalculation());

একজন সেবা কর্মীকে নিরন্তর জীবিত রাখুন

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

আপনার পরিষেবা কর্মীকে জীবিত রাখতে নিম্নলিখিত কোড স্নিপেটটি ব্যবহার করুন:

/**
 * Tracks when a service worker was last alive and extends the service worker
 * lifetime by writing the current time to extension storage every 20 seconds.
 * You should still prepare for unexpected termination - for example, if the
 * extension process crashes or your extension is manually stopped at
 * chrome://serviceworker-internals. 
 */
let heartbeatInterval;

async function runHeartbeat() {
  await chrome.storage.local.set({ 'last-heartbeat': new Date().getTime() });
}

/**
 * Starts the heartbeat interval which keeps the service worker alive. Call
 * this sparingly when you are doing work which requires persistence, and call
 * stopHeartbeat once that work is complete.
 */
async function startHeartbeat() {
  // Run the heartbeat once at service worker startup.
  runHeartbeat().then(() => {
    // Then again every 20 seconds.
    heartbeatInterval = setInterval(runHeartbeat, 20 * 1000);
  });
}

async function stopHeartbeat() {
  clearInterval(heartbeatInterval);
}

/**
 * Returns the last heartbeat stored in extension storage, or undefined if
 * the heartbeat has never run before.
 */
async function getLastHeartbeat() {
  return (await chrome.storage.local.get('last-heartbeat'))['last-heartbeat'];
}