Ionic aplikacija (ni)je povezana s internetom

Ionic aplikacija (ni)je povezana s internetom

Jedna od osnovnih pretpostavki prilikom razvoja mobilne aplikacije je da će ista posebno ovisiti o povezanosti s internetom. Zbog toga je važno znati kako upravljati različitim situacijama u kojima ne postoji mrežna povezanost ili je ista ograničena. Kao developer trebate imati mogućnost dohvaćanja statusa mreže kao bi mogli implementirati opcije A (ima interneta – prikaži podatke), B (nema interneta – prikaži kopiju podataka iz lokalne memorije) ili C (nema interneta – prikaži obavijet i čekaj vezu s internetom kako bi prikazao podatke).

Korisnik aplikacije o tome treba biti obaviješten kako ne bi pomislio da nešto nije u redu s njegovim mobilnim uređajem ili s aplikacijom.

Naravno, prije dodavanja $cordovaNetwork plugina već ste pokrenuli novi Ionic projekt, dodali Android platformu i podršku za ngCordova.

$ ionic start primjerAplikacije blank
$ cd primjerAplikacije
$ ionic platform add android
$ bower install ngCordova

$cordovaNetwork plugin

Dodajte ga u Ionic aplikaciju pokretanjem naredbe

cordova plugin add cordova-plugin-network-information

Nakon instalacije u direktoriju plugins primjetit ćete novi direktorij cordova-plugin-network-information

Ionic Cordova Network plugin

U dokumentaciji plugina možete vidjeti koje opcije vam pruža Connection objekt.

Connection Type                          Description
Connection.UNKNOWN              Unknown connection
Connection.ETHERNET               Ethernet connection
Connection.WIFI                          WiFi connection
Connection.CELL_2G                   Cell 2G connection
Connection.CELL_3G                   Cell 3G connection
Connection.CELL_4G                   Cell 4G connection
Connection.CELL                          Cell generic connection
Connection.NONE                         No network connection

Sljedećim primjerom prikazat ćete informaciju o (ne)postojanju internet veze i vrsti veze.

angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('InternetCtrl', function($ionicPlatform, $rootScope, $scope, $cordovaNetwork) {
    $ionicPlatform.ready(function() {
 
        $scope.type = $cordovaNetwork.getNetwork()
        $scope.isOnline = $cordovaNetwork.isOnline()
        $scope.isOffline = $cordovaNetwork.isOffline()
 
    });
});

Prikaz statusa internet veze

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>primjerAplikacije</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
       <div class="card">
            <div class="item item-divider">
               Status mreže!
            </div>
            <div class="item item-text-wrap" ng-controller="InternetCtrl">
                <ul class="list">
                    <li class="item">
                        type : {{type}}
                    </li>
                    <li class="item">
                         isOnline : {{isOnline}}
                    </li>
                    <li class="item">
                        isOffline : {{isOffline}}
                    </li>
                </ul>
            </div>
            <div class="item item-divider text-right">
                <code>ngCordova</code> plugin
            </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

Na mobilnom uređaju to izgleda ovako

Ionic ngCordova Network Android

Apache Cordova

Sljedećim primjerom pokrivate opciju kada mobilni uređaj nije povezan s internetom (Connection.NONE). U ovom primjeru ne treba vam ngCordova.

angular.module('starter', ['ionic'])

.run(function($ionicPlatform, $ionicPopup) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
    if (window.cordova) {
        if(window.Connection) {
            if(navigator.connection.type == Connection.NONE) {
                    $ionicPopup.confirm({
                        title: "Status mreže",
                        content: "Mobilni uređaj nije povezan s internetom.",
                        buttons: [{
                                    text: 'Ok',
                                    type: 'button-positive',
                                   }]
                    })
            }
        }
     };
  });
})

Na mobilnom uređaju to izgleda ovako

Ionic Cordova Network Android

Koristiti factory!?

Najbolja opcija je napraviti factory koji onda možete koristiti kroz cijelu Ionic aplikaciju.

.factory('internetProvjera', function() {
    return function internetProvjera() {
        var internet= true;
        if (window.cordova) {
            if (window.Connection) {
                if (navigator.connection.type == Connection.NONE) {
                    internet= false;
                }
            }
        }
        return internet;
    };
})

Factory možete pozvati u bilo koji kontroler.

.controller('primjerCtrl', function($scope, $ionicPopup, internetProvjera) {

    $scope.nesto= function() {
        var internet= internetProvjera();
        if (internet== true) {
               //prikaži podatke s vanjskog izvora
                   } else {
            var alertPopup = $ionicPopup.alert({
                title: 'Status mreže',
                template: 'Za prikaz podataka potreban je internet!'
            });
        }
    };
})

Zaključak

Ovo su samo tri mala informativna primjera kako možete koristiti $cordovaNetwork plugin u Ionic aplikaciji.

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.

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 *