Show a confirmation alert before app close

9:13 PM


If you want to add a confirmation alert before app close, modify your app.js as below :

Type 1:(show a alert message)

$ionicPlatform.registerBackButtonAction(function(e) {
 e.preventDefault();
 function showConfirm() {
  var confirmPopup = $ionicPopup.show({
   title : 'Exit AppName?',
   template : 'Are you sure you want to exit AppName?',
   buttons : [{
    text : 'Cancel',
    type : 'button-royal button-outline',
   }, {
    text : 'Ok',
    type : 'button-royal',
    onTap : function() {
     ionic.Platform.exitApp();
    }
   }]
  });
 };

 // Is there a page to go back to?
 if ($ionicHistory.backView()) {
  // Go back in history
  $ionicHistory.backView().go();
 } else {
  // This is the last page: Show confirmation popup
  showConfirm();
 }

 return false;
}, 101);


Type 2:(show a toast message 'Press again to exit' before exist the app)
For impliment this, you must have to add 'ng-cordova.js' and have to install ngCordova Toast Plugin


var countTimerForCloseApp = false;
$ionicPlatform.registerBackButtonAction(function(e) {
 e.preventDefault();
 function showConfirm() {
  if (countTimerForCloseApp) {
   ionic.Platform.exitApp();
  } else {
   countTimerForCloseApp = true;
   showToastMsg($cordovaToast, 'Press again to exit.');
   $timeout(function() {
    countTimerForCloseApp = false;
   }, 2000);
  }

 };

 // Is there a page to go back to?
 if ($ionicHistory.backView()) {
  // Go back in history
  $ionicHistory.backView().go();
 } else {
  // This is the last page: Show confirmation popup
  showConfirm();
 }

 return false;
}, 101);
I'll always recommend the second option(the 
toast message method)

You Might Also Like

14 comments

  1. .run(function($ionicPlatform, $ionicPopup) {
    $ionicPlatform.ready(function() {

    if (window.cordova && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {

    StatusBar.styleDefault();
    }

    });


    $ionicPlatform.registerBackButtonAction(function(e) {
    e.preventDefault();
    function showConfirm() {
    var confirmPopup = $ionicPopup.show({
    title : 'Exit AppName?',
    template : 'Are you sure you want to exit AppName?',
    buttons : [{
    text : 'Cancel',
    type : 'button-royal button-outline',
    }, {
    text : 'Ok',
    type : 'button-royal',
    onTap : function() {
    ionic.Platform.exitApp();
    }
    }]
    });
    };

    // Is there a page to go back to?
    if ($ionicHistory.backView()) {
    // Go back in history
    $ionicHistory.backView().go();
    } else {
    // This is the last page: Show confirmation popup
    showConfirm();
    }

    return false;
    }, 101);


    })


    This is my code , but its not working ....Please help me

    ReplyDelete
    Replies
    1. Just Replace .run(function($ionicPlatform, $ionicPopup) with .run(function($ionicPlatform, $ionicPopup, $ionicHistory) actually you forgot to initialise $ionicHistory

      Delete
    2. Ya its working ThanQ ..

      one more problem , i navigate page1 to page2 then page 2 to page3 and currently m in page3 , click of device back button should come to page2 then page1 , if page1 is exist currently want to exit the app .

      Please help me to solve this problem , with above same code .

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Ya its working ThanQ ..

      one more problem , i navigate page1 to page2 then page 2 to page3 and currently m in page3 , click of device back button should come to page2 then page1 , if page1 is exist currently want to exit the app .

      Please help me to solve this problem , with above same code .

      Delete
  3. You can modify your code like this:


    if ($ionicHistory.backView()) {
    // Go back in history
    $ionicHistory.backView().go();
    } else if($ionicHistory.backView().stateName == 'YourStateName' || $ionicHistory.currentView().stateName == 'YourStateName'){
    showConfirm();// if you want to exit in this condition
    }else {
    // This is the last page: Show confirmation popup
    showConfirm();
    }




    you can fine more history information from here :http://ionicframework.com/docs/api/service/$ionicHistory/

    ReplyDelete
  4. Hi , it seems it's not working anymore with ionic 1.3.0
    Since the update, backView is always returning null...

    ReplyDelete
  5. It's working fine in ionic 1.3.0 also

    ReplyDelete
  6. i tried to implement that script on my ionic app but no luck. Then i found another way to make a toast with this script:

    //toast on backcall script
    var lastTimeBackPress=0;
    var timePeriodToExit=2000;

    function onBackKeyDown(e){
    e.preventDefault();
    e.stopPropagation();
    if(new Date().getTime() - lastTimeBackPress < timePeriodToExit){
    navigator.app.exitApp();
    }else{
    window.plugins.toast.showWithOptions(
    {
    message: "Press again to exit.",
    duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
    position: "bottom",
    addPixelsY: -40 // added a negative value to move it up a bit (default 0)
    }
    );

    lastTimeBackPress=new Date().getTime();
    }
    };

    document.addEventListener("backbutton", onBackKeyDown, false);
    //script ends

    this script work so far but it has a toast every time i press back button on all pages.
    Please help me how to make make toast just when i press back button on homepage (index.html).?
    thank u before....

    ReplyDelete
  7. there is problem with alert when i login the home page open and when back button is pressed the home page goes to login page and the alert is popup when i go to next page (article page) what should i do for it any solution

    ReplyDelete
  8. Won't ionicPopup work inside a ion-tab?

    ReplyDelete
  9. I m facing a error showToastMsg is not defined? can anybody help?

    ReplyDelete
  10. $ionicPlatform.registerBackButtonAction(function(e) {
    e.preventDefault();

    alert("Are you sure you want to exit AppName?");

    function showConfirm() {
    var confirmPopup = $ionicPopup.show({
    title : 'Exit AppName?',
    template : 'Are you sure you want to exit AppName?',
    buttons : [{
    text : 'Cancel',
    type : 'button-royal button-outline',
    }, {
    text : 'Ok',
    type : 'button-royal',
    onTap : function() {
    ionic.Platform.exitApp();
    }
    }]
    });
    };

    // Is there a page to go back to?
    if ($ionicHistory.backView()) {
    // Go back in history
    $ionicHistory.backView().go();
    } else if($ionicHistory.backView().stateName == 'app.search' || $ionicHistory.currentView().stateName == 'app.search'){
    alert("Are you sure you want to exit AppName?");
    // showConfirm();// if you want to exit in this condition

    }else {
    // This is the last page: Show confirmation popup
    alert("Are you sure you want to exit AppName?");
    // showConfirm();
    }

    return false;
    }, 999);

    This doesn't work in my ionic1.Please Help me

    this my ionic info:
    @ionic/cli-utils : 1.19.2
    ionic (Ionic CLI) : 3.20.0
    global packages:
    cordova (Cordova CLI) : 8.0.0
    Gulp CLI : CLI version 3.9.1 Local version 3.9.1
    local packages:
    Cordova Platforms : none
    Ionic Framework : ionic1 1.3.4
    System:
    Node : v8.11.3
    npm : 5.6.0
    OS : Windows 10
    Environment Variables:
    ANDROID_HOME : not set
    Misc:
    backend : pro

    ReplyDelete
  11. is there a working solution in ionic 3?

    ReplyDelete