Ionic 3 Background Geolocation

Posted on

It’s taken a long time to get to this stage, but this is just the start…

After having followed the instructions on this site, I got a long way.

But, I also only got so far as well… Here is a copy of my “home.ts” file for an app.

 

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { BackgroundGeolocation, BackgroundGeolocationConfig, BackgroundGeolocationResponse, BackgroundGeolocationEvents } from '@ionic-native/background-geolocation';
import { LocalNotifications } from '@ionic-native/local-notifications';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

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
};

missionCode: string = "";
userId: string = "";

constructor(public navCtrl: NavController,

private plt: Platform, 
private backgroundGeolocation: BackgroundGeolocation,
public globals: GlobalsProvider,
private localNotifications: LocalNotifications) {


if(this.plt.is('core') || this.plt.is('mobileweb')) {

// NO. It's a browser.
// Use a different GPS method.

} else 
{
// YES. It's a a compilerd app.


this.backgroundGeolocation.configure(this.config)
.then(() => {

this.backgroundGeolocation.on(BackgroundGeolocationEvents.location).
subscribe((location: BackgroundGeolocationResponse) => {
console.log(location);


this.showNotification(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
});

}); 
}

}

startBackgroundGeolocation() {
// start recording location
this.backgroundGeolocation.start();
}

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

showNotification(data){
// Schedule a single notification
this.localNotifications.schedule({
id: 1,
text: JSON.stringify(data),
sound: 'file://sound.mp3',
data: { secret: "key" }
});
}

}

 

My packages.json file looks like this:

{
"name": "My App",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "^5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@auth0/angular-jwt": "^1.2.0",
"@babel/core": "^7.8.4",
"@ionic-native/background-geolocation": "^4.20.0",
"@ionic-native/core": "~4.11.0",
"@ionic-native/geolocation": "^4.20.0",
"@ionic-native/http": "^4.20.0",
"@ionic-native/local-notifications": "^4.20.0",
"@ionic-native/splash-screen": "~4.11.0",
"@ionic-native/status-bar": "~4.11.0",
"@ionic/storage": "^2.2.0",
"cordova-android": "^7.1.1",
"cordova-browser": "^6.0.0",
"cordova-plugin-advanced-http": "^2.4.0",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-geolocation": "^4.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^2.5.3",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-mauron85-background-geolocation": "^3.0.1",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-sqlite-storage": "^4.0.0",
"emulator": "0.1.0",
"glob": "^7.1.6",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"leaflet": "^1.6.0",
"leaflet-ant-path": "^1.3.0",
"leaflet-draw": "^1.0.4",
"leaflet-gps-tracker": "^1.2.1",
"leaflet-polyline": "0.0.2",
"leaflet.freedraw": "^2.0.1",
"native-run": "^0.3.0",
"node-sass": "^4.13.1",
"resolve": "^1.15.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "^3.2.4",
"typescript": "~2.6.2"
},
"description": "The best way to manage your searches from an emergency management control point.",
"cordova": {
"plugins": {
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-sqlite-storage": {},
"cordova-plugin-advanced-http": {},
"cordova-plugin-mauron85-background-geolocation": {},
"cordova-plugin-local-notification": {}
},
"platforms": [
"browser",
"android"
]
}
}

 

This code is a little old, but please note, the version numbers in my packages.json file.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s