Get Postcard app working without iframe

[deadlyfingers]

Currently Appium E2E tests (issue #80) won't work with an iframe so it would be good to get the postcard app working without the need of an iframe.

[deadlyfingers]

Ok, I have the page loading without an iframe (NB: the camera plugin won't fire as I had to use CDM to communicate from the iframe to Cordova) but I'm getting this error in the logs:

exeption nativeEvalAndFetch : ReferenceError: Can't find variable: cordova

So far I've tried location.href = "http://localhost:5000"; and location.replace("http://localhost:5000"); methods. Might try the window.open in _self method next...

Related posts: http://stackoverflow.com/questions/22798792/load-external-page-on-to-cordova-phonegap-application http://stackoverflow.com/questions/14818138/loading-remote-html-in-phonegap-or-cleaver-cordova-on-ios

[vjrantal]

I think I know what is going on here.. The index page has Cordova referenced with a relative link like this:

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

When you serve your the page from http://localhost:5000 that page should also have Cordova referenced. The issue here is that a simple relative link doesn't work anymore. You could host the right cordova.js file within the express app, but even that wouldn't solve the issue entirely due to the way Cordova downloads the other files it needs.

[tongkolizer]

I've been trying this as a workaround but it seems like I can't get it to work.

https://github.com/thaliproject/postcardapp/issues/118

Now I have a problem with building again...

[deadlyfingers]

The exeption nativeEvalAndFetch : ReferenceError: Can't find variable: cordova error only seems to happen on iOS simulator. Now the Postcard app works without an iframe, but side effect is losing Cordova. It's proving difficult to load cordova.js from Express app ... Tried the following:

1. location.href redirect The problem here is that the 'cordova.js' scripts are stored in the application bundle / assets dir and this dir (cordova.file.applicationDirectory) can't seem to be served by Express app. eg. Not allowed to load local resource: file:///android_asset/www/cordova.js
2. window.open into _self (using cordova-plugin-inappbrowser) Related articles: http://www.telerik.com/blogs/cross-window-communication-with-cordova's-inappbrowser ^ No API for communication between windows, but there maybe a workaround...
3. xhr to load express app into body, I believe this maintains access to cordova.js, but then the app's own scripts don't execute naturally.

[deadlyfingers]

This does work however -

4. Manually copy the cordova.js, cordova_plugins.js, plugins and cordova-js-src folder from the 'platforms' build dir into the Express app's public/ dir

The problem with this is getting the build script to hook in nicely - essentially you will need to build the first to get these files generated, the copy them into the public dir and issue a cordova build after that...

[deadlyfingers]

Another possible option -

5. Hosted web app plugin... While inappbrowser prevents access to cordova functions, there is a plugin for hosted webapps to allow use of cordova functions! https://github.com/manifoldjs/ManifoldCordova cordova plugin add cordova-plugin-hostedwebapp --save The only thing is we need to start url to be dynamic and this sounds like it uses a static manifest.json config with "start_url"...

[deadlyfingers]

Option 4 seems to work best for what we need - I have this working in a Cordova/JXCore POC using a gulp script with 'after_prepare' hook.

[deadlyfingers]

Final todo here is to rewire Camera to use normal Cordova function instead of using the iframe's Cross-domain Messaging method.

[deadlyfingers]

There is also a local websever plugin that might be worth looking at for this purpose but its for iOS only. https://github.com/apache/cordova-plugins/tree/master/local-webserver