Run Ionic App run completely in a web worker?

Hi all!

I have an app that can benefit from the use of web workers to separate UI interactions (scrolling etc) from processing that should be done in the background on the device. I am familiar with how to create and use web workers - however adding this retroactively to the app would require potentially lots of interfaces to be created to pass data/structures into and out of the web worker since it has it’s own scope and cannot access anything outside of it.

This is not a new challenge - others who’ve been down this road have written and presented about it before, as well as how they’ve have wrapped the entire App to run inside of a web worker using @angular/platform-webworker and @angular/platform-webworker-dynamic; but thus far they all reference Apps created directly with the Angular CLI! (not Ionic Apps)
(yes there are DOM access limitations but they are addressed via angular)

My questions is Is it possible to do this with an Ionic App built with the Ionic CLI?

I’ve tried the instructions from other forums for Angular CLI apps, and have been unsuccessful.
one such example that I tried is here:

Is there a guide/instructions on how to do this for Ionic or is it not possible at this time?
(I’ve searched and tested a TON, but still no luck)

Alternatively, is it a bad idea to run the entire App in a web worker vs sending messages to/from one or more modular web workers as needed? I’m willing to do the latter if it’s the right way to go.


I’ve looked into this some, and I had a brief convo with Rob Wormald about web workers and ngrx on Github. Basically the deal is: it costs a lot to marshal to and from JSON. So using a web worker in some providers acually slows things down from a UX perspective. It’s a tool that sounds a lot better than it is in real life. I’m not convinced at all that your app would benefit as much as you think it would. For example: the only part of ngrx that would benefit is the effects module, which never interacts with the DOM, ever. If you have pieces like that in your app, then it might make sense to use a web worker. Otherwise, you need to make a concrete analysis instead of buying into the hype.

I don’t know the answer to your question, but that is partly because I stopped researching the intricacies of creating web workers once I understood this hidden cost they had. So my advice is: be cautious.

1 Like

@AaronSterling thanks for the insight! I’ve been concerned about the marshaling aspect too… I was hoping that putting more into the web worker (like the entire app) would essentially remove most (if not all) of the message transfers and reduce the marshal operations. If I do end up implementing web workers within the app (vs around the whole app) I plan to use the transferable objects interface to permit data re-use (albeit with restrictions) rather than copying. We’ll see - I’ll be cautious as you’ve said. Thanks again!

I’m not sure how consistent MessagePort is with hybrid programming. If you know for certain that your user is only going to use the newest version of Chrome, say, then why bother with Ionic? The advantage of Ionic is one code base that can run in many browsers, on many platforms. Someone could be running Android 4, iOS 7, Windows whatever, and viewing your app through old versions of Safari or IE. I don’t see how you marry cutting edge browser technology with that. If you’re only creating a tool for boutique users, NativeScript might be a better development framework.

Very true about the consistency of MessagePort + Transferable across different target platforms. IF I go this route I’ll make sure to test on different platforms/versions of interest. :+1:

Were you able to find a way to use platform-webworker inside an ionic-cli generated angular app ?