Ionic Check Internet Connection – To check internet connection cordova-plugin-network-information is used, here in this tutorial, we are going to explain how you can use this plugin to check the internet connect in Ionic Framework. You can also use our online editor to edit and run the code online.

Supported in Ionic 2 & version > 2.

Ionic Check Internet Connection Example

First of you need to install the cordova and ionic native plugins-

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

• Amazon Fire OS
• iOS
• Android
• Windows
• Browser

Example

Here is simple example to detect internet connection in ionic framework.

import { Network } from '@ionic-native/network';

constructor(private network: Network) { }
// watch network for a disconnect
let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
  console.log('Disconnected..');
});

disconnectSubscription.unsubscribe();

let connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('Connected to internet sucessfully.');
 
});

connectSubscription.unsubscribe();

Ionic Brightness This plugin enables us to control the brightness of device. It is very easy to install and use this plugin. Here in this article we are going to cover this with simple example.

Ionic Brightness Native Example

You can manage the brightness of your device using this plugin. First let us see how to install it.

Installation

You can install the cordova plugin cordova-plugin-brightness simply as below-

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

Supported Platforms

• Android
• iOS

Example

import { Brightness } from '@ionic-native/brightness';

constructor(private brightness: Brightness) { }

...

let brightnessValue: number = 0.8;
this.brightness.setBrightness(brightnessValue);

Instance Members

• setBrightness(Floating)– Set the device brightness(value 0-100)
• getBrightness()– Get the device current brightness.
• setKeepScreenOn()– Do’t let the screen sleep.

Ionic Bluetooth Serial – This plugin is basically used to establish serial communication over bluetooth.

Ionic Bluetooth Serial Native Plugin Example

Installation

Below command is used to install the bluetooth serial plugin-

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

Supported Platforms

• Windows 8
• Android
• iOS

Example

import { BluetoothSerial } from '@ionic-native/bluetooth-serial';

constructor(private bluetoothSerial: BluetoothSerial) { }


// Write a string
this.bluetoothSerial.write('hello world').then(success, failure);

// Array of int or bytes
this.bluetoothSerial.write([186, 220, 222]).then(success, failure);

// Typed Array
var data = new Uint8Array(4);
data[0] = 0x41;
data[1] = 0x42;
data[2] = 0x43;
data[3] = 0x44;
this.bluetoothSerial.write(data).then(success, failure);

// Array Buffer
this.bluetoothSerial.write(data.buffer).then(success, failure);

Instance Members

• connect(macAddress_or_uuid)
• connectInsecure(macAddress)
• disconnect()
• write()
• available()
• read()
• readUntil(delimiter)
• subscribe(delimiter)
• subscribeRawData()
• clear()
• list()
• isEnabled()
• isEnabled()
• isConnected()
• readRSSI()
• showBluetoothSettings()
• enable()
• discoverUnpaired()
• setDeviceDiscoveredListener()
• setName(newName)
• setDiscoverable(discoverableDuration)

Ionic Battery Status– This plugin is basically used to deal with device’s battery such as getting battery status on low, on change or on critical. Here in this tutorial, we are going to explain how to use this plugin to get the status.

Ionic Battery Status Native Plugin Example

You can install the cordova plugin cordova-plugin-battery-status simply as below-

Installation

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

• Windows Phone 8
• Amazon Fire OS
• Android
• BlackBerry 10
• Browser
• Firefox OS
• iOS
• Tizen
• Ubuntu
• Windows

Example

import { BatteryStatus } from '@ionic-native/battery-status';

constructor(private batteryStatus: BatteryStatus) { }

...


// watch change in battery status
let subscription = this.batteryStatus.onChange().subscribe(
 (status: BatteryStatusResponse) => {
   console.log(status.level, status.isPlugged);
 }
);

// stop watch
subscription.unsubscribe();

Instance Members

• onChange()– Watch when battery level change.
• onLow()– Watch when battery low.
• onCritical()– Watch when Battery Critical.

Battery Status Response

Ionic Base64 to Gallery Native Plugin – Basically this plugin allows us to save the base64 data in png form in our device. cordova-base64-to-gallery plugin is used to convert base64 data to image gallery. Here in this tutorial we are going to explain how you can use this plugin in Ionic.

Ionic Base64 to Gallery Native Plugin Example

First install the cordova plugin cordova-base64-to-gallery to use this feature.

Installation

You can install the plugin using the below command-

$ ionic cordova plugin add cordova-base64-to-gallery
$ npm install --save @ionic-native/base64-to-gallery

• IOS
• Android
• Windows Phone 8

Example

import { Base64ToGallery } from '@ionic-native/base64-to-gallery';

constructor(private base64ToGallery: Base64ToGallery) { }


...


this.base64ToGallery.base64ToGallery(base64Data, { prefix: '_img' }).then(
  res => console.log('Saved image to gallery ', res),
  err => console.log('Error saving image to gallery ', err)
);

Instance Members

• base64ToGallery(data, options)– Converts a base64 string into image and saves this image in system’s gallery.

Ionic Barcode Scanner Native Plugin – Barcode scanner provides the native barcode scanning functionality in Ionic Framework. This Plugin uses Camera view to scan the barcode and returns the data. Here in this tutorial we are going to explain how you can use the phonegap-plugin-barcodescanner plugin.

Ionic Barcode Scanner Native Plugin Example

You first need to install the cordova plugin phonegap-plugin-barcodescanner–

Installation

$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner

Supported Platforms

• Android
• Blackberry 10
• Browser
• IOS
• Windows

Example

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

constructor(private barcodeScanner: BarcodeScanner) { }

...


