ওয়েব কর্মীদের মৌলিক বিষয়

সমস্যা: জাভাস্ক্রিপ্ট সঙ্গতি

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

একটি জিনিস যা জাভাস্ক্রিপ্টের জন্য বাধা হয়ে দাঁড়িয়েছে তা আসলে ভাষা নিজেই। জাভাস্ক্রিপ্ট একটি একক-থ্রেডেড পরিবেশ, যার অর্থ একাধিক স্ক্রিপ্ট একই সময়ে চলতে পারে না। উদাহরণ হিসেবে, এমন একটি সাইট কল্পনা করুন যাকে UI ইভেন্টগুলি পরিচালনা করতে হবে, ক্যোয়ারী করতে হবে এবং প্রচুর পরিমাণে API ডেটা প্রসেস করতে হবে এবং DOM কে ম্যানিপুলেট করতে হবে৷ বেশ সাধারণ, তাই না? দুর্ভাগ্যবশত ব্রাউজারের জাভাস্ক্রিপ্ট রানটাইমের সীমাবদ্ধতার কারণে এটি সব একযোগে হতে পারে না। স্ক্রিপ্ট এক্সিকিউশন একটি একক থ্রেডের মধ্যে ঘটে।

ডেভেলপাররা setTimeout() , setInterval() , XMLHttpRequest , এবং ইভেন্ট হ্যান্ডলারের মতো কৌশল ব্যবহার করে 'সঙ্গতি' অনুকরণ করে। হ্যাঁ, এই সমস্ত বৈশিষ্ট্যগুলি অ্যাসিঙ্ক্রোনাসভাবে চালিত হয়, কিন্তু অ-ব্লকিং মানে একযোগে নয়৷ বর্তমান এক্সিকিউটিং স্ক্রিপ্টটি পাওয়ার পরে অ্যাসিঙ্ক্রোনাস ইভেন্টগুলি প্রক্রিয়া করা হয়। ভাল খবর হল যে HTML5 আমাদের এই হ্যাকগুলির থেকে ভাল কিছু দেয়!

ওয়েব ওয়ার্কার্সের সাথে পরিচয়: জাভাস্ক্রিপ্টে থ্রেডিং আনুন

ওয়েব ওয়ার্কার্স স্পেসিফিকেশন আপনার ওয়েব অ্যাপ্লিকেশনে ব্যাকগ্রাউন্ড স্ক্রিপ্ট তৈরি করার জন্য একটি API সংজ্ঞায়িত করে। ওয়েব ওয়ার্কাররা আপনাকে গণনামূলকভাবে নিবিড় কাজগুলি পরিচালনা করার জন্য দীর্ঘ-চলমান স্ক্রিপ্টগুলিকে ফায়ার করার মতো জিনিসগুলি করার অনুমতি দেয়, কিন্তু ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করার জন্য UI বা অন্যান্য স্ক্রিপ্টগুলিকে ব্লক না করে। তারা সেই বাজে 'অপ্রতিক্রিয়াশীল স্ক্রিপ্ট' ডায়ালগটি স্থাপন এবং শেষ করতে সাহায্য করবে যা আমরা সকলেই ভালোবাসি:

প্রতিক্রিয়াহীন স্ক্রিপ্ট ডায়ালগ
সাধারণ অপ্রতিক্রিয়াশীল স্ক্রিপ্ট ডায়ালগ।

কর্মীরা সমান্তরালতা অর্জনের জন্য থ্রেড-মত বার্তা পাসিং ব্যবহার করে। এগুলি আপনার UI রিফ্রেশ, পারফরম্যান্ট এবং ব্যবহারকারীদের জন্য প্রতিক্রিয়াশীল রাখার জন্য নিখুঁত।

ওয়েব ওয়ার্কারদের প্রকারভেদ

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

শুরু হচ্ছে

