Languages

Menu
Sites
Language
Hosted webapps and the hardware Back button

I'm develping a hosted webapp, whose all contents live on my server (all HTMl and JS files).  The .wgt package contains config.xml and the icon.

The app failed the store validation because of the wrong behavior of the Back hardware button:

When the BACK key is pressed, the application must be terminated or the previous page must appear.

I've seen many threads recommending putting the following snippet of code into the app:

window.addEventListener('tizenhwkey', function(e) {
    if (e.keyName == "back") {
        tizen.application.getCurrentApplication().exit();
    }
});

But that works only for packaged webapps, and not hosted ones (hosted apps don't come with any JS in the .wgt file after all and don't have access to the window.tizen global).

One thread recommends implementing a Web View using the native SDK.  Another idea I had is to put an ifame in index.html which is installed locally in the wgt, like so:

<!doctype html>
<html>
  <head>    
    <meta charset="utf-8" />
    <title>Example</title>
    <link rel="stylesheet" href="style.css" />
    <script>
        // since this is run locally in the .wgt file, it has access to window.tizen
        window.addEventListener('tizenhwkey', function(e) {
            if (e.keyName == "back") {
                tizen.application.getCurrentApplication().exit();
            }
        });
    </script>
  </head>
  <body>
    <iframe src="http://example.com/index.html"></iframe>
    <script src="main.js"></script>
  </body>
</html>

All of these solutions feel hacky. I'd prefer to just use the proper implementaiton for hosted webapps via:

<tizen:content src="http://example.com/index.html" />

Is there a way to achieve this?

* * *

Work-arounds aside, I think this is a bug in the UX design of the back button.  Hosted webapps should provide their own navigation instead, using the window.history API if necessary.  But killing (or hiding) the app should be managed by the OS, not the app itself.

Edited by: Staś Małolepszy on 22 Oct, 2013

Responses

4 Replies
Staś Małolepszy

Right after I posted the above message, it occured to me that maybe I should try disabling hardware buttons in config.xml altogether with:

<tizen:setting hwkey-event="disable" />

Has anyone tried submitting an app with this setting?

Alexander AVSukhov

Hello,

hwkey-event - hardware key event is sent to the Web application when the user presses the hardware key (available values: enable (default), disable)
If this option is enabled, the tizenhwkey custom event is sent to the Web application. The tizenhwkey event object has a keyName attribute (available values: menu and back).

Dan-Matei Dan

same problem to me... only with IFRAME the hosted page didn't look so good (seems there is no CSS in there, maybe I should put the CSS in a .css file and not in tag's style)

Alexander AVSukhov