এই নির্দেশিকা ব্যাখ্যা করে কিভাবে Puppeteer ব্যবহার করে পরিসেবা কর্মী সমাপ্তি পরীক্ষা করে আরও শক্তিশালী এক্সটেনশন তৈরি করা যায়। যে কোনো সময় পরিসমাপ্তি পরিচালনা করার জন্য প্রস্তুত থাকা গুরুত্বপূর্ণ কারণ এটি কোনো সতর্কতা ছাড়াই ঘটতে পারে যার ফলে পরিষেবা কর্মী হারিয়ে যেতে পারে। ফলস্বরূপ, এক্সটেনশনগুলিকে অবশ্যই গুরুত্বপূর্ণ অবস্থা সংরক্ষণ করতে হবে এবং যখন পরিচালনা করার জন্য একটি ইভেন্ট থাকে তখন সেগুলি আবার শুরু হওয়ার সাথে সাথে অনুরোধগুলি পরিচালনা করতে সক্ষম হবে।
আপনি শুরু করার আগে
ক্রোম-এক্সটেনশন-নমুনা সংগ্রহস্থল ক্লোন করুন বা ডাউনলোড করুন। আমরা /functional-samples/tutorial.terminate-sw/test-extension এ পরীক্ষা এক্সটেনশন ব্যবহার করব যা প্রতিবার একটি বোতামে ক্লিক করার সময় পরিষেবা কর্মীকে একটি বার্তা পাঠায় এবং প্রতিক্রিয়া প্রাপ্ত হলে পৃষ্ঠায় পাঠ্য যোগ করে।
এছাড়াও আপনাকে Node.JS ইনস্টল করতে হবে যেটি রানটাইম যা পাপেটিয়ার তৈরি করা হয়েছে।
ধাপ 1: আপনার Node.js প্রকল্প শুরু করুন
একটি নতুন ডিরেক্টরিতে নিম্নলিখিত ফাইলগুলি তৈরি করুন। তারা একসাথে একটি নতুন Node.js প্রজেক্ট তৈরি করে এবং জেস্টকে টেস্ট রানার হিসাবে ব্যবহার করে একটি Puppeteer টেস্ট স্যুটের মৌলিক কাঠামো প্রদান করে। আরও বিস্তারিতভাবে এই সেটআপ সম্পর্কে জানতে পাপেটিয়ারের সাথে ক্রোম এক্সটেনশন পরীক্ষা করুন ।
package.json:
{
"name": "puppeteer-demo",
"version": "1.0",
"dependencies": {
"jest": "^29.7.0",
"puppeteer": "^22.1.0"
},
"scripts": {
"start": "jest ."
},
"devDependencies": {
"@jest/globals": "^29.7.0"
}
}
index.test.js:
const puppeteer = require('puppeteer');
const SAMPLES_REPO_PATH = 'PATH_TO_SAMPLES_REPOSITORY';
const EXTENSION_PATH = `${SAMPLES_REPO_PATH}/functional-samples/tutorial.terminate-sw/test-extension`;
const EXTENSION_ID = 'gjgkofgpcmpfpggbgjgdfaaifcmoklbl';
let browser;
beforeEach(async () => {
browser = await puppeteer.launch({
// Set to 'new' to hide Chrome if running as part of an automated build.
headless: false,
args: [
`--disable-extensions-except=${EXTENSION_PATH}`,
`--load-extension=${EXTENSION_PATH}`
]
});
});
afterEach(async () => {
await browser.close();
browser = undefined;
});
লক্ষ্য করুন যে আমাদের পরীক্ষা নমুনা সংগ্রহস্থল থেকে test-extension লোড করে। chrome.runtime.onMessage এর হ্যান্ডলার chrome.runtime.onInstalled ইভেন্টের জন্য হ্যান্ডলারে সেট করা স্টেটের উপর নির্ভর করে। ফলস্বরূপ, পরিষেবা কর্মী বন্ধ হয়ে গেলে data বিষয়বস্তু হারিয়ে যাবে এবং ভবিষ্যতের কোনও বার্তার প্রতিক্রিয়া ব্যর্থ হবে৷ আমরা আমাদের পরীক্ষা লেখার পরে এটি ঠিক করব।
service-worker-broken.js:
let data;
chrome.runtime.onInstalled.addListener(() => {
data = { version: chrome.runtime.getManifest().version };
});
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
sendResponse(data.version);
});
ধাপ 2: নির্ভরতা ইনস্টল করুন
প্রয়োজনীয় নির্ভরতাগুলি ইনস্টল করতে npm install চালান।
ধাপ 3: একটি মৌলিক পরীক্ষা লিখুন
index.test.js এর নীচে নিম্নলিখিত পরীক্ষাটি যোগ করুন। এটি আমাদের পরীক্ষার এক্সটেনশন থেকে পরীক্ষার পৃষ্ঠাটি খোলে, বোতাম উপাদানটিতে ক্লিক করে এবং পরিষেবা কর্মীর প্রতিক্রিয়ার জন্য অপেক্ষা করে।
test('can message service worker', async () => {
const page = await browser.newPage();
await page.goto(`chrome-extension://${EXTENSION_ID}/page.html`);
// Message without terminating service worker
await page.click('button');
await page.waitForSelector('#response-0');
});
আপনি npm start দিয়ে আপনার পরীক্ষা চালাতে পারেন এবং দেখতে হবে যে এটি সফলভাবে সম্পন্ন হয়েছে।
ধাপ 4: পরিষেবা কর্মীকে বন্ধ করুন
নিম্নলিখিত সহায়ক ফাংশন যোগ করুন যা আপনার পরিষেবা কর্মীকে সমাপ্ত করে:
/**
* Stops the service worker associated with a given extension ID. This is done
* by creating a new Chrome DevTools Protocol session, finding the target ID
* associated with the worker and running the Target.closeTarget command.
*
* @param {Page} browser Browser instance
* @param {string} extensionId Extension ID of worker to terminate
*/
async function stopServiceWorker(browser, extensionId) {
const host = `chrome-extension://${extensionId}`;
const target = await browser.waitForTarget((t) => {
return t.type() === 'service_worker' && t.url().startsWith(host);
});
const worker = await target.worker();
await worker.close();
}
অবশেষে, নিম্নলিখিত কোড দিয়ে আপনার পরীক্ষা আপডেট করুন। এখন পরিষেবা কর্মীকে বন্ধ করুন এবং আপনি একটি প্রতিক্রিয়া পেয়েছেন তা পরীক্ষা করতে আবার বোতামটি ক্লিক করুন৷
test('can message service worker when terminated', async () => {
const page = await browser.newPage();
await page.goto(`chrome-extension://${EXTENSION_ID}/page.html`);
// Message without terminating service worker
await page.click('button');
await page.waitForSelector('#response-0');
// Terminate service worker
await stopServiceWorker(page, EXTENSION_ID);
// Try to send another message
await page.click('button');
await page.waitForSelector('#response-1');
});
ধাপ 5: আপনার পরীক্ষা চালান
npm start করুন। আপনার পরীক্ষা ব্যর্থ হওয়া উচিত যা ইঙ্গিত করে যে পরিষেবা কর্মী এটি সমাপ্ত হওয়ার পরে প্রতিক্রিয়া জানায়নি।
ধাপ 6: পরিষেবা কর্মী ঠিক করুন
এর পরে, অস্থায়ী অবস্থার উপর নির্ভরতা সরিয়ে পরিষেবা কর্মীকে ঠিক করুন। নিম্নলিখিত কোডটি ব্যবহার করতে পরীক্ষা-এক্সটেনশন আপডেট করুন, যা রিপোজিটরিতে service-worker-fixed.js এ সংরক্ষিত আছে।
service-worker-fixed.js:
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.local.set({ version: chrome.runtime.getManifest().version });
});
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
chrome.storage.local.get('version').then((data) => {
sendResponse(data.version);
});
return true;
});
এখানে, আমরা পরিষেবা কর্মীদের জীবনকালের মধ্যে অবস্থা বজায় রাখার জন্য একটি গ্লোবাল ভেরিয়েবলের পরিবর্তে সংস্করণটিকে chrome.storage.local এ সংরক্ষণ করি৷ যেহেতু স্টোরেজ শুধুমাত্র অ্যাসিঙ্ক্রোনাসভাবে অ্যাক্সেস করা যেতে পারে, তাই sendResponse কলব্যাক জীবিত থাকে তা নিশ্চিত করতে আমরা onMessage শ্রোতার কাছ থেকে সত্য ফিরে আসি।
ধাপ 7: আবার আপনার পরীক্ষা চালান
npm start দিয়ে আবার পরীক্ষা চালান। এটা এখন পাস করা উচিত.
পরবর্তী পদক্ষেপ
আপনি এখন আপনার নিজের এক্সটেনশনে একই পদ্ধতি প্রয়োগ করতে পারেন। নিম্নলিখিত বিবেচনা করুন:
- অপ্রত্যাশিত পরিষেবা কর্মী সমাপ্তির সাথে বা ছাড়াই চালানো সমর্থন করার জন্য আপনার পরীক্ষা স্যুট তৈরি করুন। তারপরে ব্যর্থতার কারণ কী তা পরিষ্কার করতে আপনি পৃথকভাবে উভয় মোড চালাতে পারেন।
- একটি পরীক্ষার মধ্যে র্যান্ডম পয়েন্টে পরিষেবা কর্মীকে শেষ করার জন্য কোড লিখুন। এটি এমন সমস্যাগুলি আবিষ্কার করার একটি ভাল উপায় হতে পারে যা ভবিষ্যদ্বাণী করা কঠিন হতে পারে।
- পরীক্ষার ব্যর্থতা থেকে শিখুন এবং ভবিষ্যতে রক্ষণাত্মক কোড করার চেষ্টা করুন। উদাহরণস্বরূপ, গ্লোবাল ভেরিয়েবলের ব্যবহারকে নিরুৎসাহিত করতে একটি লিন্টিং নিয়ম যোগ করুন এবং ডেটাকে আরও স্থায়ী অবস্থায় নিয়ে যাওয়ার চেষ্টা করুন।