ওয়েব ওয়ার্কাররা একটি বিচ্ছিন্ন থ্রেডে চলে। ফলস্বরূপ, তারা যে কোডটি চালায় তা একটি পৃথক ফাইলে থাকা দরকার। কিন্তু আমরা এটি করার আগে, প্রথম কাজটি হল আপনার প্রধান পৃষ্ঠায় একটি নতুন Worker অবজেক্ট তৈরি করুন। কনস্ট্রাক্টর কর্মী স্ক্রিপ্টের নাম নেয়:

var worker = new Worker('task.js');

যদি নির্দিষ্ট ফাইলটি বিদ্যমান থাকে, ব্রাউজারটি একটি নতুন কর্মী থ্রেড তৈরি করবে, যা অ্যাসিঙ্ক্রোনাসভাবে ডাউনলোড করা হয়। ফাইলটি সম্পূর্ণরূপে ডাউনলোড এবং কার্যকর না হওয়া পর্যন্ত কর্মী শুরু হবে না। যদি আপনার কর্মীর পথটি 404 ফেরত দেয়, তাহলে কর্মী নিঃশব্দে ব্যর্থ হবে।

কর্মী তৈরি করার পরে, postMessage() পদ্ধতিতে কল করে এটি শুরু করুন:

worker.postMessage(); // Start the worker.

বার্তা পাসের মাধ্যমে একজন কর্মীর সাথে যোগাযোগ করা

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

doWork.js-এ একজন কর্মীকে 'হ্যালো ওয়ার্ল্ড' পাস করার জন্য একটি স্ট্রিং ব্যবহার করার উদাহরণ নিচে দেওয়া হল। কর্মী কেবল এটিতে পাস করা বার্তাটি ফেরত দেয়।

মূল স্ক্রিপ্ট:

var worker = new Worker('doWork.js');

worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);

worker.postMessage('Hello World'); // Send data to our worker.

doWork.js (কর্মী):

self.addEventListener('message', function(e) {
self.postMessage(e.data);
}, false);

যখন postMessage() প্রধান পৃষ্ঠা থেকে কল করা হয়, তখন আমাদের কর্মী message ইভেন্টের জন্য একটি onmessage হ্যান্ডলার নির্ধারণ করে সেই বার্তাটি পরিচালনা করে। বার্তা পেলোড (এই ক্ষেত্রে 'হ্যালো ওয়ার্ল্ড') Event.data এ অ্যাক্সেসযোগ্য। যদিও এই বিশেষ উদাহরণটি খুব উত্তেজনাপূর্ণ নয়, এটি প্রমাণ করে যে postMessage() মূল থ্রেডে ডেটা পাঠানোর জন্যও আপনার মাধ্যম। সুবিধাজনক !

প্রধান পৃষ্ঠা এবং কর্মীদের মধ্যে পাস করা বার্তাগুলি অনুলিপি করা হয়, ভাগ করা হয় না। উদাহরণস্বরূপ, পরবর্তী উদাহরণে JSON বার্তার 'msg' বৈশিষ্ট্য উভয় স্থানেই অ্যাক্সেসযোগ্য। এটি একটি পৃথক, নিবেদিত স্থানে চললেও বস্তুটি সরাসরি কর্মীর কাছে পাঠানো হচ্ছে বলে মনে হচ্ছে। বাস্তবে, যা ঘটছে তা হ'ল বস্তুটিকে ক্রমিক করা হচ্ছে কারণ এটি কর্মীর কাছে হস্তান্তর করা হয়েছে এবং পরবর্তীতে, অন্য প্রান্তে ডি-সিরিয়ালাইজ করা হচ্ছে। পৃষ্ঠা এবং কর্মী একই উদাহরণ ভাগ করে না, তাই শেষ ফলাফল হল প্রতিটি পাসে একটি সদৃশ তৈরি করা হয়। বেশিরভাগ ব্রাউজার উভয় প্রান্তে স্বয়ংক্রিয়ভাবে JSON এনকোডিং/ডিকোডিং করে এই বৈশিষ্ট্যটি প্রয়োগ করে।

