Iako sam već objavio blog post o provjeri povezanosti s mrežom/internetom za Ionic 1 mislim da je vrijeme da osvježim informacije s uputama vezanim uz Ionic 2. Od sada više nećemo koristiti ngCordova pluginove nego se prebacujemo na Ionic Native.
Uz pretpostavku da ste već pokrenuli novi Ionic 2 projekt možemo krenuti dalje.
Ionic Native Network plugin
Network plugin ćemo dodati pomoću naredbe $ ionic plugin add cordova-plugin-network-information.
Network servis
Plugin koji smo ranije instalirali daje nam mogućnost da uopće možemo napraviti servis koji će vršiti provjeru povezanosti s mrežom/internetom. Servis ćemo kreirati koristeći Ionic CLI točnije naredbu $ ionic g provider NetworkService.
Prilikom kreiranja servisa u njemu se nalazi samo import { Injectable } from '@angular/core'; , a to nam nije dovoljno za provjeru povezanosti s mrežom/internetom. Sada trebamo pozvati ranije instaliran plugin uz dodatak Platform servisa koji će provjeravati na kojoj smo trenutno platformi (Android ili iOS) tj. jesmo li uopće na nekoj od tih platformi.
Sadržaj koji se nalazi u network-service.ts zamijenit ćemo sljedećim:
|
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 { Injectable } from '@angular/core'; import { Network } from 'ionic-native'; import { Platform } from 'ionic-angular'; declare var Connection; @Injectable() export class NetworkService { onDevice: boolean; constructor(public platform: Platform){ this.onDevice = this.platform.is('cordova'); } isOnline(): boolean { if(this.onDevice && Network.connection){ return Network.connection !== Connection.NONE; } else { return navigator.onLine; } } isOffline(): boolean { if(this.onDevice && Network.connection){ return Network.connection === Connection.NONE; } else { return !navigator.onLine; } } } |
Servis nam se zapravo sastoji od dvije funkcije isOnline i isOffline koje možemo pozivati bilo gdje u aplikaciji kada želimo provjeriti povezanost s mrežom/internetom.
Iako sada imamo funkcionalan servis još uvijek ga ne možemo koristiti u aplikaciji jer ga nismo naveli u app.module.ts i aplikacija zapravo ne zna za njega. Zato ćemo sada dodati sljedeće u 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 |
import { NgModule, ErrorHandler } from '@angular/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { Page1 } from '../pages/page1/page1'; import { Page2 } from '../pages/page2/page2'; import { NetworkService } from '../providers/network-service'; @NgModule({ declarations: [ MyApp, Page1, Page2 ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, Page1, Page2 ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, NetworkService] }) export class AppModule {} |
Korištenje servisa
Servis koristimo na način da ga pozovemo import { NetworkService } from '../../providers/network-service'; u komponentu tj. klasu u kojoj želimo znati imamo li povezanost s mrežom/internetom.
U ovom primjeru NetworkService će na stranici page1.html provjeravati imamo li povezanost s mrežom/internetom tako da ćemo unutar page1.ts dodati sljedeće:
|
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 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { NetworkService } from '../../providers/network-service'; @Component({ selector: 'page-page1', templateUrl: 'page1.html' }) export class Page1 { poruka:string; constructor(public _navCtrl: NavController, public _networkService: NetworkService) { this.provjeraInterneta(); } provjeraInterneta(){ if(this._networkService.isOnline()){ console.log('Ima interneta!'); this.poruka = "Ima interneta!"; //Povuci podatke s API-ja }else{ console.log('Nema interneta!'); this.poruka = "Nema interneta!"; //Prikaži podatke iz lokalne SQLite baze } } } |
Unutar page1.html dodali smo sljedeće:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Page One</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h3>Ionic Menu Starter</h3> <p> If you get lost, the <a href="https://ionicframework.com/docs/v2">docs</a> will show you the way. </p> <button ion-button secondary menuToggle>Toggle Menu</button> <p>{{poruka}}</p> </ion-content> |
U konačnici to izgleda ovako
Zaključak
I to je to! Ovo je samo jedna od mogućnosti kako koristiti Ionic Native Network plugin.
Ovaj je plugin posebno koristan kada u aplikaciji prikazujete podatke s nekog vanjskog izvora. Znači, ako nestane veze s internetom neće se više prikazati niti podaci koje želite dati korisniku, a korisnik neće znati zašto se to dogodilo. Jednom kada utvrdite da veza s internetom ne postoji trebate odlučiti što i kako dalje. Možete o tome obavijestiti korisnika ili mu u tom slučaju prikazivati podatke iz lokalne memorije sve dok se ponovno ne uspostavi veza s internetom. – Ionic aplikacija (ni)je povezana s internetom
