Kendo UI + Cordova Background Agent for Android,iOS & Windows phone

[Andreas Mildenberger]

How do we get Background agent to track location of device as same works in Windows Phone 8 native.

The same thing i need develop in Android and iOS so i need to know that how we can do that using HTML5\JS with Kendo UI (Appbuilder, cordova).

Please assist me for the same.

Thanks

[Kaloyan]

Hello Andreas,

For this you will need to use custom Cordova plugin. Unfortunately, I was not able to find such for the WP Background Agent. However, there are a lot others that could help you out.

For example this one. It integrates with all the three supported mobile platforms (iOS, Android and WP) and it seems like a good choice. You can also check this forum post for more details.

Another one is the Background Geolocation, which does exactly what you need. It tracks the location of your device, while in background mode. However, its current state supports only Android and iOS devices. Here is a good forum posts about it.

Further, to import third party Cordova plugin within your application, you can follow these steps.

I hope this helps.

Regards,
Kaloyan
Telerik

 

 

[Andreas]

Hello Kaloyan,

we have follwed the link https://github.com/christocracy/cordova-plugin-background-geolocation and implement the whole solution as it is, but its not working we are continuously getting the error, " Class not found" , also the example it was given <script type="text/javascript" src="phonegap.js"></script> but the phonegap.js is no where in the sample, we have download it from the phonegap site, but still no success. please suggest us any solution if you have.

[Kaloyan]

Hello Andreas,

Thank you for reaching back.

As the plugin is developed mainly for phonegap users, the example in it refers phonegap.js. When used within AppBuilder, you will need to change this to cordova.js. Anyway, I have prepared a ready to go application for your convenience. Please, import it on your side and check if it is working as expected. For iOS the app will print coordinates and other plugin options in the devise console. However, for Android you will first need to provide a server url in order to upload and sync the coordinates. I hope it helps.

Further, here are the things that should be noted while importing the plugin and using the provided in it example:
1. Download the plugin as an archive from here and then import it inside your project.
2. Next, apply the following changes to the index.js file:

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        navigator.splashscreen.hide();

        if (window.plugins.backgroundGeoLocation) {
        app.configureBackgroundGeoLocation();
        }
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    },
    configureBackgroundGeoLocation: function() {
        // Your app must execute AT LEAST ONE call for the current position via standard Cordova geolocation,
        // in order to prompt the user for Location permission.
        window.navigator.geolocation.getCurrentPosition(function(location) {
            console.log('Location from Phonegap');
        });
        var bgGeo = window.plugins.backgroundGeoLocation;
        /**
         * This would be your own callback for Ajax-requests after POSTing background geolocation to your server.
         */
        var yourAjaxCallback = function(response) {
            ////
            // 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.
            //
            //
            bgGeo.finish();
        };
        /**
         * This callback will be executed every time a geolocation is recorded in the background.
         */
        var callbackFn = function(location) {
            console.log('[js] BackgroundGeoLocation callback: ' + location.latitude + ',' + location.longitude);
            // Do your HTTP request here to POST location to your server.
            //
            //
            yourAjaxCallback.call(this);
        };
        var failureFn = function(error) {
            console.log('BackgroundGeoLocation error');
        }
        // BackgroundGeoLocation is highly configurable.
        bgGeo.configure(callbackFn, failureFn, {
                            url: 'http://only.for.android.com/update_location.json', // <-- only required for Android; ios allows javascript callbacks for your http
                            params: { // HTTP POST params sent to your server when persisting locations.
                auth_token: 'user_secret_auth_token',
                foo: 'bar'
            },
                            headers: {
                'X-Foo': 'bar'
            },
                            desiredAccuracy: 10,
                            stationaryRadius: 20,
                            distanceFilter: 30,
                            notificationTitle: 'Background tracking', // <-- android only, customize the title of the notification
                            notificationText: 'ENABLED', // <-- android only, customize the text of the notification
                            activityType: "AutomotiveNavigation", // <-- iOS-only
                            debug: true // <-- enable this hear sounds for background-geolocation life-cycle.
                        });
        // Turn ON the background-geolocation system. The user will be tracked whenever they suspend the app.
        bgGeo.start();
        // If you wish to turn OFF background-tracking, call the #stop method.
        // bgGeo.stop()
    }
};

Note, you will need to provide a server url in order to run the plugin on Android devices. I have marked the spot in the index.js file with red.

3. Keep the index.html file as it is, created from a blank project template.
4. Build and deploy the application and check if it is working as expected while in the background.

Also, for server implementation you can use Telerik Backend Services which allow you to store GeoPoint values  in the data items in your content types and make queries on top of these values. For example, you can send push notifications to the users that are currently located in a certain range or polygon.

Please, do not hesitate to contact us again if you need further assistance.

Regards,
Kaloyan
Telerik

 

 

[Christopher]

Hi, plugin author of cordova-background-geolocation.

I've released a new Premium Version with completely refactored Android plugin.

- Vastly improved Android battery performance.
- Android no longer handles HTTP in-plugin -- executes your javascript callback, just like iOS

http://christocracy.github.io/cordova-background-geolocation/

[Kaloyan]

Hi Christopher,

Thank you for bringing this to the community!

Regards,
Kaloyan
Telerik

 

 

[Anushri]

I am truing to imports cordova background service plugins. after import i can show the folder under plugins folder but not find in properties->plugins

 I got plugins from Red-Folder/Cordova-Plugin-BackgroundService

Can you please help me?

[Kaloyan]

Hi Anushri,

I assume you are speaking of the BackgroundService plugin found here? Please, correct me if my assumption is wrong. However, if so, these versions of the plugin are not Plugman compatible and thus, not seeing them in your project's Properties page is expected.

As written in the above mentioned git repository, you will need to install this version of the BackgroundServices plugin in your AppBuilder project instead. A demo about it can be found here.

I hope this helps.

Regards,
Kaloyan
Telerik