To implement a working Ionic app with ngCordova and background geolocation for tracking the device's location, you'll need to follow these steps:

  1. Create a New Ionic Project: Start by creating a new Ionic project using the Ionic CLI:

    bash
    ionic start MyGeolocationApp blank
  2. Install Required Plugins: Install the required plugins for ngCordova and background geolocation:

    bash
    # Cordova Background Geolocation Plugin ionic cordova plugin add cordova-plugin-background-geolocation # ngCordova Geolocation Wrapper bower install ngCordova
  3. Add ngCordova and ngCordova Plugins to Index.html: In your index.html file, add references to the ngCordova and Cordova plugins:

    html
    <!-- Add ngCordova --> <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
  4. Initialize ngCordova: In your app.js or main.js, you need to initialize ngCordova by adding it as a dependency to your app module:

    javascript
    angular.module('starter', ['ionic', 'ngCordova'])
  5. Configure Background Geolocation: To configure the background geolocation plugin, you'll need to use $cordovaBackgroundGeolocation from ngCordova. Create a new controller and include the following code:

    javascript
    angular.module('starter').controller('GeoLocationCtrl', ['$scope', '$cordovaBackgroundGeolocation', function($scope, $cordovaBackgroundGeolocation) { // Configure background geolocation var options = { locationProvider: $cordovaBackgroundGeolocation.provider.DISTANCE_FILTER_PROVIDER, desiredAccuracy: $cordovaBackgroundGeolocation.accuracy.HIGH, stationaryRadius: 20, distanceFilter: 30, debug: false }; // Start background geolocation $cordovaBackgroundGeolocation.configure(options).then(null, function (error) { console.error(error); }); // Run when the device is ready document.addEventListener('deviceready', function () { $cordovaBackgroundGeolocation.start(); }); }]);
  6. Add the Controller to a View: Now, add the GeoLocationCtrl to your desired view. For example, in templates/home.html:

    html
    <ion-view view-title="Home"> <ion-content> <!-- Your content here --> </ion-content> </ion-view>
  7. Set up Platform Configuration: To enable background geolocation for different platforms (iOS and Android), you'll need to modify the config.xml file. Add the following lines:

    xml
    <!-- iOS --> <platform name="ios"> <preference name="UIBackgroundModes" value="location" /> </platform> <!-- Android --> <platform name="android"> <config-file target="AndroidManifest.xml" parent="/manifest"> <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" /> </config-file> </platform>
  8. Test on a Device: To test the app, run it on a device or emulator, as background geolocation does not work on a web browser.

    bash
    ionic cordova run android

Remember that background geolocation can consume significant battery power, so it's essential to use it judiciously and consider providing user controls to enable/disable this feature as needed. Additionally, make sure your app complies with privacy regulations and obtains necessary permissions from users before using geolocation services.

Have questions or queries?
Get in Touch