Search code examples
cordovaonsen-uimonaca

OnsenUI onresume reload app

My app has 3 tabs and I want to return the user to the splash screen or a specific tab on resume so that I can ensure that I have the users' geolocation. This is what I have tried:

 // Wait for device API libraries to load
function onLoad() {
    document.addEventListener( "deviceready", onDeviceReady, false );
}

// device APIs are available
function onDeviceReady() {
    document.addEventListener( "resume", onResume, false );
}

// Handle the resume event
function onResume() {
    tabbar.setIndex( 1 );
    modal.show();
    getUsersLocation( getEstablishments );
}
Solution

  • This code has been tested in the Monaca debugger on Android and worked fine.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.8/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.8/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.8/js/onsenui.js"></script>
    <script src="components/loader.js"></script>

    <script>
        document.addEventListener( "resume", function(e) {
            alert("You're back!");
            document.getElementById('myNav').setActiveTab(2);
        });
    </script>    
</head>

<body>

<ons-tabbar id="myNav">
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>
<ons-template id="home.html">
  <p>Home</p>
</ons-template>
<ons-template id="fav.html">
  <p>Fav</p>
</ons-template>
<ons-template id="settings.html">
  <p>Settings</p>
</ons-template>

</body>
</html>

    The only quirk I would say, is with the debugging app itself if that is what you are using for testing. For the event to fire, you need to open another app so when you go to the open windows, the debugger is not the first one in the stack. If it is the second one, the event fires without issue.