-
New Feature
-
Resolution: Unresolved
-
Minor
-
None
-
Future Dev
-
6
Add JavasScript worker support to LMS (Or if LMS already has it update the documentation).
There are several "worker" types in Javascript we should support them in Moodle to allow developers to leverage their functionality.
The main work looks to be around adding support in LMS for the way workers are instantiated to have them work with the way Moodle LMS loads and caches JS modules. At a very high level instead of:
const worker = new Worker('worker.js'); |
We would need something like:
const worker = new Worker('mod_forum/discussion'); |
There are a few types of workers in JS, we should support them all. A brief overview of each is below (this may help documentation later.:
Dedicated Workers: These workers are linked to a single origin and cannot be accessed by multiple scripts.
Minimal example of "main" code:
const dedicatedWorker = new Worker('worker.js'); |
dedicatedWorker.postMessage('Hello'); |
dedicatedWorker.onmessage = function(event) {
|
console.log(event.data);
|
};
|
Minimal Example of worker code:
self.addEventListener('message', function(event) { |
self.postMessage("Hello from Dedicated Worker: " + event.data); |
});
|
MDN Documentation: `https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers`
Shared Workers: These can be accessed by multiple scripts from the same origin.
Minimal example of "main" code:
const sharedWorker = new SharedWorker('shared-worker.js'); |
const port = sharedWorker.port; |
port.postMessage('Hello'); |
port.onmessage = function(event) {
|
console.log(event.data);
|
};
|
port.start();
|
Minimal Example of worker code:
self.addEventListener('connect', function(event) { |
const port = event.ports[0]; |
port.addEventListener('message', function(event) { |
port.postMessage("Hello from Shared Worker: " + event.data); |
});
|
port.start();
|
});
|
MDN Documentation: `https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker`
Service Workers: These act as proxy servers between web applications and the network, mainly used for caching.
Minimal example of "main" code:
if ('serviceWorker' in navigator) { |
navigator.serviceWorker.register('service-worker.js') |
.then(function(registration) {
|
console.log('Service Worker registered with scope:', registration.scope); |
})
|
.catch(function(error) { |
console.log('Service Worker registration failed:', error); |
});
|
}
|
Minimal Example of worker code:
self.addEventListener('install', function(event) { |
// Perform install steps |
});
|
|
self.addEventListener('fetch', function(event) { |
event.respondWith(fetch(event.request));
|
});
|
MDN Documentation: `https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API`