Phonegap/Cordova issue with window resize

General
1

We have created a Vaadin 7 TouchKit 4 application that we want to package using Phonegap/Cordova to distribute as natively as possible. Now we have run into a problem where Vaadin’s offline view (“:frowning: The server cannot be reached”) is triggered every time the window resizes, which is when the keyboard is shown, device rotated etc. Do you guys have any input on this problem?

Technically, we have linked the vaadin-application to the client by using an iframe within the index.html that phonegap packages. The only things index.html does is to declare the iframe and set its src attribute, as well as import cordova.js. We have so far pin-pointed it to be some kind of problem between cordova.js and vaadin’s javascript, since the application is fine as long as index.html does not import cordova.js. Also, if we disable the resize events in the AndroidManifest.xml the app is working as intended. The same problem exists in our application as well as when we try to package the TouchKitSampler, so it shouldnt be related to our vaadin app specifically.

2

I guess your issue stems from the fact that on Android every configuration change (rotation for example) destroys and recreates the Activity. Thus the whole webview is reloaded, including all scripts and the iframe content.

With Phonegap / Cordova apps it’s best practice to handle configuration changes yourself, so add

android:configChanges="orientation|keyboardHidden" to your Android manifest. That should prevent your app from being initialized over and over again.


http://developer.android.com/guide/topics/resources/runtime-changes.html#HandlingTheChange

There are plugins available to get an event on a change, in case you want to adapt something to the new window size / orientation.