JavaScript
कर्मी

वाक्य - विन्यास

• नया कार्यकर्ता (फ़ाइल)
• पोस्टमासेज (डेटा, स्थानान्तरण)
• onmessage = function (संदेश) {/ * ... * /}
• onerror = function (संदेश) {/ * ... * /}
• समाप्त ()

टिप्पणियों

सेवा कर्मी पंजीकृत करें

// Check if service worker is available. 
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('SW registration succeeded with scope:', registration.scope);
  }).catch(function(e) {
    console.log('SW registration failed with error:', e);
  });
}

• आप हर पेज लोड पर register() कॉल कर सकते हैं। यदि SW पहले से पंजीकृत है, तो ब्राउज़र आपको पहले से चल रहे उदाहरण प्रदान करता है
• SW फ़ाइल किसी भी नाम हो सकती है। sw.js आम है।
• एसडब्ल्यू फ़ाइल का स्थान महत्वपूर्ण है क्योंकि यह एसडब्ल्यू के दायरे को परिभाषित करता है। उदाहरण के लिए, पर एक दप फ़ाइल /js/sw.js केवल अवरोधन कर सकते हैं fetch फाइलों के साथ शुरू के लिए अनुरोध /js/ । इस कारण से आप आमतौर पर SW फाइल को प्रोजेक्ट के शीर्ष-स्तरीय निर्देशिका में देखते हैं।

वेब वर्कर

एक वेब वर्कर बैकग्राउंड थ्रेड्स में स्क्रिप्ट चलाने का एक सरल तरीका है क्योंकि वर्कर थ्रेड यूजर इंटरफेस के साथ हस्तक्षेप किए बिना कार्य (Iml O सहित कार्यों को कर सकता है)। एक बार बनाए जाने के बाद, एक कार्यकर्ता ऐसे संदेश भेज सकता है जो जावास्क्रिप्ट कोड के विभिन्न डेटा प्रकार (कार्यों को छोड़कर) हो सकते हैं, जिसने उस कोड (और इसके विपरीत) द्वारा निर्दिष्ट इवेंट हैंडलर को संदेश पोस्ट करके बनाया है।

श्रमिकों को कुछ तरीकों से बनाया जा सकता है।

सबसे आम एक साधारण URL से है:

var webworker = new Worker("./path/to/webworker.js");

URL.createObjectURL() का उपयोग करके स्ट्रिंग से डायनामिक रूप से वर्कर बनाना भी संभव है:

var workerData = "function someFunction() {}; console.log('More code');";

var blobURL = URL.createObjectURL(new Blob(["(" + workerData + ")"], { type: "text/javascript" }));

var webworker = new Worker(blobURL);

मौजूदा फ़ंक्शन से एक कार्यकर्ता बनाने के लिए एक ही विधि को Function.toString() के साथ जोड़ा जा सकता है:

var workerFn = function() {
    console.log("I was run");
};

var blobURL = URL.createObjectURL(new Blob(["(" + workerFn.toString() + ")"], { type: "text/javascript" }));

var webworker = new Worker(blobURL);

एक साधारण सेवा कार्यकर्ता

main.js

एक सेवा कार्यकर्ता एक घटना-संचालित कार्यकर्ता है जो मूल और पथ के खिलाफ पंजीकृत है। यह एक जावास्क्रिप्ट फ़ाइल का रूप लेता है जो वेब पेज / साइट को नियंत्रित कर सकती है जो इसके साथ संबद्ध है, नेविगेशन और संसाधन अनुरोधों को रोकना, और संशोधित करना और बहुत ही दयनीय तरीके से कैशिंग संसाधन आपको इस बात पर पूरा नियंत्रण देने के लिए कि आपका ऐप कुछ स्थितियों में कैसे व्यवहार करता है। (सबसे स्पष्ट एक है जब नेटवर्क उपलब्ध नहीं है।)

स्रोत: एमडीएन

कुछ बातें:

1. यह एक जावास्क्रिप्ट वर्कर है, इसलिए यह DOM को सीधे एक्सेस नहीं कर सकता है
2. यह एक प्रोग्राम करने योग्य नेटवर्क प्रॉक्सी है
3. इसे तब समाप्त किया जाएगा जब यह उपयोग में न हो और जब इसकी आवश्यकता हो तो इसे पुनः आरंभ करें
4. एक सेवा कार्यकर्ता के पास एक जीवनचक्र होता है जो आपके वेब पेज से पूरी तरह से अलग होता है
5. HTTPS की जरूरत है

यह कोड जिसे दस्तावेज़ संदर्भ में निष्पादित किया जाएगा, (या) इस जावास्क्रिप्ट को आपके पृष्ठ में <script> टैग के माध्यम से शामिल किया जाएगा।

// we check if the browser supports ServiceWorkers
if ('serviceWorker' in navigator) {
  navigator
    .serviceWorker
    .register(
      // path to the service worker file
      'sw.js'
    )
    // the registration is async and it returns a promise
    .then(function (reg) {
      console.log('Registration Successful');
    });
}

sw.js

यह सेवा कर्मी कोड है और सर्विसवर्कर ग्लोबल स्कोप में निष्पादित किया जाता है।

self.addEventListener('fetch', function (event) {
  // do nothing here, just log all the network requests
  console.log(event.request.url);
});

समर्पित कार्यकर्ता और साझा कार्यकर्ता

समर्पित कार्यकर्ता

एक समर्पित वेब कर्मी केवल उस लिपि द्वारा ही पहुँचा जा सकता है, जिसने उसे कहा है।

