In an Angular/Ionic project, where would I use the following attributes to appropriately handle my needs?

document.addEventListener('pause', actiontobeperformed, false);
document.addEventListener('resume', actiontobeperformed , false);

My needs are:

I am building an app that is protected, meaning that you can only view the content when:

you enter the correct access code your session has not timed out But when you go to Home, then I want somehow to record that the session is over and that the user needs to authenticate when he es back in the app.

In an Angular/Ionic project, where would I use the following attributes to appropriately handle my needs?

document.addEventListener('pause', actiontobeperformed, false);
document.addEventListener('resume', actiontobeperformed , false);

My needs are:

I am building an app that is protected, meaning that you can only view the content when:

you enter the correct access code your session has not timed out But when you go to Home, then I want somehow to record that the session is over and that the user needs to authenticate when he es back in the app.

• javascript
• android
• ios
• cordova
• ionic-framework

• 1 possible duplicate of how to check app running in foreground or background in ionic/cordova/phonegap – Sithys Commented Apr 13, 2015 at 18:24
• @sithys: I think I need to rewrite question to: how to use these events in AngularJS? As it is not firing – WJA Commented Apr 13, 2015 at 18:37
• I have reformulated my question. – WJA Commented Apr 14, 2015 at 9:57

5 Answers 5

The cordova pause event might be your answer.

And resume when they return.

$(document).ready(function () {
    document.addEventListener('pause', actiontobeperformed, false);
    document.addEventListener('resume', actiontobeperformed , false);
});  

In your js first line or in html inside script tag

The simplest way to achieve a functionalty like you describe would be like this:

After the User authenticated his Session with his credentials you set a value into the localStorage with localStorage.login=1; for example.

You now add the eventlistener for pause like document.addEventListener('pause', actiontobeperformed, false); and call the function actiontobeperformed after that.

function actiontobeperformed() {
    localStorage.login=0;
}

The only thing you still need is a function which checks the login status. Therefore you could use an if else statement

if (localStorage.login == 1) {
    goto menu;
} else {
    goto loginpage;
} 

If you're using Ionic, you should use $ionicPlatform Service, an abstraction of ionic.Platform. read more

$ionicPlatform.on('resume', function(){
      // your staff here
});

$ionicPlatform.on('pause', function(){
      // your staff here
});

So if you want to close session when user press Home button, you should call your AuthService.logout() method inside on Pause code block.

This is the exact issue I'm on. My needs are to be able to put the Ionic Angular app in the background on a phone and then resume, after several hours. If the app is resumed past a check login interval, the user is sent to B2C to check their login.

in the app.ponent.ts in the constructor,

constructor(public platform: Platform){
) {
   this.initializeApp();
}

async initializeApp() {
    this.platform.ready().then(async () => {
      /**
   * The pause event emits when the native platform puts the application
   * into the background, typically when the user switches to a different
   * application. This event would emit when a Cordova app is put into
   * the background, however, it would not fire on a standard web browser.
   */
  this.platform.pause.subscribe((e) => this.pause());

  this.pause();
  /**
   * The resume event emits when the native platform pulls the application
   * out from the background. This event would emit when a Cordova app es
   * out from the background, however, it would not fire on a standard web browser.
   */
  this.platform.resume.subscribe((e) => this.resume());
  document.addEventListener('visibilitychange', (event) => {
    if (document.visibilityState == 'visible') {
      this.resume();
    } else {
      this.pause();
    }
  });

}

Then in the pause and resume you do whatever you need your app to do.