নিম্নলিখিত একটি আরও জটিল উদাহরণ যা JSON অবজেক্ট ব্যবহার করে বার্তা পাস করে।

মূল স্ক্রিপ্ট:

<button onclick="sayHI()">Say HI</button>
<button onclick="unknownCmd()">Send unknown command</button>
<button onclick="stop()">Stop worker</button>
<output id="result"></output>

<script>
function sayHI() {
worker.postMessage({'cmd': 'start', 'msg': 'Hi'});
}

function stop() {
// worker.terminate() from this script would also stop the worker.
worker.postMessage({'cmd': 'stop', 'msg': 'Bye'});
}

function unknownCmd() {
worker.postMessage({'cmd': 'foobard', 'msg': '???'});
}

var worker = new Worker('doWork2.js');

worker.addEventListener('message', function(e) {
document.getElementById('result').textContent = e.data;
}, false);
</script>

doWork2.js:

self.addEventListener('message', function(e) {
var data = e.data;
switch (data.cmd) {
case 'start':
    self.postMessage('WORKER STARTED: ' + data.msg);
    break;
case 'stop':
    self.postMessage('WORKER STOPPED: ' + data.msg +
                    '. (buttons will no longer work)');
    self.close(); // Terminates the worker.
    break;
default:
    self.postMessage('Unknown command: ' + data.msg);
};
}, false);

স্থানান্তরযোগ্য বস্তু

বেশিরভাগ ব্রাউজার স্ট্রাকচার্ড ক্লোনিং অ্যালগরিদম প্রয়োগ করে, যা আপনাকে File , Blob , ArrayBuffer , এবং JSON অবজেক্টের মতো কর্মীদের মধ্যে/আউট করার জন্য আরও জটিল ধরনের পাস করতে দেয়৷ যাইহোক, postMessage() ব্যবহার করে এই ধরনের ডেটা পাস করার সময়, একটি কপি তৈরি করা হয়। অতএব, আপনি যদি একটি বড় 50MB ফাইল পাস করেন (উদাহরণস্বরূপ), কর্মী এবং মূল থ্রেডের মধ্যে সেই ফাইলটি পাওয়ার ক্ষেত্রে একটি লক্ষণীয় ওভারহেড রয়েছে।

স্ট্রাকচার্ড ক্লোনিং দারুণ, কিন্তু একটি কপি শত শত মিলিসেকেন্ড সময় নিতে পারে। পারফ হিট মোকাবেলা করতে, আপনি স্থানান্তরযোগ্য বস্তু ব্যবহার করতে পারেন।

স্থানান্তরযোগ্য অবজেক্টের সাথে, ডেটা এক প্রসঙ্গ থেকে অন্য প্রসঙ্গে স্থানান্তরিত হয়। এটি শূন্য-কপি, যা একজন কর্মীকে ডেটা পাঠানোর কার্যকারিতাকে ব্যাপকভাবে উন্নত করে। আপনি যদি C/C++ বিশ্বের হয়ে থাকেন তাহলে এটিকে পাস-বাই-রেফারেন্স হিসেবে ভাবুন। যাইহোক, পাস-বাই-রেফারেন্সের বিপরীতে, কলিং প্রসঙ্গ থেকে 'সংস্করণ' নতুন প্রসঙ্গে স্থানান্তরিত হয়ে গেলে আর পাওয়া যায় না। উদাহরণস্বরূপ, আপনার প্রধান অ্যাপ থেকে Worker-এ একটি ArrayBuffer স্থানান্তর করার সময়, আসল ArrayBuffer সাফ হয়ে যায় এবং আর ব্যবহারযোগ্য নয়। এর বিষয়বস্তু (শান্ত আক্ষরিক) কর্মী প্রসঙ্গে স্থানান্তরিত হয়।

