Apache Cordova：从Web视图引发事件

Question

new apache cordova dev here.

I have a very simple apache cordova app that is simply a shell for my web project.

In the onDeviceReady event I just go very simple and do:

var url = "http://www.app.com:3000/users/sign_in";

The app is working. Now I wanted my web app to raise notifications in the phone, so I imagined that I could raise an HTML event from my web app to the cordova app and then have the cordova app fire the native notification to the phone using a plugin.

This is nice because the web does not have to include any cordova files, i keep it detached from the cordova tech. It seems like a nice perk.

So I'm trying to dispatch an event from the web:

var customEvent = new CustomEvent("notification", { detail: { message: message, options: options }, bubbles: true });
document.dispatchEvent(customEvent);

And binding it on the cordova app.initialize:

document.addEventListener('notification', this.onNotification.bind(this), false);

But, when I bubble the event from the web, the cordova app is not receiving it. Upon further research, I found that the document object in the cordova app does not seem to be exactly the same than the document object in my web app.

My presumption was that this was very common, but I looked around and I couldn't find many people doing this. Is this possible (bubbling events from the web app to the cordova app)? if not, what is the best way for my web app to communicate with my cordova app?

Answer 1

I discovered that, when redirecting the local window using window.location.href, you lose the local DOM and basically everything that you do in the app is ignored.

Starting to build on that, I added the InAppBrowser plugin and opened my web app as a _blank window and configured it so it looks full screen.

    webWindow = cordova.InAppBrowser.open(url, '_blank', 'location=no,zoom=no');

After that, I found that it is not possible to bubble events from the web app to the cordova app. I tried using addEventListener and dispatching events from the web but I could not make it work.

So I ended hacking my way through it: I used the evaluateScript method on the webWindow object. Using evaluateScript I set and retrieve a variable on the window object in the web. Every 5 seconds or so I poll the variable and if there's something on it, I pull the value and clean the variable.

On the web side, I fill that everytime a new notification comes.

It is sub-optimal but it's the best I could do. It carries the huge advantage of having a very thin cordova app that I can practically forget about it. It is mobile for free.