Ionic 3 – kako spriječiti slučajno zatvaranje aplikacije

Ionic 3 – kako spriječiti slučajno gašenje aplikacije

U ovom ću blog postu pokazati kako spriječiti slučajno zatvaranje Ionic aplikacije pritiskom na hardversku/kapacitivnu back tipku na Android mobilnim uređajima.

Kada korisnik pritisne back tipku pojavit će se skočni prozor s pitanjem želi li stvarno zatvoriti aplikaciju ili ne.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu kako bi kasnije mogao aplikaciju pokrenuti na Android mobilnom uređaju.

$ ionic start IonicBack sidemenu
$ cd IonicBack 
$ ionic cordova platform add android

Ionic Platform

Najbolja stvar u svemu je što za ovu funkcionalnost nije potrebno instalirati dodatne Ionic Native pluginove.

Provjeru pritiska hardverske/kapacitivne back tipke postavit ću unutar dvije komponente čisto iz razloga da pokažem dva načina kako je to moguće učiniti.

Unutar app.component.ts Platform već imam tako da ću dodati još i AlertController.

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, AlertController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{title: string, component: any}>;

  constructor(public _platform: Platform, 
              public _statusBar: StatusBar, 
              public _splashScreen: SplashScreen,
              public _alertCtrl: AlertController) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }
    ];

  }

  initializeApp() {
    this._platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this._statusBar.styleDefault();
      this._splashScreen.hide();

      this._platform.registerBackButtonAction(() => {
        try {
          this.showConfirm();
        }
        catch(e) {
          console.log(e);
        }
      }, 0)

    });
  }

  showConfirm() {
    let confirm = this._alertCtrl.create({
      title: 'Pažnja!',
      message: 'Želite li ugasiti aplikaciju?',
      buttons: [
        {
          text: 'Ne',
          handler: () => {
            //
          }
        },
        {
          text: 'Da',
          handler: () => {
            this._platform.exitApp();
          }
        }
      ]
    });
    confirm.present();
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

Ionic 3 – kako spriječiti slučajno gašenje aplikacije

Kada je u pitanju home.ts komponenta ondje trebam uvesti Platform i AlertController.

import { Component } from '@angular/core';
import { NavController, Platform, AlertController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public _navCtrl: NavController,
              public _platform: Platform, 
              public _alertCtrl: AlertController) {

  }

  ionViewDidEnter() {
    this.initializeBackButtonCustomHandler();
  }

  public initializeBackButtonCustomHandler(): void {
    this._platform.registerBackButtonAction(() => {
      try {
        this.showConfirm();
      }
      catch(e) {
        console.log(e);
      }
}, 10);
} 

showConfirm() {
  let confirm = this._alertCtrl.create({
    title: 'Pažnja!',
    message: 'Želite li ugasiti aplikaciju?',
    buttons: [
      {
        text: 'Ne',
        handler: () => {
          //
        }
      },
      {
        text: 'Da',
        handler: () => {
          this._platform.exitApp();
        }
      }
    ]
  });
  confirm.present();
}

}

Zaključak

Ovo je jedan od načina kako spriječiti slučajno gašenje Ionic aplikacije pritiskom hardverske/kapacitivne back tipke.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *