Hi Everyone,
I want to make ionic app to run in the background and get geolocation.
Basic installation as follows.
- nodejs 8.11.3 (npm v5.6.0)
- Cordova 8.0.0
- Ionic 3.20.0
Other plugins:
npm install --save @ionic-native/core@latest
ionic cordova plugin add cordova-plugin-geolocation
npm install --save @ionic-native/geolocation
ionic plugin add cordova-plugin-mauron85-background-geolocation
npm install --save @ionic-native/background-geolocation
ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar
ionic cordova plugin add cordova-plugin-inappbrowser
npm install --save @ionic-native/in-app-browser
Provider: LocationTracker
location-tracker.ts
import { Injectable, NgZone } from '@angular/core';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import 'rxjs/add/operator/filter';
@Injectable()
export class LocationTracker {
public watch: any;
constructor(public zone: NgZone,
public backgroundGeolocation: BackgroundGeolocation,
public geolocation: Geolocation) {
}
startTracking() {
// Background Tracking
let config = {
desiredAccuracy: 0,
stationaryRadius: 20,
distanceFilter: 10,
debug: false,
interval: 60000
};
this.backgroundGeolocation.configure(config).subscribe((location) => {
//console.log('BackgroundGeolocation: ' + location.latitude + ',' + location.longitude);
// Run update inside of Angular's zone
this.zone.run(() => {
this.lat = location.latitude;
this.lng = location.longitude;
});
}, (err) => {
console.log(err);
});
// Turn ON the background-geolocation system.
this.backgroundGeolocation.start();
// Foreground Tracking
let options = {
frequency: 3000,
enableHighAccuracy: true
};
this.watch = this.geolocation.watchPosition(options).filter((p: any) => p.code === undefined).subscribe((position: Geoposition) => {
console.log(position);
// Run update inside of Angular's zone
this.zone.run(() => {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
});
});
}
stopTracking() {
console.log('stopTracking');
this.backgroundGeolocation.finish();
this.watch.unsubscribe();
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Geolocation } from '@ionic-native/geolocation';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpClientModule } from '@angular/common/http';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation';
import { LocationTracker } from '../providers/location-tracker/location-tracker';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp, { animate: false })
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
Geolocation,
{provide: ErrorHandler, useClass: IonicErrorHandler},
LocationTracker,
BackgroundGeolocation
]
})
export class AppModule {}
home.ts
import { Component} from '@angular/core';
import { NavController,Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { HttpClient } from '@angular/common/http';
import { LocationTracker } from '../../providers/location-tracker/location-tracker';
@Component({
selector: 'home-page',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,
public geolocation: Geolocation,
public http: HttpClient,
public locationTracker: LocationTracker,
public rest: Rest,
public platform: Platform) {
this.platform.ready().then(() => {
this.locationTracker.startTracking();
});
}
}
Application is running fine on foreground mode, but it’s unable to generate geolocation in background mode.
Is there anything wrong in the code? How can I fix it?
Regards
P.S. I am running this app on Android device ( Nougat )