Web ਵਰਕਰ API
- صفحه قبلی Web ਸਟੋਰੇਜ API
- صفحه بعدی Web Fetch API
ਵੈੱਬ ਵਰਕਰ ਪਿੱਛੇ ਚਲਣ ਵਾਲਾ ਜੇਸਕਰਪਟ ਹੈ ਜੋ ਪੇਜ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦਾ。
ਵੈੱਬ ਵਰਕਰ ਕੀ ਹੈ?
ਹੀਟਮਲ ਪੇਜ ਵਿੱਚ ਸਕ੍ਰਿਪਟ ਚਲਾਉਣ ਦੇ ਸਮੇਂ, ਪੇਜ ਸਕ੍ਰਿਪਟ ਪੂਰਾ ਹੋਣ ਤੱਕ ਜਵਾਬਦੇਹ ਨਹੀਂ ਹੈ。
ਵੈੱਬ ਵਰਕਰ ਪਿੱਛੇ ਚਲਣ ਵਾਲਾ ਜੇਸਕਰਪਟ ਹੈ ਜੋ ਹੋਰ ਸਕ੍ਰਿਪਟਾਂ ਤੋਂ ਮੁਕਤ ਹੈ ਅਤੇ ਪੇਜ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦਾ। ਤੁਸੀਂ ਕੋਈ ਵੀ ਚੀਜ਼ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਕਲਿੱਕ, ਸਮਾਪਤ ਕਰਨਾ ਆਦਿ, ਜਦੋਂ ਵੈੱਬ ਵਰਕਰ ਪਿੱਛੇ ਚਲਦਾ ਹੈ。
ਬਰਾਉਜ਼ਰ ਸਪੋਰਟ
ਇਸ ਤਾਲਿਕੇ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਨੰਬਰ ਵੈੱਬ ਵਰਕਰਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਪੋਰਟ ਕਰਨ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਆਈਈ ਵਿੱਚ ਨਿਸ਼ਾਨ ਦਿੱਤਾ ਗਿਆ ਹੈ:
| ਚਰੋਮ | ਆਈਈ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪੇਰਾ |
|---|---|---|---|---|
| ਚਰੋਮ 4 | ਆਈਈ 10 | ਫਾਇਰਫਾਕਸ 3.5 | ਸਫਾਰੀ 4 | ਓਪੇਰਾ 11.5 |
| 2010 ਜਨਵਰੀ | 2012 ਸਤੰਬਰ | 2009 ਜੂਨ | 2009 ਜੂਨ | 2011 ਜੂਨ |
ਵੈੱਬ ਵਰਕਰ ਉਦਾਹਰਣ
ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਇੱਕ ਸਧਾਰਨ ਵੈੱਬ ਵਰਕਰ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਪਿੱਛੇ ਰਾਹੀਂ ਨੰਬਰਾਂ ਗਣਨਾ ਕਰਦਾ ਹੈ:
ਉਦਾਹਰਣ
ਗਿਣਤੀ:
ਵੈੱਬ ਵਰਕਰ ਬਰਾਉਜ਼ਰ ਚੈਕ
ਵੈੱਬ ਵਰਕਰ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਵਰਤੋਂਕਾਰ ਦੇ ਬਰਾਉਜ਼ਰ ਵੈੱਬ ਵਰਕਰ ਸਪੋਰਟ ਕਰਦਾ ਹੈ ਯਾਨੀ ਨਹੀਂ ਕਰਦਾ ਹੈ ਇਹ ਚੈਕ ਕਰੋ:
if (typeof(Worker) !== "undefined") {
// ਹਾਂ! ਵੈੱਬ ਵਰਕਰ ਸਪੋਰਟ ਹੈ!
// ਕੁਝ ਕੋਡ.....
}
// ਮਾਫੀ! ਵੈੱਬ ਵਰਕਰ ਸਪੋਰਟ ਨਹੀਂ ਹੈ..
}
ਵੈੱਬ ਵਰਕਰ ਫਾਈਲ ਬਣਾਓ
ਹੁਣ, ਅਸੀਂ ਬਾਹਰੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਆਪਣੇ ਵੈਬ ਵਰਕਰ ਬਣਾਵੇਗਾ।
ਇੱਥੇ, ਅਸੀਂ ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਸਕ੍ਰਿਪਟ ਬਣਾਉਂਦੇ ਹਾਂ। ਇਹ ਸਕ੍ਰਿਪਟ "demo_workers.js" ਫਾਈਲ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਜਾਵੇਗਾ:
let i = 0;
function timedCount() {
i ++;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
ਉੱਪਰੋਕਤ ਕੋਡ ਦਾ ਮਹੱਤਵਪੂਰਣ ਹਿੱਸਾ postMessage() ਮੰਥਨ - ਮੈਸੇਜਸ ਨੂੰ ਐੱਚਟੀਐੱਮਐੱਲ ਪੇਜ ਵਾਪਸ ਭੇਜਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。
ਟਿੱਪਣੀ:ਆਮ ਤੌਰ 'ਤੇ ਵੈਬ ਵਰਕਰ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਸਧਾਰਨ ਸਕ੍ਰਿਪਟਾਂ ਵਿੱਚ ਨਹੀਂ ਵਰਤੇ ਜਾਂਦੇ, ਬਲਕਿ CPU ਗਰੇਡੀਨ ਟਾਸਕਾਂ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ。
ਵੈਬ ਵਰਕਰ ਵਰਗ ਬਣਾਉਣਾ
ਹੁਣ ਅਸੀਂ ਵੈਬ ਵਰਕਰ ਫਾਈਲ ਹਾਂ, ਤਾਂ ਅਸੀਂ ਇਸ ਨੂੰ ਐੱਚਟੀਐੱਮਐੱਲ ਪੇਜ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ。
ਹੇਠ ਲਿਖੇ ਕੋਡ ਵਰਗ ਨੂੰ ਚੇਕ ਕਰਦਾ ਹੈ ਕਿ ਵਰਗ ਮੌਜੂਦ ਹੈ ਜਾਂ ਨਹੀਂ; ਜੇਕਰ ਨਹੀਂ ਹੈ, ਤਾਂ ਇਹ ਇੱਕ ਨਵਾਂ ਵੈਬ ਵਰਕਰ ਵਰਗ ਬਣਾਵੇਗਾ ਅਤੇ "demo_workers.js" ਵਿੱਚ ਦਾ ਕੋਡ ਚਲਾਵੇਗਾ:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
ਤਦ ਅਸੀਂ ਵੈਬ ਵਰਕਰ ਤੋਂ ਸੰਦੇਸ਼ ਭੇਜ ਸਕਦੇ ਹਾਂ ਅਤੇ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ。
ਵੈਬ ਵਰਕਰ ਨੂੰ ਇੱਕ "onmessage" ਈਵੈਂਟ ਲਿਸਨਰ ਜੋੜੋ。
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
ਜਦੋਂ ਵੈਬ ਵਰਕਰ ਸੰਦੇਸ਼ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰੇਗਾ, ਤਾਂ ਉਹ ਈਵੈਂਟ ਲਿਸਨਰ ਵਿੱਚ ਦਿੱਤੇ ਹੋਏ ਕੋਡ ਨੂੰ ਚਲਾਵੇਗਾ। ਵੈਬ ਵਰਕਰ ਦੇ ਡਾਟਾ event.data ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਜਾਵੇਗਾ。
ਵੈਬ ਵਰਕਰ ਸਮਾਪਤ ਕਰਨਾ
ਜਦੋਂ ਵੈਬ ਵਰਕਰ ਆਪਣੇ ਵਰਗ ਨੂੰ ਬਣਾਇਆ ਜਾਵੇਗਾ, ਤਾਂ ਉਹ ਸੰਦੇਸ਼ਾਂ ਨੂੰ ਸੁਣਨ ਜਾਰੀ ਰੱਖੇਗਾ (ਚੰਗੀ ਤਰ੍ਹਾਂ ਬਾਹਰੀ ਸਕ੍ਰਿਪਟ ਪੂਰਾ ਹੋਣ ਤੋਂ ਬਾਅਦ) ਜਦੋਂ ਤੱਕ ਉਹ ਸਮਾਪਤ ਨਹੀਂ ਹੋਇਆ ਹੈ。
ਜੇਕਰ ਤੁਸੀਂ ਵੈਬ ਵਰਕਰ ਦੇ ਆਪਣੇ ਵਰਗ ਨੂੰ ਸਮਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਬਰਾਉਜ਼ਰ/ਕੰਪਿਊਟਰ ਦੇ ਸੰਸਾਧਨਾਂ ਨੂੰ ਮੁੜ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ terminate() ਤਰੀਕੇ:
w.terminate();
ਵੈਬ ਵਰਕਰ ਮੁੜ ਵਰਤਣਾ
ਜੇਕਰ ਵਰਕਰ ਵਰਗ ਨੂੰ undefined ਮੁੱਲ ਦਿੱਤਾ ਜਾਵੇਗਾ, ਤਾਂ ਉਸ ਦੇ ਸਮਾਪਤ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਹੇਠ ਲਿਖੇ ਕੋਡ ਨੂੰ ਮੁੜ ਵਰਤ ਸਕਦੇ ਹੋ
w = undefined;
ਪੂਰਾ ਵੈਬ ਵਰਕਰ ਉਦਾਹਰਣ ਕੋਡ
ਅਸੀਂ .js ਫਾਈਲ ਵਿੱਚ ਵਰਕਰ ਕੋਡ ਦੇਖੇ ਹਨ। ਹੁਣ ਇਹ ਐੱਚਟੀਐੱਮਐੱਲ ਪੇਜ ਦਾ ਕੋਡ ਹੈ:
ਉਦਾਹਰਣ
<!DOCTYPE html>
<html>
<body>
<p>ਗਿਣਤੀ ਕਰੋ: <output id="result"></output></p>
<button onclick="startWorker()">ਸਟਾਰਟ ਵਰਕਰ</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web Worker و DOM
به دلیل اینکه Web Worker در فایلهای خارجی قرار دارد، بنابراین نمیتوانند به اشیاء زیر دسترسی داشته باشند:
- عنصر window
- عنصر document
- عنصر parent
- صفحه قبلی Web ਸਟੋਰੇਜ API
- صفحه بعدی Web Fetch API
