Articles
जावास्क्रिप्ट का परिचय
जावास्क्रिप्ट में Shared Worker

जावास्क्रिप्ट में Shared Worker

यह लेख जावास्क्रिप्ट में Shared Worker को समझाता है।

हम Shared Worker की बुनियादी जानकारी से लेकर उसके व्यावहारिक उपयोगों तक सब कुछ एक-एक करके समझाएंगे।

YouTube Video

javascript-shared-worker.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-shared-worker.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-shared-worker.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-shared-worker.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

जावास्क्रिप्ट में Shared Worker

Shared Worker क्या है?

Shared Worker एक वर्कर थ्रेड है जिसे एक ही ओरीजिन के कई पेज (टैब, विंडो, आइफ्रेम आदि) के बीच साझा किया जा सकता है। एक पेज-विशिष्ट Dedicated Worker के विपरीत, मुख्य विशेषता यह है कि एक ही बैकग्राउंड प्रक्रिया को कई पेजों के बीच साझा किया जा सकता है। आम उपयोग के उदाहरण निम्नलिखित हैं:।

  • आप एक ही WebSocket कनेक्शन को कई टैब में साझा कर सकते हैं, जिससे कनेक्शन की संख्या कम होती है और पुनः कनेक्शन की प्रक्रिया केंद्रीकृत हो जाती है।
  • आप टैब्स के बीच स्थिति को सिंक्रनाइज़ कर सकते हैं (Pub/Sub या stores के लिए केंद्रीकृत प्रबंधन)।
  • आप IndexedDB ऑपरेशन्स को क्रमबद्ध (serialize) कर सकते हैं, ताकि एक साथ पहुंच को नियंत्रित किया जा सके।
  • आप बहुत संसाधन लेने वाली प्रोसेसेस के डुप्लिकेट निष्पादन को रोक सकते हैं।

Shared Worker की भूमिका Service Worker से अलग है। Service Worker मुख्य रूप से एक नेटवर्क प्रॉक्सी के रूप में कार्य करता है, जबकि Shared Worker का मुख्य फोकस पृष्ठों के बीच साझा किए गए मनमाने गणनाओं या स्थिति प्रबंधन पर है।

मूल API और जीवनचक्र

बनाना (मुख्य थ्रेड) 

 1// main.js
 2// The second argument 'name' serves as an identifier to share the same SharedWorker
 3// if both the URL and name are the same.
 4const worker = new SharedWorker('/shared-worker.js', { name: 'app-core' });
 5
 6// Get the communication port (MessagePort) with this SharedWorker
 7const port = worker.port;
 8
 9// Receive messages with onmessage, send messages with postMessage
10port.onmessage = (ev) => {
11    console.log('From SharedWorker:', JSON.stringify(ev.data));
12};
13
14// When using onmessage, start() is not required
15// (start() is needed when using addEventListener instead)
16port.postMessage({ type: 'hello', from: location.pathname });
  • यह कोड दिखाता है कि Shared Worker कैसे बनाया जाता है और उसके पोर्ट से संदेश कैसे भेजे/प्राप्त किए जाते हैं।

Shared Worker के दायरे में रिसीवर 

 1// shared-worker.js
 2// SharedWorkerGlobalScope has an onconnect event,
 3// and a MessagePort is provided for each connection
 4const ports = new Set();
 5
 6onconnect = (e) => {
 7    const port = e.ports[0];
 8    ports.add(port);
 9
10    port.onmessage = (ev) => {
11        // Log the received message and send a reply back to the sender
12        console.log('From page:', ev.data);
13        port.postMessage({ type: 'ack', received: ev.data });
14    };
15
16    // For handling explicit disconnection from the page (via MessagePort.close())
17    port.onmessageerror = (err) => {
18        console.error('Message error:', err);
19    };
20
21    // Greeting immediately after connection
22    port.postMessage({ type: 'welcome', clientCount: ports.size });
23};
24
25// Explicit termination of the SharedWorker is usually unnecessary
26// (It will be garbage collected when all ports are closed)
  • यह कोड दर्शाता है कि Shared Worker के अंदर प्रत्येक कनेक्शन के लिए MessagePort कैसे प्राप्त किया जाता है और ग्राहकों से आने वाले संदेशों को प्रोसेस व जवाब कैसे दिया जाता है।

