nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Accessing the JS API via a web worker

rob_hewy

I would like to offload some of the heavy lifting in a web app to a web worker.

It is a 2-3 second jank I would like gone.

Right now the web worker would still need access to parts of the API e.g. Extent and Polygon.

I have tried loading the init.js script via importScripts() but I still get errors.

Has anyone had any success with the ArcGIS JS-API inside a web worker ... not outside but inside.

Find more posts tagged with

Accepted answers

All comments

MichalGasparovic

Apologies for digging out this old thread. I'm running into the issue with the huge amount of requests and it's been recommended to do my own build. Let's assume I have it, how do I provided it to the worker?

https://community.esri.com/message/790617-re-web-worker-and-js-api-modules

Thanks

rob_hewy

Updated video.

rob_hewy

Enjoy!

KristianEkenes

I should have clarified. I didn't require esri/Graphic. I passed graphics from the main thread to the worker and was able to keep everything, do some proximity analysis with geometryEngine, add/modify attributes, and send them back.

rob_hewy

You mentioned Graphic.

However, when I add

&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/Graphic"</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

To my define define:

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/config"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/core/promiseUtils"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/geometry/Extent"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/geometry/Polygon"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/Graphic"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> work<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I get an error in the worker.

ErrorEvent <SPAN class="punctuation token">{</SPAN>isTrusted<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> message<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Uncaught TypeError: Cannot read property 'compatMode' of null"</SPAN><SPAN class="punctuation token">,</SPAN> filename<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F4.3%2Fdojo%2Fdojo.js" target="_blank">http://js.arcgis.com/4.3/dojo/dojo.js</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> lineno<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">168</SPAN><SPAN class="punctuation token">,</SPAN> colno<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">316</SPAN>…<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Any ideas?

rob_hewy

Below is a copy of my define()

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/config"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/core/promiseUtils"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/geometry/geometryEngine"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/geometry/Extent"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/geometry/Polygon"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/tasks/support/FeatureSet"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> work<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

So far the worker works until I add:

&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/tasks/support/FeatureSet"</SPAN>
‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

rob_hewy

Can a FeatureSet be used inside a worker?

I am currently getting this error.

ErrorEvent <SPAN class="punctuation token">{</SPAN>isTrusted<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> message<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Uncaught TypeError: Cannot read property 'compatMode' of null"</SPAN><SPAN class="punctuation token">,</SPAN> filename<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F4.3%2Fdojo%2Fdojo.js" target="_blank">http://js.arcgis.com/4.3/dojo/dojo.js</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> lineno<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">168</SPAN><SPAN class="punctuation token">,</SPAN> colno<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">316</SPAN>…<SPAN class="punctuation token">}</SPAN>
bubbles
<SPAN class="punctuation token">:</SPAN>
<SPAN class="keyword token">false</SPAN>
cancelBubble
<SPAN class="punctuation token">:</SPAN>
<SPAN class="keyword token">false</SPAN>
cancelable
<SPAN class="punctuation token">:</SPAN>
<SPAN class="keyword token">true</SPAN>
colno
<SPAN class="punctuation token">:</SPAN>
<SPAN class="number token">316</SPAN>
composed
<SPAN class="punctuation token">:</SPAN>
<SPAN class="keyword token">false</SPAN>
currentTarget
<SPAN class="punctuation token">:</SPAN>
Worker
defaultPrevented
<SPAN class="punctuation token">:</SPAN>
<SPAN class="keyword token">true</SPAN>
error
<SPAN class="punctuation token">:</SPAN>
<SPAN class="keyword token">null</SPAN>
eventPhase
<SPAN class="punctuation token">:</SPAN>
<SPAN class="number token">0</SPAN>
filename
<SPAN class="punctuation token">:</SPAN>
<SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F4.3%2Fdojo%2Fdojo.js" target="_blank">http://js.arcgis.com/4.3/dojo/dojo.js</A><SPAN>"</SPAN></SPAN>
isTrusted
<SPAN class="punctuation token">:</SPAN>
<SPAN class="keyword token">true</SPAN>
lineno
<SPAN class="punctuation token">:</SPAN>
<SPAN class="number token">168</SPAN>
message
<SPAN class="punctuation token">:</SPAN>
<SPAN class="string token">"Uncaught TypeError: Cannot read property 'compatMode' of null"</SPAN>
path
<SPAN class="punctuation token">:</SPAN>
<SPAN class="token function">Array</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN>
returnValue
<SPAN class="punctuation token">:</SPAN>
<SPAN class="keyword token">false</SPAN>
srcElement
<SPAN class="punctuation token">:</SPAN>
Worker
target
<SPAN class="punctuation token">:</SPAN>
Worker
timeStamp
<SPAN class="punctuation token">:</SPAN>
<SPAN class="number token">5463.285000000001</SPAN>
type
<SPAN class="punctuation token">:</SPAN>
<SPAN class="string token">"error"</SPAN>
__proto__
<SPAN class="punctuation token">:</SPAN>
ErrorEvent<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

rob_hewy

Just a heads up for others. Once I started using the proxy.connection as shown in the gist-sample the variable names on the client-side and the web-worker side had to match.

This might be a chrome-thing, transferable object-thing or a AJS-connection framework-thing. Not sure as I am a newbie to this part of the API.

If I do this on the non-web-worker side

 <SPAN class="keyword token">return</SPAN> connection<SPAN class="punctuation token">.</SPAN><SPAN class="token function">invoke</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"someFX"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> argsAsJSON <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Then inside the web-worker I had to make the variable names match:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Request<SPAN class="punctuation token">.</SPAN>prototype<SPAN class="punctuation token">.</SPAN>someFX <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">someFX</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>argsAsJSON<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>proxy<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

If I used another variable name then that variable would be undefined:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Request.prototype.someFX = function someFX({data}, {proxy}) {<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

The line above (in the chrome debugger) would report data as undefined.

RRubalcava

It's not invoking a method on itself, the proxy.connection invoking a method on the object you are passing to workers.open(), that exist on the client. It can be anything you want, it just needs to have a method that returns a promise, because it's also a way for you to request information from the main thread from within the worker.

rob_hewy

"You can then invoke any functions from the worker on this argument."

What if the function updated the client UI? BOOM?

rob_hewy

Hi Rene,

I am newbie on this part of the API so my conceptual thinking might be off but ....

Is proxy.connection.invoke basically the worker invoking one of its own methods/functions as this is usually done from the client side.

Is the there a list of client side objects you can send into the worker and from within the worker call these methods/functions back in the client.

Rob

rob_hewy

That worked!

RRubalcava

I just updated this gist to handle worker communication for things like progress updates

index.html · GitHub

Turns out you can pass an object as the first argument to workers.open(). You can then invoke any functions from the worker on this argument.

<SPAN class="comment token">// client</SPAN>
workers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; progress<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">(</SPAN>msg<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"progress:"</SPAN><SPAN class="punctuation token">,</SPAN> msg<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> promiseUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN>msg<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> workerUrl<SPAN class="punctuation token">)</SPAN>

<SPAN class="comment token">// worker</SPAN>
<SPAN class="keyword token">const</SPAN> Request <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN>
 Request<SPAN class="punctuation token">.</SPAN>prototype<SPAN class="punctuation token">.</SPAN>magic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">magic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> extent <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> proxy <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; proxy<SPAN class="punctuation token">.</SPAN>connection<SPAN class="punctuation token">.</SPAN><SPAN class="token function">invoke</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"progress"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"starting"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="keyword token">const</SPAN> area <SPAN class="operator token">=</SPAN> Polygon<SPAN class="punctuation token">.</SPAN><SPAN class="token function">fromExtent</SPAN><SPAN class="punctuation token">(</SPAN>Extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">fromJSON</SPAN><SPAN class="punctuation token">(</SPAN>extent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; proxy<SPAN class="punctuation token">.</SPAN>connection<SPAN class="punctuation token">.</SPAN><SPAN class="token function">invoke</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"progress"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"polygon created"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="keyword token">const</SPAN> centroid <SPAN class="operator token">=</SPAN> area<SPAN class="punctuation token">.</SPAN>centroid<SPAN class="punctuation token">;</SPAN>
&nbsp; proxy<SPAN class="punctuation token">.</SPAN>connection<SPAN class="punctuation token">.</SPAN><SPAN class="token function">invoke</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"progress"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"centroid found"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="keyword token">const</SPAN> ptBuff <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">buffer</SPAN><SPAN class="punctuation token">(</SPAN>centroid<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"feet"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; proxy<SPAN class="punctuation token">.</SPAN>connection<SPAN class="punctuation token">.</SPAN><SPAN class="token function">invoke</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"progress"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"buffer created"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="keyword token">const</SPAN> data <SPAN class="operator token">=</SPAN> ptBuff<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toJSON</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; proxy<SPAN class="punctuation token">.</SPAN>connection<SPAN class="punctuation token">.</SPAN><SPAN class="token function">invoke</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"progress"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"buffer serialized"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="keyword token">return</SPAN> promiseUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> data <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="keyword token">return</SPAN> Request<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

JohnGrayson

No need to convert it to a string, but you do need to convert the JS object to JSON:

<SPAN class="keyword token">return</SPAN> promiseUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resolve</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>data<SPAN class="punctuation token">:</SPAN> env<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toJSON</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

You can then recreate the Extent in your main thread by passing in the JSON directly to the Extent constructor:

rob_hewy

I was able to make an extent in the worker and send it back.

On my first attempt I sent the raw object back to the UI but the object seemed confused.

Then I used JSON.stringify() and got something that made sense.

See below:

{"xmin":1,"ymin":1,"xmax":10,"ymax":10,"spatialReference":{"wkid":4326}}

Inside the worker (BTW I flatten my code i.e. avoid fx nesting at all costs):

define(["esri/core/promiseUtils", "esri/geometry/geometryEngine", "esri/geometry/Extent", "esri/geometry/Polygon"], work);

function work(promiseUtils, ge, Extent, Polygon) {

....

env = new Extent( 1, 1, 10, 10);
return promiseUtils.resolve({data: JSON.stringify(env)});

.....

}

RRubalcava

The client doesn't have access to the created worker, so you can't add event listeners to listen to messages. I can check if there is some other route for that or if we can expose it in some manner.

Here is a sample using a worker to buffer the centroid of the view extent.

index.html · GitHub

JohnGrayson

This allows you to resolve paths to your worker scripts relative to your app so you don't have to provide a full url when calling connection.open(...).

config | API Reference | ArcGIS API for JavaScript 4.3

rob_hewy

Actual progress (rabbit-hole-time)

Replace

The esriConfig.workers.loaderConfig stuff in the API sample code with the code below:

var local = window.location.href.substring(0, window.location.href.lastIndexOf('/'));
workers.open(this, local + "/<myJSdirectory>/<nameOfMyworkscript.js>")
.then(function(connection) {
return connection.invoke("max", {
numbers: [0, 1, 2, 3, 4]
});
})

That seems to bridge the sample code and gets the value 4 in the console.

KristianEkenes

I'm not sure. I've only played around with this in 4.x.

RobertScheitlin__GISP

Was this possible in 3.x?

KristianEkenes

Here are my responses to these three questions:

1. Yes you can reference API modules in the worker. I have definitely used geometryEngine, jsonUtils, and promiseUtils in a worker loaded from the JSAPI. But I would use define() instead of require().

2. I don't know. cc\ odoe ubatsukh-esristaff

3. Yes. I serialized Graphics in a worker (including the geometries) and got everything back.

rob_hewy

In the sample for the framework there is a curios line that causes an error:

esriConfig.workers.loaderConfig

rob_hewy

Thanks for all the responses.

I am using 4.3 and I have been staring at the frame work but hesitate 'jumping down the rabbit hole' if what I am trying to do is not possible.

So, I have a couple of specific questions:

1.) Would I be able to do the following inside the worker:

require(["esri/geometry/geometryEngine", "esri/geometry/Extent", "esri/geometry/Polygon" ], someFunctionInTheWorker)

2.) Is the worker a true worker and what I mean here is, can I still use postMessage() and onmessage?

I would like to send a progress message back several times before I send the final result.

3.) If I serialize to JSON will I get everything back on the other side. For example, will a polygon object still have a centroid?

Rob

RRubalcava

If you are using 4x, there is a Worker framework in the API that we use for some of our internal processing of things like VectorTiles.

Connection | API Reference | ArcGIS API for JavaScript 4.3

There are limitations to what currently works in a Worker, for example esri/request works in a Worker, but in 4.3, Authentication does not, unless you authenticate on the main thread first. You also can't pass Geometries from workers to the main thread, you need to convert them to JSON first, but if your main thread used a typed Collection to load that JSON, it could work.

In the future we'll try to add a sample or two on workers, as we can make sure other parts of the API can be loaded in workers.

ThomasSolow

It seems to me that importScripts is the right way to handle this. JavaScript doesn't allow you to share between threads currently.

I would imagine that there are limitations to what can be imported, and it may be difficult to import the entire JS API for various reasons. For instance the worker's global scope is different from the normal JavaScript global scope, and the JS API probably relies on the normal global scope in some places.

It may be possible to build the modules you need into a single file (Extent, Polygon, and all dependencies) and pull this in via importScripts, assuming there's no issues with those modules running in the worker's scope. I don't know much about the details here though.

RobertScheitlin__GISP

Robert,

I have tried in the past and came to the conclusion that you can not interact with the API inside a web worker. I have been able to do simple or even complex math or JS operations but not use esri classes.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.