Vaadin and Phonegap

I built an application with Vaadin 7.1.10, and Touchkit 4.0, and have now wrapped it with Phonegap as an Android application. Testing on an Android 4.4 (Kitkat) tablet though, the logout functionality fails.

The normal Vaadin way to log out is to close the session and navigate back to the top of the application, like so:


It works great an every browser, including Chrome on said tablet. Within Phonegap though, it pulls up a page with a frowny face and:
The server cannot be reached
No network connection
Your network connection seems to be down. Your application will automatically try resume once your connection is restored.

There it sits. I can hit the home button, go back to the launcher, and run my app again and it’s fine.

I tried some variations, including defining the exact URL and removing the session close. It seems that Page.setLocation() is what causes this. I tried,“_self”,false) instead as recommended in another bug report (about push, not phonegap), and it didn’t make any difference.

Working around the problem by cleaning up the UI and reusing it on logout; hopefully I don’t leak anything.

Still having trouble with the “The server cannot be reached” though when I restart the development server that it’s connected to. It remains stuck on that screen. Deleting all data from the app gets it back to normal… and I just found that hitting the back-arrow button enough times to get it to exit also lets it work again… How do I make it user friendly?

Is the problem that the index.html for phonegap is just a redirect page, so the cordova.js file isn’t active? If so, how do I include it? The phonegap add-on seems to include it thourgh the gwt.xml file, but it’s including an outdated version within the project.

Okay, learned that the frowny face is actually the sad face of
Vaadin TouchKit’s offline mode
. It only ocurrs within Phonegap (v3.1 on Android 4.4), not in the Chrome browser. The browser navigates to other pages like a normal browser, and shows a normal “no response from server” message if the server is down. Within Phonegap though, TouchKit’s offline mode is getting activated (sad face screen) when navigating back from a link or when the server goes down,
and remains stuck there
. Bringing the server back up doesn’t make it go away. There’s no UI to retry.

  1. Why doesn’t it go back online?
  2. Why is it behaving different within Phonegap vs Chrome?

More information…

Now using TouchKit v3.0.1. Still testing on a Nexus 10 running Android 4.4.

Offline mode works most of the time in Chrome - bringing up the sad face when I shut down WiFi and try to do something, and resuming where it left off when I turn WiFi back on.

In a PhoneGap app though, the sad face comes up when I shut down WiFi, but remains when I turn WiFi back on.

I tried disabling OfflineMode by adding to my UI:

    OfflineMode offlineMode = new OfflineMode();

But it doesn’t actually disable offline, it just sets the timeout to -1 which initially resulted in the offline message complaining about slow server response flashing on the screen every time the server was accessed. Later that stopped, but going offline still activates the DefaultOfflineMode.

I instead created my own version of DefaultOfflineMode and made it always show the Try Again button. When used with PhoneGap, the screen still gets stuck. Touching the Try Again button makes the sad face go away and shows my app again, but it seems the WebView browser remains offline, as nothing responds. I tried making the Try Again button just hide the overlay, and also tried having it call Location.reload() like the original. In any case, the PhoneGap/WebView containues to claim “No network connection”.

I’ve only found two ways out:

  1. Touch the back-arrow button repeatedly until I back out as many fragement changes as the app has made, and it exits.
  2. Force-stop the app, which actually retains the session when I go back in.

Created bug report:

I’m now testing on an iPhone with iOS 6, and have the same problem with the DefaultOfflineMode or my own. With PhoneGap v3.1, going offline brings up the sad face and going back online removes this overlay, showing the app again - but
it won’t respond anymore
. Note that local data responds (like scrolling), but it ignores any action that requires hitting the server. Waiting out the 30 minute session timeout, or removing and reinstalling the app, are the only way to get it resonding again.

Hi Adam,

you could finish in phonegap? everything worked?