Puppeteer की मदद से सर्विस वर्कर को बंद किए जाने की जांच करना

इस गाइड में, Puppeteer का इस्तेमाल करके सेवा वर्कर्स को बंद करने की जांच करके, ज़्यादा बेहतर एक्सटेंशन बनाने का तरीका बताया गया है. किसी भी समय समाप्ति को संभालने के लिए तैयार रहना समय अहम होता है, क्योंकि ऐसा बिना किसी चेतावनी के हो सकता है, नतीजे के तौर पर सर्विस वर्कर खो जाएगा. इस वजह से, एक्सटेंशन को ज़रूरी स्थिति सेव करनी चाहिए और जैसे ही अनुरोध फिर से शुरू किए जाएं, उन्हें उन अनुरोधों को तुरंत मैनेज किया जा सके हैंडल करने के लिए इवेंट.

शुरू करने से पहले

chrome-extensions-samples डेटा स्टोर करने की जगह का क्लोन बनाएं या डाउनलोड करें. हम परीक्षण एक्सटेंशन का उपयोग इसमें /functional-samples/tutorial.terminate-sw/test-extension, जो मैसेज भेजता है जब भी कोई बटन क्लिक किया जाता है और पेज पर टेक्स्ट जोड़ता है, तब उसे सर्विस वर्कर में जोड़ा जाता है. को भी जोड़ा जा सकता है.

आपको Node.JS भी इंस्टॉल करना होगा. यह रनटाइम है, जिस पर Puppeteer बनाया गया है.

पहला चरण: अपना Node.js प्रोजेक्ट शुरू करना

नई डायरेक्ट्री में ये फ़ाइलें बनाएं. वे साथ मिलकर, एक नया Node.js प्रोजेक्ट को उपलब्ध कराना और Puppeteer टेस्ट सुइट का बेसिक स्ट्रक्चर उपलब्ध कराना Jest को टेस्ट रनर के तौर पर इस्तेमाल करके. यहां जाएं: इस सेटअप के बारे में जानने के लिए, Puppeteer की मदद से Chrome एक्सटेंशन की जांच करें पूरा देखें.

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);
});

दूसरा चरण: डिपेंडेंसी इंस्टॉल करना

ज़रूरी डिपेंडेंसी इंस्टॉल करने के लिए, 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 की मदद से जांच की जा सकती है. इससे आपको पता चलेगा कि जांच पूरी हो गई है का इस्तेमाल किया जा सकता है.

चौथा चरण: सेवा वर्कर को बंद करना

नीचे दिया गया हेल्पर फ़ंक्शन जोड़ें, जो आपके सर्विस वर्कर को बंद करता है:

/**
 * 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');
});

पांचवां चरण: जांच करना

npm start चलाएं. आपका टेस्ट फ़ेल हो जाना चाहिए. इससे पता चलता है कि सेवा वर्कर को बंद करने के बाद, उसने जवाब नहीं दिया.

छठा चरण: सेवा वर्कर को ठीक करना

इसके बाद, कुछ समय के लिए चालू रहने वाली स्थिति पर निर्भरता हटाकर, सेवा वर्कर को ठीक करें. अपडेट करें नीचे दिए गए कोड का इस्तेमाल करने के लिए टेस्ट-एक्सटेंशन, जो यहां स्टोर किया गया है डेटा स्टोर करने की जगह में 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 में सेव करते हैं सर्विस वर्कर के जीवनकाल के बीच स्थिति को बनाए रखने के लिए. क्योंकि स्टोरेज सिर्फ़ इसे एसिंक्रोनस रूप से ऐक्सेस करने के अलावा, हम onMessage लिसनर से यह पक्का करें कि sendResponse कॉलबैक चालू रहे.

चरण 7: फिर से टेस्ट करना

npm start का इस्तेमाल करके, फिर से टेस्ट चलाएं. अब इसे मंज़ूरी मिल जानी चाहिए.

अगले चरण

अब इस तरीके को अपने एक्सटेंशन पर भी लागू किया जा सकता है. इन बातों पर ध्यान दें फ़ॉलो किया जा रहा है:

  • अपना टेस्ट सुइट बनाएं, ताकि सेवा देने वाले व्यक्ति के अचानक नौकरी छोड़ने पर भी, टेस्ट को चलाया जा सके. इसके बाद, दोनों मोड को अलग-अलग चलाकर, साफ़ तौर पर देखा जा सकता है किस वजह से गड़बड़ी हुई.
  • किसी परीक्षण में रैंडम पॉइंट पर सर्विस वर्कर को खत्म करने के लिए कोड लिखें. यह उन समस्याओं का पता लगाने का एक अच्छा तरीका हो सकता है जिनका अनुमान लगाना मुश्किल हो.
  • टेस्ट में होने वाली गड़बड़ियों से सीखें और आने वाले समय में कोड को सुरक्षित तरीके से लिखने की कोशिश करें. इसके लिए उदाहरण के लिए, ग्लोबल वैरिएबल के इस्तेमाल को रोकने के लिए एक लिंटिंग नियम जोड़ें. साथ ही, डेटा को स्थायी स्थिति में ले जाया जा सकता है.