[GitHub] [cordova-android] d410 edited a comment on issue #688: Web Worker in cordova

[GitBox <gi...@apache.org>]

d410 edited a comment on issue #688: Web Worker in cordova
URL: https://github.com/apache/cordova-android/issues/688#issuecomment-482863693
 
 
   I suspect your issue may just be the simple issue of security restrictions on web workers. Connect your Cordova Application to your USB cable to your computer and Open Chrome for Desktop. Go to DevTools in Desktop Chrome and select Remote Devices. Find the webview running on your Android device and select > Inspect. 
   
   Tell us what the console is saying.
   
   Here is the solution.
   
   Firstly, ensure that your worker is not being blocked by CORS. Chrome Mobile does not allow workers to execute if they are accessed through the file:// protocol or the origin of the request to the file is of origin null. You can bypass this by using a Blob URL encoding scheme. These are called inline workers.
   
   See here:
   
   https://stackoverflow.com/questions/5408406/web-workers-without-a-separate-javascript-file
   
   Create an inline function version of your worker script. 
   
   > function() inlineWorker()
   > {
   >  /* eslint-disable no-restricted-globals */
   > console.log("fake.worker booted");
   > self.addEventListener("message", startCounter);
   > 
   > function startCounter(event) {
   >     console.log(event.data, self)
   > 	let initial = event.data;
   > 	console.log("fake.worker counter started:", initial);
   > 	
   >     setInterval(() => this.postMessage(initial++), 1000);
   > }
   > }
   
   Add this to your main Javascript file and call it as a Blob URL when you create the worker within that same file. This will bypass the security restrictions with using external files and will let you use only one file for a worker.
   
   `   const worker = new Worker(URL.createObjectURL(new Blob(["("+inlineWorker.toString()+")()"], {type: 'text/javascript'})));`
    
   
   After you've reconstructed your worker to work inline, you should add response logic for your worker within the worker itself using the onmessage event callback.
   
   Try adding an onmessage function callback to your inline worker function.
   
   > onmessage = function(e) {
   > console.log('Message received from main script ' + JSON.stringify(e.data));
   > }
   
   Now lets see the final code.
   
   
   `const worker = new Worker(URL.createObjectURL(new Blob(["("+tilemapWorker.toString()+")()"], {type: 'text/javascript'})));`
   > function() inlineWorker()
   > {
   >  /* eslint-disable no-restricted-globals */
   > console.log("fake.worker booted");
   > self.addEventListener("message", startCounter);
   > 
   > function startCounter(event) {
   >     console.log(event.data, self)
   > 	let initial = event.data;
   > 	console.log("fake.worker counter started:", initial);
   > 	
   >     setInterval(() => this.postMessage(initial++), 1000);
   > }
   > onmessage = function(e) {
   > console.log('Message received from main script ' + JSON.stringify(e.data));
   > }
   > }
   
   Good luck!

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org