Shared Worker का जीवनचक्र

Shared Worker पहला कनेक्शन स्थापित होने पर शुरू होता है और आखिरी पोर्ट बंद होने पर समाप्त हो सकता है। पेज को रीलोड या बंद करने पर कनेक्शन बंद हो जाते हैं, और आवश्यकता होने पर वर्कर फिर से बनाया जा सकता है।

Shared Worker "ब्राउज़र के भीतर साझा की जाने वाली एक दीर्घकालिक स्क्रिप्ट है"। यदि आप Shared Worker के जीवनचक्र का ध्यान नहीं रखते हैं, तो संसाधन लीकेज, पुराने स्टेट का बने रहना, और अनचाहे रिस्टार्ट जैसी समस्याएँ होने की संभावना अधिक होती है।

इसे आजमाएँ: टैब्स के बीच प्रसारण (ब्रॉडकास्ट)

यह एक न्यूनतम कार्यान्वयन है जिसमें कई टैब्स एक ही Shared Worker से जुड़ते हैं और कोई भी भेजा गया संदेश सभी टैब्स में प्रसारित हो जाता है।

main.js 

 1const worker = new SharedWorker('/shared-worker.js', { name: 'bus' });
 2const port = worker.port;
 3
 4port.onmessage = (ev) => {
 5    const msg = ev.data;
 6    if (msg.type === 'message') {
 7        const li = document.createElement('li');
 8        li.textContent = `[${new Date(msg.at).toLocaleTimeString()}] ${msg.payload}`;
 9        document.querySelector('#messages').appendChild(li);
10    } else if (msg.type === 'ready') {
11        console.log(`Connected. clients=${msg.clients}`);
12    }
13};
14
15document.querySelector('#form').addEventListener('submit', (e) => {
16    e.preventDefault();
17    const input = document.querySelector('#text');
18    port.postMessage({ type: 'publish', payload: input.value });
19    input.value = '';
20});
21
22document.querySelector('#ping').addEventListener('click', () => {
23    port.postMessage({ type: 'ping' });
24});
  • यह कोड एक Shared Worker से जुड़ता है, जिसमें संदेश प्राप्ति/प्रदर्शन, भेजने वाले फॉर्म से पोस्टिंग, और एक बटन पर क्लिक कर पिंग भेजने की सुविधा दी गई है।

shared-worker.js 

 1// Minimal pub/sub bus in a SharedWorker
 2const subscribers = new Set();
 3
 4/** Broadcast to all connected ports */
 5function broadcast(message) {
 6    for (const port of subscribers) {
 7        try {
 8            port.postMessage(message);
 9        } catch (e) {
10            // Unsubscribe if sending fails, just in case
11            subscribers.delete(port);
12        }
13    }
14}
15
16onconnect = (e) => {
17    const port = e.ports[0];
18    subscribers.add(port);
19
20    port.onmessage = (ev) => {
21        const msg = ev.data;
22        if (msg && msg.type === 'publish') {
23            broadcast({ type: 'message', payload: msg.payload, at: Date.now() });
24        } else if (msg && msg.type === 'ping') {
25            port.postMessage({ type: 'pong', at: Date.now() });
26        }
27    };
28
29    port.postMessage({ type: 'ready', clients: subscribers.size });
30};
  • यह कोड Shared Worker के भीतर एक सरल pub/sub सुविधा लागू करता है, जिससे कई ग्राहकों के बीच संदेश रिले होते हैं।