স্থানান্তরযোগ্য বস্তু ব্যবহার করতে, postMessage() এর একটি সামান্য ভিন্ন স্বাক্ষর ব্যবহার করুন :

worker.postMessage(arrayBuffer, [arrayBuffer]);
window.postMessage(arrayBuffer, targetOrigin, [arrayBuffer]);

ওয়ার্কার কেস, প্রথম আর্গুমেন্ট হল ডেটা এবং দ্বিতীয় হল আইটেমগুলির তালিকা যা স্থানান্তর করা উচিত৷ প্রথম যুক্তিটি উপায় দ্বারা একটি ArrayBuffer হতে হবে না। উদাহরণস্বরূপ, এটি একটি JSON অবজেক্ট হতে পারে:

worker.postMessage({data: int8View, moreData: anotherBuffer},
                [int8View.buffer, anotherBuffer]);

গুরুত্বপূর্ণ পয়েন্ট হচ্ছে: দ্বিতীয় আর্গুমেন্টটি অবশ্যই ArrayBuffer s এর একটি অ্যারে হতে হবে। এটি আপনার স্থানান্তরযোগ্য আইটেমগুলির তালিকা।

হস্তান্তরযোগ্য বিষয়ে আরও তথ্যের জন্য, developer.chrome.com এ আমাদের পোস্ট দেখুন।

কর্মীদের পরিবেশ

কর্মীর সুযোগ

একজন শ্রমিকের পরিপ্রেক্ষিতে, self এবং this উভয়ই শ্রমিকের জন্য বিশ্বব্যাপী সুযোগের উল্লেখ করে। সুতরাং, পূর্ববর্তী উদাহরণটি এভাবেও লেখা যেতে পারে:

