How to use web workers with ionic?

Ionic Framework ionic-v3
1

In my app I needed to send information to the serve at certain points. My idea was to fire a simple Web Worker that, in background, searches the data to send and sends it. There is no need to communication back with the page. The problem is simple: I can’t seem to find out how to make web workers work with ionic 2. Does anyone knows how to use web workers on ionic 2? Where to put it, how to properly call it and what, exactly, does it have to contain to work?

2

Same like on Desktop. So I don’t understand where your problem.

3

The problem is that it’s not working. I have this:

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

worker.onmessage = function(event) {
    console.log("onmessage"); 
    console.log(event.data);
};

on my page and this:

var i = 0;

postMessage("posting message");

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

on my worker, but nothing is ever printed on console.

4

First: You have a memory leak.
Second: Are you sure what is your worker exist?

In native js it works

5

KireRex did you found you mistake? or a workaround? My code is exactly like yours and it isn’t working.

6

Hi @KireRex Were you able to find a solution?? I just want a worker for background processing and not for bootstrapping the entire app in a web worker. Any help would be much appreciated. Cheers

1 Like
7

Hello @bala_abhinav, I also need to run a background process only, you found a solution?

8

The best solution I was able to find wast to use Primisses. If Promisse doesn’t work for you I couldn’t find other solution.

9

Web workers seem to be working fine for me. I have a provider that spawns a web worker. I put the worker file in the src/assets directory since that directory appears to just be copied under www when built. To create my worker in the provider, I called:

this.myWorker = new Worker("…/assets/my-worker.js");

Then posting messages and such is the same as usual.

2 Likes
10

Hi @kevinnascimento Yeah, I was able to use webworkers by putting the worker.js directly inside the build folder. Then i just called the worker like var worker = new window"worker". and using the variable worker i use the messaging api and get my stuff done. This was in beta 11. In RC, you would have to put your worker.js in the assets folder and call it like above.

11

@kevinnascimento Btw, the performance peak using the worker is definitely worth investing your time in. My app runs very smoothly now :smiley:

12

Is it possible to run complete ionic app in web worker?

1 Like
13

@Naveed No. Angular runs in the main thread and is needed to respond to view events and setup the DOM in the first place.

“You can run whatever code you like inside the worker thread, with some exceptions. For example, you can’t directly manipulate the DOM from inside a worker, or use some default methods and properties of the window object. But you can use a large number of items available under window, including WebSockets, and data storage mechanisms like IndexedDB and the Firefox OS-only Data Store API. See Functions and classes available to workers for more details.” https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

14

I still think complete Angular 2 application can run in Web Worker. We just need to make sure we are not directly manipulating the DOM.

15

Angular 2 Apps Can definitely run in a web worker. Its actually an experiemental way to increase rendering performance.

See This answer for config.

I think Ionic could definitely use support for this.

1 Like
16

so I tried this workaround with ionic telling me window[“worker”] was not a constructor…

17

You just need to put your web worker inside the public folder.
Now, your web worker may be loaded properly. And you just need to import it this way:

const worker = new Worker( 'myWorker.js' );