index.html 

 1<!doctype html>
 2<html>
 3    <body>
 4        <form id="form">
 5            <input id="text" placeholder="say something" />
 6            <button>Send</button>
 7        </form>
 8        <button id="ping">Ping</button>
 9        <ul id="messages"></ul>
10        <script src="/main.js" type="module"></script>
11    </body>
12</html>
  • अगर आप इस पृष्ठ को कई टैब्स में खोलते हैं, तो किसी भी टैब से भेजे गए संदेश बाकी टैब्स को भी सूचित किए जाएंगे।

संदेश डिज़ाइन: अनुरोध/प्रतिक्रिया एवं संबंध आईडी

जब कई ग्राहक Shared Worker के साथ संवाद करते हैं, तो अक्सर यह पहचानना आवश्यक होता है कि कौन-सा उत्तर किस अनुरोध से मेल खाता है। इसलिए, अनुरोधों को प्रतिक्रियाओं से जोड़ने के लिए एक संबंध आईडी शामिल करना एक मानक अभ्यास है।

main.js 

 1function createClient(workerUrl, name) {
 2    const w = new SharedWorker(workerUrl, { name });
 3    const port = w.port;
 4    const pending = new Map(); // id -> {resolve,reject}
 5    let nextId = 1;
 6
 7    port.onmessage = (ev) => {
 8        const { id, ok, result, error } = ev.data || {};
 9        if (!id || !pending.has(id)) return;
10        const { resolve, reject } = pending.get(id);
11        pending.delete(id);
12        ok ? resolve(result) : reject(new Error(error));
13    };
14
15    function call(method, params) {
16        const id = nextId++;
17        return new Promise((resolve, reject) => {
18            pending.set(id, { resolve, reject });
19            port.postMessage({ id, method, params });
20        });
21    }
22
23    return { call };
24}
25
26// usage
27const client = createClient('/shared-worker.js', 'rpc');
28client.call('add', { a: 2, b: 3 }).then(console.log);   // -> 5
29client.call('sleep', { ms: 500 }).then(console.log);     // -> 'done'
  • यह कोड एक साधारण RPC क्लाइंट लागू करता है, जो Shared Worker को असिंक्रोनस मेथड कॉल कर सकता है। यहां, एक RPC सर्वर (रिमोट प्रोसीजर कॉल सर्वर) उस सर्वर को कहा जाता है जो अन्य प्रोग्रामों या प्रक्रियाओं से फंक्शनों और प्रक्रियाओं को कॉल करने का तंत्र प्रदान करता है।
  • इस उदाहरण में, id को बस बढ़ा दिया जाता है, लेकिन आप एक UUID, एक रैंडम स्ट्रिंग, या एक टाइमस्टैम्प को काउंटर के साथ जोड़कर भी एक अद्वितीय कुंजी बना सकते हैं।

shared-worker.js 

 1// A small request/response router with correlation ids
 2onconnect = (e) => {
 3    const port = e.ports[0];
 4
 5    port.onmessage = async (ev) => {
 6        const { id, method, params } = ev.data || {};
 7        try {
 8            let result;
 9            switch (method) {
10                case 'add':
11                    result = (params?.a ?? 0) + (params?.b ?? 0);
12                    break;
13                case 'sleep':
14                    await new Promise(r => setTimeout(r, params?.ms ?? 0));
15                    result = 'done';
16                    break;
17                default:
18                    throw new Error(`Unknown method: ${method}`);
19            }
20            port.postMessage({ id, ok: true, result });
21        } catch (err) {
22            port.postMessage({ id, ok: false, error: String(err) });
23        }
24    };
25};
  • यह कोड एक सरल RPC सर्वर को लागू करता है जो method के अनुसार प्रोसेसिंग करता है और परिणाम को अनुरोध आईडी के साथ वापस भेजता है।

आम उपयोग पैटर्न

Shared Worker का उपयोग करते समय कई व्यावहारिक पैटर्न होते हैं, जैसे:।