addEventListener('message', function(e) {
var data = e.data;
switch (data.cmd) {
case 'start':
    postMessage('WORKER STARTED: ' + data.msg);
    break;
case 'stop':
...
}, false);

বিকল্পভাবে, আপনি সরাসরি onmessage ইভেন্ট হ্যান্ডলার সেট করতে পারেন (যদিও addEventListener সবসময় JavaScript ninjas দ্বারা উৎসাহিত হয়)।

onmessage = function(e) {
var data = e.data;
...
};

কর্মীদের জন্য উপলব্ধ বৈশিষ্ট্য

তাদের মাল্টিথ্রেডেড আচরণের কারণে, ওয়েব ওয়ার্কারদের শুধুমাত্র জাভাস্ক্রিপ্টের বৈশিষ্ট্যগুলির একটি উপসেটে অ্যাক্সেস রয়েছে:

  • navigator বস্তু
  • location অবজেক্ট (শুধু পড়ার জন্য)
  • XMLHttpRequest
  • setTimeout()/clearTimeout() এবং setInterval()/clearInterval()
  • অ্যাপ্লিকেশন ক্যাশে
  • importScripts() পদ্ধতি ব্যবহার করে বহিরাগত স্ক্রিপ্ট আমদানি করা হচ্ছে
  • অন্যান্য ওয়েব কর্মীদের জন্ম দেওয়া

শ্রমিকদের অ্যাক্সেস নেই:

  • DOM (এটি থ্রেড-নিরাপদ নয়)
  • window বস্তু
  • document বস্তু
  • parent বস্তু

বাহ্যিক স্ক্রিপ্ট লোড করা হচ্ছে

আপনি importScripts() ফাংশন সহ একজন কর্মীর মধ্যে বহিরাগত স্ক্রিপ্ট ফাইল বা লাইব্রেরি লোড করতে পারেন। রিসোর্স ইম্পোর্ট করার জন্য পদ্ধতিটি ফাইলের নাম উপস্থাপন করে শূন্য বা তার বেশি স্ট্রিং নেয়।

এই উদাহরণটি কর্মীর মধ্যে script1.js এবং script2.js লোড করে:

worker.js:

importScripts('script1.js');
importScripts('script2.js');

যা একক আমদানি বিবৃতি হিসাবেও লেখা যেতে পারে:

importScripts('script1.js', 'script2.js');

উপকর্মী

শ্রমিকদের মধ্যে শিশু শ্রমিক জন্মানোর ক্ষমতা আছে। রানটাইমে আরও বড় কাজগুলি ভাঙার জন্য এটি দুর্দান্ত। যাইহোক, সাবওয়ার্কাররা কিছু সতর্কতা নিয়ে আসে:

  • সাবওয়ার্কারদের অবশ্যই মূল পৃষ্ঠার মতোই হোস্ট করতে হবে।
  • সাবওয়ার্কারদের মধ্যে ইউআরআইগুলি তাদের মূল কর্মীদের অবস্থানের সাপেক্ষে সমাধান করা হয় (মূল পৃষ্ঠার বিপরীতে)।

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

কীভাবে একজন সাবওয়ার্কারকে জন্ম দিতে হয় তার নমুনার জন্য, স্পেসিফিকেশনে উদাহরণটি দেখুন।

ইনলাইন কর্মীরা

আপনি যদি ফ্লাইতে আপনার কর্মী স্ক্রিপ্ট তৈরি করতে চান, বা আলাদা কর্মী ফাইল তৈরি না করে একটি স্বয়ংসম্পূর্ণ পৃষ্ঠা তৈরি করতে চান তবে কী হবে? Blob() এর সাথে, আপনি স্ট্রিং হিসাবে কর্মী কোডে একটি URL হ্যান্ডেল তৈরি করে আপনার মূল যুক্তি হিসাবে একই HTML ফাইলে আপনার কর্মীকে "ইনলাইন" করতে পারেন:

var blob = new Blob([
"onmessage = function(e) { postMessage('msg from worker'); }"]);

// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);

var worker = new Worker(blobURL);
worker.onmessage = function(e) {
// e.data == 'msg from worker'
};
worker.postMessage(); // Start the worker.

ব্লব ইউআরএল

জাদুটি window.URL.createObjectURL() এ কলের সাথে আসে। এই পদ্ধতিটি একটি সাধারণ URL স্ট্রিং তৈরি করে যা একটি DOM File বা Blob অবজেক্টে সংরক্ষিত ডেটা রেফারেন্স করতে ব্যবহার করা যেতে পারে। উদাহরণ স্বরূপ:

blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1

ব্লব ইউআরএলগুলি অনন্য এবং আপনার আবেদনের জীবনকালের জন্য স্থায়ী হয় (যেমন document আনলোড না হওয়া পর্যন্ত)। আপনি যদি অনেকগুলি ব্লব ইউআরএল তৈরি করেন, তাহলে আর প্রয়োজন নেই এমন রেফারেন্স প্রকাশ করা একটি ভাল ধারণা। আপনি window.URL.revokeObjectURL() এ পাস করে একটি ব্লব ইউআরএল স্পষ্টভাবে প্রকাশ করতে পারেন :

window.URL.revokeObjectURL(blobURL);

ক্রোমে, তৈরি করা সমস্ত ব্লব ইউআরএল দেখার জন্য একটি চমৎকার পৃষ্ঠা রয়েছে: chrome://blob-internals/ ।

সম্পূর্ণ উদাহরণ

এটিকে আরও এক ধাপ এগিয়ে নিয়ে, আমরা আমাদের পৃষ্ঠায় শ্রমিকের জেএস কোড কীভাবে ইনলাইন করা হয়েছে তা নিয়ে আমরা চতুর হতে পারি। এই কৌশলটি কর্মীকে সংজ্ঞায়িত করতে একটি <script> ট্যাগ ব্যবহার করে:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>

<div id="log"></div>

<script id="worker1" type="javascript/worker">
// This script won't be parsed by JS engines
// because its type is javascript/worker.
self.onmessage = function(e) {
    self.postMessage('msg from worker');
};
// Rest of your worker code goes here.
</script>

<script>
function log(msg) {
    // Use a fragment: browser will only render/reflow once.
    var fragment = document.createDocumentFragment();
    fragment.appendChild(document.createTextNode(msg));
    fragment.appendChild(document.createElement('br'));

    document.querySelector("#log").appendChild(fragment);
}

var blob = new Blob([document.querySelector('#worker1').textContent]);

var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function(e) {
    log("Received: " + e.data);
}
worker.postMessage(); // Start the worker.
</script>
</body>
</html>

আমার মতে, এই নতুন পদ্ধতিটি একটু পরিষ্কার এবং আরও সুস্পষ্ট। এটি id="worker1" এবং type='javascript/worker' সহ একটি স্ক্রিপ্ট ট্যাগ সংজ্ঞায়িত করে (তাই ব্রাউজার JS পার্স করে না)। ডকুমেন্ট document.querySelector('#worker1').textContent ব্যবহার করে সেই কোডটি স্ট্রিং হিসেবে বের করা হয় এবং ফাইল তৈরি করতে Blob() এ পাঠানো হয়।

বাহ্যিক স্ক্রিপ্ট লোড করা হচ্ছে

আপনার কর্মী কোড ইনলাইন করার জন্য এই কৌশলগুলি ব্যবহার করার সময়, importScripts() শুধুমাত্র কাজ করবে যদি আপনি একটি সম্পূর্ণ URI সরবরাহ করেন। আপনি একটি আপেক্ষিক URI পাস করার চেষ্টা করলে, ব্রাউজার একটি নিরাপত্তা ত্রুটির সাথে অভিযোগ করবে। কারণ হল: কর্মী (এখন একটি ব্লব URL থেকে তৈরি) একটি blob: উপসর্গ দিয়ে সমাধান করা হবে, যখন আপনার অ্যাপটি একটি ভিন্ন (সম্ভবত http:// ) স্কিম থেকে চলবে৷ অতএব, ক্রস অরিজিন সীমাবদ্ধতার কারণে ব্যর্থতা হবে।

একটি ইনলাইন কর্মীর মধ্যে importScripts() ব্যবহার করার একটি উপায় হল আপনার মূল স্ক্রিপ্টের বর্তমান ইউআরএলটি "ইনজেক্ট" করা থেকে ইনলাইন ওয়ার্কারকে পাস করে এবং ম্যানুয়ালি পরম URL তৈরি করে। এটি নিশ্চিত করবে যে বহিরাগত স্ক্রিপ্ট একই উত্স থেকে আমদানি করা হয়েছে৷ ধরে নিচ্ছি আপনার মূল অ্যাপটি http://example.com/index.html থেকে চলছে:

...
<script id="worker2" type="javascript/worker">
self.onmessage = function(e) {
var data = e.data;

if (data.url) {
var url = data.url.href;
var index = url.indexOf('index.html');
if (index != -1) {
    url = url.substring(0, index);
}
importScripts(url + 'engine.js');
}
...
};
</script>
<script>
var worker = new Worker(window.URL.createObjectURL(bb.getBlob()));
worker.postMessage(<b>{url: document.location}</b>);
</script>

হ্যান্ডলিং ত্রুটি

যেকোন জাভাস্ক্রিপ্ট লজিকের মতো, আপনি আপনার ওয়েব কর্মীদের মধ্যে নিক্ষিপ্ত যেকোন ত্রুটিগুলি পরিচালনা করতে চাইবেন৷ একজন কর্মী কার্যকর করার সময় যদি একটি ত্রুটি ঘটে, তাহলে একটি ErrorEvent বরখাস্ত করা হয়। কী ভুল হয়েছে তা খুঁজে বের করার জন্য ইন্টারফেসে তিনটি দরকারী বৈশিষ্ট্য রয়েছে: filename - কর্মী স্ক্রিপ্টের নাম যা ত্রুটি সৃষ্টি করেছে, lineno - লাইন নম্বর যেখানে ত্রুটি ঘটেছে এবং message - ত্রুটির একটি অর্থপূর্ণ বিবরণ৷ ত্রুটির বৈশিষ্ট্যগুলি মুদ্রণ করতে একটি onerror ইভেন্ট হ্যান্ডলার সেট আপ করার একটি উদাহরণ এখানে রয়েছে:

<output id="error" style="color: red;"></output>
<output id="result"></output>

<script>
function onError(e) {
document.getElementById('error').textContent = [
    'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
].join('');
}

function onMsg(e) {
document.getElementById('result').textContent = e.data;
}

var worker = new Worker('workerWithError.js');
worker.addEventListener('message', onMsg, false);
worker.addEventListener('error', onError, false);
worker.postMessage(); // Start worker without a message.
</script>

উদাহরণ : workerWithError.js 1/x সম্পাদন করার চেষ্টা করে, যেখানে x অনির্ধারিত।

// TODO: DevSite - কোড নমুনা সরানো হয়েছে কারণ এটি ইনলাইন ইভেন্ট হ্যান্ডলার ব্যবহার করেছে

workerWithError.js:

self.addEventListener('message', function(e) {
postMessage(1/x); // Intentional error.
};

নিরাপত্তা একটি শব্দ

স্থানীয় অ্যাক্সেস সহ সীমাবদ্ধতা

Google Chrome-এর নিরাপত্তা বিধিনিষেধের কারণে, কর্মীরা ব্রাউজারের সর্বশেষ সংস্করণে স্থানীয়ভাবে (যেমন file:// থেকে ) চলবে না। বরং তারা নীরবে ব্যর্থ! file:// স্কিম থেকে আপনার অ্যাপ চালাতে, --allow-file-access-from-files পতাকা সেট সহ Chrome চালান।

অন্যান্য ব্রাউজার একই সীমাবদ্ধতা আরোপ না.

একই-উৎস বিবেচনা

কর্মী স্ক্রিপ্টগুলি তাদের কলিং পৃষ্ঠার মতো একই স্কিম সহ বহিরাগত ফাইল হতে হবে৷ সুতরাং, আপনি একটি data: URL বা javascript: URL, এবং একটি https: পৃষ্ঠা http: URL দিয়ে শুরু হওয়া কর্মী স্ক্রিপ্টগুলি শুরু করতে পারে না।

ব্যবহারের ক্ষেত্রে

তাহলে কি ধরনের অ্যাপ ওয়েব কর্মীদের ব্যবহার করবে? আপনার মস্তিষ্ক মন্থন করার জন্য এখানে আরও কয়েকটি ধারণা রয়েছে:

  • পরবর্তীতে ব্যবহারের জন্য প্রিফেচিং এবং/অথবা ক্যাশে ডেটা।
  • কোড সিনট্যাক্স হাইলাইটিং বা অন্যান্য রিয়েল-টাইম টেক্সট ফরম্যাটিং।
  • বানান পরীক্ষক.
  • ভিডিও বা অডিও ডেটা বিশ্লেষণ করা হচ্ছে।
  • পটভূমি I/O বা ওয়েব সার্ভিসের পোলিং।
  • বড় অ্যারে বা humungous JSON প্রতিক্রিয়া প্রক্রিয়াকরণ।
  • <canvas> -এ ছবি ফিল্টারিং।
  • একটি স্থানীয় ওয়েব ডাটাবেসের অনেক সারি আপডেট করা হচ্ছে।

ওয়েব ওয়ার্কার্স এপিআই জড়িত ব্যবহারের ক্ষেত্রে আরও তথ্যের জন্য, কর্মী ওভারভিউ দেখুন।

ডেমো

তথ্যসূত্র