मुख्य आवेदन:

var worker = new Worker('worker.js');
worker.addEventListener('message', function(msg) {
    console.log('Result from the worker:', msg.data);
});
worker.postMessage([2,3]);

worker.js:

self.addEventListener('message', function(msg) {
    console.log('Worker received arguments:', msg.data);
    self.postMessage(msg.data[0] + msg.data[1]);
});

कार्यकर्ताओं को साझा किया

एक साझा कार्यकर्ता कई लिपियों द्वारा सुलभ है - भले ही वे अलग-अलग खिड़कियों, iframes या यहां तक कि श्रमिकों द्वारा एक्सेस किए जा रहे हों।

एक साझा कार्यकर्ता बनाना एक समर्पित को बनाने के तरीके के समान है, लेकिन मुख्य धागे और कार्यकर्ता धागे के बीच सीधे-आगे संचार के बजाय, आपको एक पोर्ट ऑब्जेक्ट के माध्यम से संवाद करना होगा, अर्थात, एक स्पष्ट पोर्ट को करना होगा इतने सारे लिपियों को खोला जाना साझा कार्यकर्ता के साथ संवाद करने के लिए इसका उपयोग कर सकता है। (ध्यान दें कि समर्पित कार्यकर्ता ऐसा करते हैं)

मुख्य अनुप्रयोग

var myWorker = new SharedWorker('worker.js');
myWorker.port.start();  // open the port connection

myWorker.port.postMessage([2,3]);

worker.js

self.port.start(); open the port connection to enable two-way communication

self.onconnect = function(e) {
    var port = e.ports[0];  // get the port

    port.onmessage = function(e) {
        console.log('Worker revceived arguemnts:', e.data);
        port.postMessage(e.data[0] + e.data[1]);
    }
}

नोट करें कि इस मैसेज हैंडलर को वर्कर थ्रेड में सेट करने से भी मूल कनेक्शन वापस पैरेंट थ्रेड में खुल जाता है, इसलिए ऊपर बताए अनुसार port.start() लिए कॉल की वास्तव में जरूरत नहीं है।

एक कार्यकर्ता को समाप्त करें

एक बार जब आप एक कार्यकर्ता के साथ किया जाता है तो आपको इसे समाप्त कर देना चाहिए। यह उपयोगकर्ता के कंप्यूटर पर अन्य अनुप्रयोगों के लिए संसाधनों को मुक्त करने में मदद करता है।

मुख्य सूत्र:

// Terminate a worker from your application.
worker.terminate();

नोट : सेवा कार्यकर्ताओं के लिए terminate विधि उपलब्ध नहीं है। जब उपयोग में नहीं होगा तो इसे समाप्त कर दिया जाएगा, और जब इसकी आवश्यकता होगी तब इसे फिर से शुरू किया जाएगा।

कार्यकर्ता धागा:

// Have a worker terminate itself.
self.close();

अपने कैश को आबाद करना

आपके सेवा कार्यकर्ता के पंजीकृत होने के बाद, ब्राउज़र सेवा कर्मी को स्थापित और बाद में सक्रिय करने का प्रयास करेगा।

इवेंट श्रोता स्थापित करें

this.addEventListener('install', function(event) {
    console.log('installed');
});

कैशिंग

ऐप को ऑफ़लाइन चलाने के लिए आवश्यक संपत्तियों को कैश करने के लिए लौटाए गए इस इंस्टॉल ईवेंट का उपयोग कर सकते हैं। उदाहरण के लिए कैश एपीआई का उपयोग करने के लिए समान है।

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        /* Array of all the assets that needs to be cached */
        '/css/style.css',
        '/js/app.js',
        '/images/snowTroopers.jpg'
      ]);
    })
  );
});

एक वेब कार्यकर्ता के साथ संवाद

चूंकि श्रमिकों ने उन्हें बनाने वाले एक अलग थ्रेड में चलाया है, इसलिए संचार को postMessage माध्यम से होना चाहिए।

नोट: क्योंकि अलग निर्यात उपसर्ग की, कुछ ब्राउज़र है webkitPostMessage के बजाय postMessage । आपको यह सुनिश्चित करना चाहिए कि अधिकांश स्थानों पर श्रमिकों को "काम" (कोई दंडित इरादा नहीं) बनाने के लिए postMessage को ओवरराइड करें:

worker.postMessage = (worker.webkitPostMessage || worker.postMessage);

मुख्य धागे (मूल विंडो) से:

// Create a worker
var webworker = new Worker("./path/to/webworker.js");

// Send information to worker
webworker.postMessage("Sample message");

// Listen for messages from the worker
webworker.addEventListener("message", function(event) {
    // `event.data` contains the value or object sent from the worker
    console.log("Message from worker:", event.data); // ["foo", "bar", "baz"]
});

कार्यकर्ता से, webworker.js :

// Send information to the main thread (parent window)
self.postMessage(["foo", "bar", "baz"]);

// Listen for messages from the main thread
self.addEventListener("message", function(event) {
    // `event.data` contains the value or object sent from main
    console.log("Message from parent:", event.data); // "Sample message"
});

वैकल्पिक रूप से, आप onmessage का उपयोग करके इवेंट श्रोताओं को भी जोड़ सकते हैं:

मुख्य धागे (मूल विंडो) से:

webworker.onmessage = function(event) {
    console.log("Message from worker:", event.data); // ["foo", "bar", "baz"]
}

कार्यकर्ता से, webworker.js :

self.onmessage = function(event) {
    console.log("Message from parent:", event.data); // "Sample message"
}