एकल WebSocket मल्टीप्लेक्सिंग (टैब्स में साझा)

यदि प्रत्येक टैब अपनी स्वयं की WebSocket कनेक्शन खोलता है, तो यह सर्वर लोड और कनेक्शन सीमा को प्रभावित करेगा। Shared Worker में सिर्फ एक WebSocket रखें, और प्रत्येक टैब संदेशों को वर्कर के माध्यम से भेजे एवं प्राप्त करे।

main.js 

 1const w = new SharedWorker('/shared-worker.js', { name: 'ws' });
 2const port = w.port;
 3
 4port.onmessage = (ev) => {
 5    const msg = ev.data;
 6    if (msg.type === 'data') {
 7        console.log('Server says:', msg.payload);
 8    } else if (msg.type === 'socket') {
 9        console.log('WS state:', msg.state);
10    }
11};
12
13function send(payload) {
14    port.postMessage({ type: 'send', payload });
15}
  • यह कोड WebSocket सर्वर को संदेश भेजने/प्राप्त करने और कनेक्शन स्थिति सूचनाएँ प्राप्त करने की प्रक्रिया को Shared Worker के माध्यम से लागू करता है।

shared-worker.js 

 1let ws;
 2const ports = new Set();
 3
 4function ensureSocket() {
 5    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
 6        return;
 7    }
 8    ws = new WebSocket('wss://example.com/stream');
 9    ws.onopen = () => broadcast({ type: 'socket', state: 'open' });
10    ws.onclose = () => broadcast({ type: 'socket', state: 'closed' });
11    ws.onerror = (e) => broadcast({ type: 'socket', state: 'error', detail: String(e) });
12    ws.onmessage = (m) => broadcast({ type: 'data', payload: m.data });
13}
14
15function broadcast(msg) {
16    for (const p of ports) p.postMessage(msg);
17}
18
19onconnect = (e) => {
20    const port = e.ports[0];
21    ports.add(port);
22    ensureSocket();
23
24    port.onmessage = (ev) => {
25        const msg = ev.data;
26        if (msg?.type === 'send' && ws?.readyState === WebSocket.OPEN) {
27            ws.send(JSON.stringify(msg.payload));
28        }
29    };
30};

  • यह कोड Shared Worker के भीतर एक ऐसा मैकेनिज्म लागू करता है, जिसमें एक ही WebSocket कनेक्शन को साझा किया जाता है, कनेक्शन की स्थिति तथा प्राप्त डेटा सभी ग्राहकों में प्रसारित किया जाता है, और प्रत्येक ग्राहक के आउटगोइंग अनुरोध को सर्वर तक WebSocket के जरिए भेजा जाता है।

  • Shared Worker में फिर से कनेक्शन रणनीतियों और बिना भेजे गए संदेशों की कतार को केंद्रीकृत करके, सभी टैब्स में व्यवहार एकसमान हो जाता है।

IndexedDB मध्यस्थता (क्रमबद्धता)

