Ionic Insomnia

Ionic Insomnia – Nitko nije lud da spava

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.

Ionic Insomnia

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu.

$ 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:

$ ionic cordova plugin add cordova-plugin-insomnia
$ npm install --save @ionic-native/insomnia

I navodim ga unutar app.module.ts.

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.

Ionic Insomnia

<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.

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

{
  "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"
    ]
  }
}

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 *