Iako je imperativ svake mobilne aplikacije brzina nekada je jednostavno potrebno čekati da se nešto unutar aplikacije dogodi.
Npr. ako je u tijeku nekakva sinkronizacija koja traje dulje od zadanog vremena mobilnog uređaja prije gašenja ekrana dogoditi će se da će se ekran ugasiti za vrijeme te sinkronizacije. U tom se slučaju može dogoditi, ako drugačije nije postavljeno, da se sinkronizacija prekine.
Kako bi se takav scenarij spriječio i kako se korisnik mobilne aplikacije ne bi zbunio zbog iznenadnog gašenja ekrana u pola neke radnje može se koristiti Insomnia plugin.
Kreiranje aplikacije
Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu.
|
1 2 3 |
$ ionic start IonicInsomnia blank $ cd IonicInsomnia $ ionic cordova platform add android |
Insomnia
Ionic Native plugin koji ću u ovom slučaju instalirati zove se Insomnia.
Instaliram ga sljedećim naredbama:
|
1 2 |
$ ionic cordova plugin add cordova-plugin-insomnia $ npm install --save @ionic-native/insomnia |
I navodim ga unutar app.module.ts.
|
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 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { Insomnia } from '@ionic-native/insomnia'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, Insomnia, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} |
Tek sada ga mogu koristiti unutar aplikacije.
Za potrebu ovog primjera funkcije ću pozivati klikom na gumb.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ion-header> <ion-navbar> <ion-title> Ionic Insomnia </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button full color="secondary" (click)="keepAwake()">keepAwake</button> <button ion-button full color="dark" (click)="allowSleepAgain()">allowSleepAgain</button> </ion-content> |
Klikom na gumb keepAwake spriječavam mobilni uređaj da ode u sleep mode, a klikom na allowSleepAgain ponovno dopuštam zadano ponašanje. U ovom slučaju ekran uređaja ugasi se nakon 15 sekundi neaktivnosti.
|
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 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Insomnia } from '@ionic-native/insomnia'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, private _insomnia: Insomnia) {} keepAwake(){ this._insomnia.keepAwake() .then( () => console.log('success'), () => console.log('error') ); } allowSleepAgain(){ this._insomnia.allowSleepAgain() .then( () => console.log('success'), () => console.log('error') ); } } |
Zaključak
Insomnia je odličan plugin koji svoju svrhu u potpunosti ispunjava. Različiti su scenariji u kojima može biti korišten. U ovom blog postu prikazan je samo jedan od njih.
Za kraj, struktura projekta prema package.json
|
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 |
{ "name": "IonicInsomnia", "version": "0.0.1", "author": "Tomislav Stanković", "homepage": "https://www.tomislavstankovic.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/animations": "5.2.10", "@angular/common": "5.2.10", "@angular/compiler": "5.2.10", "@angular/compiler-cli": "5.2.10", "@angular/core": "5.2.10", "@angular/forms": "5.2.10", "@angular/http": "5.2.10", "@angular/platform-browser": "5.2.10", "@angular/platform-browser-dynamic": "5.2.10", "@ionic-native/core": "4.7.0", "@ionic-native/insomnia": "^4.7.0", "@ionic-native/splash-screen": "4.7.0", "@ionic-native/status-bar": "4.7.0", "@ionic/storage": "2.1.3", "cordova-android": "7.0.0", "cordova-plugin-device": "^2.0.2", "cordova-plugin-insomnia": "^4.3.0", "cordova-plugin-ionic-keyboard": "^2.0.5", "cordova-plugin-ionic-webview": "^1.1.19", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-whitelist": "^1.3.3", "ionic-angular": "3.9.2", "ionicons": "3.0.0", "rxjs": "5.5.10", "sw-toolbox": "3.6.0", "zone.js": "0.8.26" }, "devDependencies": { "@ionic/app-scripts": "3.1.9", "typescript": "~2.6.2" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": {}, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-insomnia": {} }, "platforms": [ "android" ] } } |