एक ही DB को कई टैब्स से एक्सेस करते समय, अगर आप एक साथ लेनदेन से टकराव या लॉक वेटिंग से बचना चाहते हैं, तो आप इन कार्यों को Shared Worker में कतारबद्ध कर सकते हैं और उन्हें एक के बाद एक क्रम से प्रोसेस कर सकते हैं।

 1// db-worker.js (very simplified – error handling omitted)
 2let db;
 3async function openDB() {
 4    if (db) return db;
 5    db = await new Promise((resolve, reject) => {
 6        const req = indexedDB.open('appdb', 1);
 7        req.onupgradeneeded = () => req.result.createObjectStore('kv');
 8        req.onsuccess = () => resolve(req.result);
 9        req.onerror = () => reject(req.error);
10    });
11    return db;
12}
13
14async function put(key, value) {
15    const d = await openDB();
16    return new Promise((resolve, reject) => {
17        const tx = d.transaction('kv', 'readwrite');
18        tx.objectStore('kv').put(value, key);
19        tx.oncomplete = () => resolve(true);
20        tx.onerror = () => reject(tx.error);
21    });
22}
23
24async function get(key) {
25    const d = await openDB();
26    return new Promise((resolve, reject) => {
27        const tx = d.transaction('kv', 'readonly');
28        const req = tx.objectStore('kv').get(key);
29        req.onsuccess = () => resolve(req.result);
30        req.onerror = () => reject(req.error);
31    });
32}
33
34onconnect = (e) => {
35    const port = e.ports[0];
36    port.onmessage = async (ev) => {
37        const { id, op, key, value } = ev.data;
38        try {
39            const result = op === 'put' ? await put(key, value) : await get(key);
40            port.postMessage({ id, ok: true, result });
41        } catch (err) {
42            port.postMessage({ id, ok: false, error: String(err) });
43        }
44    };
45};
  • यह कोड एक मैकेनिज्म लागू करता है जिसमें IndexedDB की read/write ऑपरेशन्स को Shared Worker के माध्यम से कतारबद्ध किया जाता है, जिससे कई टैब्स का एक्सेस क्रमबद्ध (serial) होता है और टकराव या लॉक की समस्या नहीं आती।

मॉड्यूलराइजेशन और बंडलर सुझाव

यदि आप अपना Shared Worker स्क्रिप्ट ES Module के रूप में लिखना चाहते हैं, तो व्‍यवहार और सपोर्ट पर्यावरण के अनुसार भिन्न हो सकते हैं। व्यवहार में, निम्न में से किसी एक को चुनना अधिक सुरक्षित है:।

  • क्लासिक वर्कर फॉर्मेट में लिखें, और आवश्यकतानुसार डिपेंडेंसीज़ लोड करने के लिए importScripts() का प्रयोग करें।
  • अपने बंडलर (जैसे Vite / Webpack / esbuild आदि) की वर्कर एंट्री सुविधा का उपयोग करें, और बिल्ड के समय Shared Worker के लिए अलग बंडल बनाएं।

त्रुटि प्रबंधन, डिस्कनेक्शन पहचान और मजबूती के लिए टिप्स

त्रुटि प्रबंधन और मजबूती के लिए निम्नलिखित बिंदुओं पर विचार करें:।

  • कनेक्शन स्थापित होने से पहले भेजे जाने वाले संदेशों का प्रबंधन जो संदेश पोर्ट के तैयार होने से पहले आते हैं, उन्हें कतार में डालें।

  • डिस्कनेक्शन की पहचान MessagePort में मानक onclose हैंडलर नहीं होता है। मुख्य पक्ष पर, beforeunload के दौरान port.postMessage के साथ {type: 'bye'} संदेश भेजें, या अन्यथा प्रोटोकॉल में स्पष्ट रूप से निर्दिष्ट करें ताकि worker सही ढंग से साफ हो जाए।

  • पुनः कनेक्शन जब पेज रीलोड होता है या टैब दोबारा खुलता है, तो एक नया पोर्ट बनता है। एक प्रारंभिक सिंक्रनाइज़ेशन संदेश तैयार करें (जिससे पूरी स्थिति एक साथ भेजी जा सके)।

  • बैकप्रैशर तेज़ प्रसारण के दौरान, थ्रॉटलिंग/डीबाउंसिंग या स्नैपशॉट भेजने पर स्विच करें।

  • सुरक्षा Shared Worker मूलतः एक ही ओरिजिन के भीतर साझा होता है। यदि आप worker के अंदर गोपनीय जानकारी रखते हैं, तो कॉल करने वाले पक्ष के लिए टोकन या इसी तरह के तरीकों से साइड वेरिफिकेशन डिज़ाइन करने पर विचार करें।

Dedicated Worker, Shared Worker, और Service Worker का सही तरीके से उपयोग कैसे करें

प्रत्येक प्रकार के Worker की निम्नलिखित विशेषताएँ होती हैं:।

  • Dedicated Worker Dedicated Worker केवल एक ही पेज के लिए उपयोग किए जाने के लिए बनाया गया है। यह यूआई से गणनाओं का 1:1 अलगाव सक्षम करता है।

  • Shared Worker Shared Worker को एक ही origin वाले कई पेजों में साझा किया जा सकता है। यह इंटर-टैब संचार और एकल कनेक्शन साझा करने के लिए आदर्श है।

  • Service Worker Service Worker का उपयोग नेटवर्क प्रॉक्सी, कैशिंग, ऑफ़लाइन संचालन, पुश नोटिफिकेशन और बैकग्राउंड सिंक्रोनाइज़ेशन के लिए किया जा सकता है। इसकी ताकत fetch अनुरोधों को इंटरसेप्ट करने की क्षमता है।

एक सामान्य नियम के रूप में: 'टैब्स के बीच सूचना साझा करने और मनमाने प्रोसेसिंग' के लिए Shared Worker का, 'नेटवर्क नियंत्रण' के लिए Service Worker का, और केवल UI से भारी प्रोसेसिंग हटाने के लिए Dedicated Worker का उपयोग करें।

आम गलतियाँ

Shared Worker का उपयोग करते समय आपको निम्नलिखित बिंदुओं का ध्यान रखना चाहिए।

  • start() को कॉल करना भूल जाना या अनावश्यक रूप से बुलावों को करना port.addEventListener('message', ...) का उपयोग करते समय, आपको जरूर port.start() कॉल करना चाहिए। यदि आप port.onmessage = ... का उपयोग करते हैं तो यह आवश्यक नहीं है।

  • अनियंत्रित प्रसारण जैसे-जैसे टैब की संख्या बढ़ती है, लोड भी बढ़ता है। आप विभेदित डिलिवरी या सब्सक्रिप्शन टॉपिक (टॉपिक द्वारा फिल्टरिंग) लागू करके लोड कम कर सकते हैं।

  • ऑब्जेक्ट की कॉपी लागत postMessage डेटा की नकल करता है। बड़े डेटा के लिए, इसे Transferable (जैसे ArrayBuffer) के रूप में भेजने या shared memory (SharedArrayBuffer) और Atomics के साथ उपयोग करने पर विचार करें।

  • अवधि और पुनः-प्रारंभ जब अंतिम क्लाइंट डिस्कनेक्ट होता है तो Shared Worker समाप्त हो सकता है। साइड इफेक्ट्स और बग्स से बचने के लिए पहले कनेक्शन और रीस्टार्ट के लिए प्रारंभिक प्रक्रिया को अच्छी तरह डिज़ाइन करें।

सारांश

  • Shared Worker एक ऐसा स्थान है जहां कई पेजों में साझा की गई दीर्घकालिक कस्टम लॉजिक लागू की जाती है।
  • संदेश अनुबंध (प्रकार/प्रोटोकॉल) स्पष्ट करें और correlation IDs संलग्न करके अपने अनुरोध/प्रतिक्रिया डिज़ाइन को मजबूत बनाएं।
  • यह उन प्रक्रियाओं के लिए आदर्श है जो सभी टैब में एकीकृत होने पर बेहतर काम करती हैं, जैसे कि WebSocket कनेक्शनों का मल्टीप्लेक्सिंग या IndexedDB तक पहुँच को सीरियलाइज़ करना।
  • बंडलर, टाइप डिफिनिशन और पुनः-कनेक्शन जैसी सूक्ष्म सेटिंग्स को बेहतर बनाकर आप अनुप्रयोग की अनुरक्षणीयता और उपयोगकर्ता अनुभव को काफी बढ़ा सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

`Service Worker` जावास्क्रिप्ट में