this.barcodeScanner.scan().then((barcodeData) => {
 // Success! Barcode data is here
}, (err) => {
    // An error occurred
});

Instance Members

• scan(options)– This is used to open the barcode scanner.
• encode(type, data)– This encodes data into barcode. Where type is type of encoding and data is data to be encoded.

Barcode Scanner Options

Barcode Scan Result

Ionic Badge– We need to install cordova plugin cordova-plugin-badge. Badges are basically used to display some useful information such as new messages even the application is not running in background. Here in this tutorial we are going to explain how you can use ionic Native Badge plugin.

Ionic Badge | Native Badge Plugin Example

First you need to install the cordova plugin cordova-plugin-badge–

Installation

You can install this plugin simply as below-

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

Supported Platforms

• IOS
• Android
• Windows
• Browser

Example

import { Badge } from '@ionic-native/badge';

constructor(private badge: Badge) { }

...

this.badge.set(10);
this.badge.increase(1);
this.badge.clear();

Instance Members

• clear()– Clear badge icon.
• set(number) You can set the badge number using this function.
• get()– Get App Badge Icon.
• increaseBy(increaseBy)– Increase the badge number.
• decrease(decreaseBy)– Decrease by number.
• hasPermission() Check if app has permission to show badges.
• registerPermission()– Register permission to badges.

Ionic Background Mode – This plugin is basically used to prevent the device’s sleep mode when app’s some background activity is going on, cordova-plugin-background-mode is used to set the background mode in Ionic. Here in this tutorial we are going to explain how you can install this plugin and use background mode.

Ionic Background Mode | Native Plugin Example

First let us see how to install the cordova plugin cordova-plugin-background-mode–

Installation

You can install the cordova plugin simply as below –

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

Example

Here is simple example of background mode-

import { BackgroundMode } from '@ionic-native/background-mode';

constructor(private backgroundMode: BackgroundMode) { }

...

this.backgroundMode.enable();

Instance Members

• enable()– Enable Background Mode.
• disable()– Disable Background Mode.
• isEnabled()– Returns true if background mode enabled.
• isActive()– Used to get information if background mode enabled.
• setDefaults(options)– Override the default – text, title, ticker etc.
• configure(options)– This is used to modify the default display information.
• on(event)– This is used to listen the events that are fired by plugin.
• moveToBackground()– Move Forground to background.
• disableWebViewOptimizations()– Enable GPS tracking view in background.
• moveToForeground()– Move Background to forground.
• overrideBackButton()– Override the default back button.
• excludeFromTaskList()– Exclude app from recent task lists.
• isScreenOff() This works as async instead of isActive or isEnabled.
• wakeUp()– Turn on screen.
• unlock()– Turn on screen and show app although screen is locked.

Ionic Background Geolocation Native Plugin– Background Geolocation plugin is used basically to get the foreground and background geolocation. It is very simple to install the background geolocation plugin to access the native geolocation feature. Here in this tutorial, we are going to explain how you can install and use this plugin.

Ionic Background Geolocation Native | Cordova Plugin Example

First you need to install the cordova plugin cordova-plugin-mauron85-background-geolocation.

Installation

You can install the plugin simply as below-

$ ionic cordova plugin add cordova-plugin-mauron85-background-geolocation
$ npm install --save @ionic-native/background-geolocation

Platform

• IOS
• Android

This plugin is supported in both IOS and Android Platforms.

Example

import { BackgroundGeolocation, BackgroundGeolocationConfig } from '@ionic-native/background-geolocation';

constructor(private backgroundGeolocation: BackgroundGeolocation) { }

...

const config: BackgroundGeolocationConfig = {
            desiredAccuracy: 10,
            stationaryRadius: 20,
            distanceFilter: 30,
            debug: true, //  enable this hear sounds for background-geolocation life-cycle.
            stopOnTerminate: false, // enable this to clear background location settings when the app terminates
    };

this.backgroundGeolocation.configure(config)
  .subscribe((location: BackgroundGeolocationResponse) => {

    console.log(location);

    // IMPORTANT:  You must execute the finish method here to inform the native plugin that you're finished,
    // and the background-task may be completed.  You must do this regardless if your HTTP request is successful or not.
    // IF YOU DON'T, ios will CRASH YOUR APP for spending too much time in the background.
    this.backgroundGeolocation.finish(); // FOR IOS ONLY

  });

// start recording location
this.backgroundGeolocation.start();

// If you wish to turn OFF background-tracking, call the #stop method.
this.backgroundGeolocation.stop();

Instance Members

• Location Provider – This is used to set the location service provider.
• Accuracy – Desired Accuracy in Meters[0, 10, 100, 1000], the lower number means higher accuracy reading, higher number means lower accuracy.
• Mode – Used in switch mode function values possible are – BACKGROUND:0, FOREGROUND:1.
• configure(options)
• start() – Start geolocation.
• stop() – Stop geolocation.
• finish() Inform Native plugin that you are done.
• changePace(isMoving)– Force Plugin to enter in moving or stationary state.
• setConfig(options) – This is used to setup the configuration.
• getStationaryLocation() – This returns the current stationary location.
• onStationary() – A listener to stationary state.
• isLocationEnabled() Checks whether the location is enabled or not on your device.
• showAppSettings() – Show settings to change permissions.
• showLocationSettings()
  – This shows the device location settings.
• watchLocationMode()– This basically monitors if user changes the location settings in device.
• stopWatchingLocationMode()– Stop Watching the location mode.
• getLocations()– This returns the stored locations.
• getValidLocations()-Get the valid locations.
• deleteLocation(locationId)– Delete stored location by location Id.
• deleteAllLocations()– Delete all stored locations.
• switchMode(modeId)– Switch mode between background and foreground.