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.
|
1 2 3 |
$ 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
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); } } |
Kada je u pitanju home.ts komponenta ondje trebam uvesti Platform i AlertController.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
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.
