CODEWITHSUNDEEP
angularcordova
Lewis Browne
Lewis Browne

Reputation: 932

Pause and Resume events - Cordova & Angular8

I am currently attempting to use the pause and resume events for a Cordova + Angular 8 application.

constructor() {
    document.addEventListener("pause", this.buttonPressed, false);
    document.addEventListener("resume", this.powerTestSuccess, false);
}

buttonPressed(){
    this.pressed = true;
    console.log('PAUSE EVENT RUNNING');
}

powerTestSuccess(){
   setTimeout(function() {
       console.log("RESUME EVENT RUNNING");
       console.log(this.pressed);
       if(this.pressed == true){
           this.doSomething();
       } else {
           this.doSomethingElse();
       }
   }, 0);
}

I can see thethe console.logs are working, however the this.pressed is not being manipulated and also the doSomething() & doSomethingElse() functions are not being ran. I read in the cordova documentation that When called from a resume event handler, interactive functions such as alert() need to be wrapped in a setTimeout() call with a timeout value of zero, or else the app hangs.

Is this the reason why nothing except the console.log is working?

What can I do to get this working?

Upvotes: 2

Views: 1103

Answers (1)

Eliseo
Eliseo

Reputation: 57939

::glups::, you need use ngZone Imagine you has a service like

export enum CordovaEvent {BackButton,Resume,Pause}
@Injectable()

export class CordovaEventService {

    private listeningSource:Subject<CordovaEvent>=new Subject<CordovaEvent>();
    cordovaEvent:Observable<CordovaEvent>=this.listeningSource.asObservable();
    isCordoba:boolean=false;
    constructor() {
    }

    sendEvent(evento:CordovaEvent)
    {
        this.listeningSource.next(evento);
    }
}

//In your app.main

  ngAfterViewInit() {
    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
  }
  onDeviceReady() {
    // Control pause, resume and backbutton
    document.addEventListener('pause', this.onPause.bind(this), false);
    document.addEventListener('resume', this.onResume.bind(this), false);
    document.addEventListener("backbutton", this.onBackKeyDown.bind(this), false);
    this.cordovaEventService.isCordoba=true;

  };

  onPause() {
    this.cordovaEventService.sendEvent(CordovaEvent.Pause);
  };

  onResume() {
    this.cordovaEventService.sendEvent(CordovaEvent.Resume);
  };

  onBackKeyDown(e) {
    this.cordovaEventService.sendEvent(CordovaEvent.BackButton);
    e.preventDefault();
    e.stopPropagation();

  };

In a component, you can subscribe to "cordovaEvent" I use a "clasic" takeWhile() to unsubscribe, a variable alive:boolean=true, and in ngOnDestroy this.alive=false

this.cordovaEventService.cordovaEvent.pipe(takeWhile(() => this.alive))
  .subscribe((event: CordovaEvent) => {
  if (event == CordovaEvent.BackButton) {
    //An event that no need has reflecj in Angular not need run in ngZone
    if (this.pagina=="Home") {
      navigator.notification.confirm("Do you really quit out?", 
            this.onConfirm, "App-example", ["OK", "Cancel"]);
    }
    else
    {
      this.ngZone.run(()=>{
        !--make some thing--
      })
    }
  }
});

Well, this work because I checked, but imagine that -not check- we improve the servcie running in a ngZone the own service, change the functions onPause, onResumen and onBackButton

  onPause() {
      this.ngZone.run(()=>{
         this.cordovaEventService.sendEvent(CordovaEvent.Pause);
      })
  };

  onResume() {
    this.ngZone.run(()=>{
       this.cordovaEventService.sendEvent(CordovaEvent.Resume);
    })
  };

  onBackKeyDown(e) {
    this.ngZone.run(()=>{
        this.cordovaEventService.sendEvent(CordovaEvent.BackButton);
      })
    e.preventDefault();
    e.stopPropagation();

  };

Upvotes: 1

Related Questions